Blogging Sueblimely

When discussing accessibility techniques in blogs, I mentioned the importance of using the “alt” attribute. Here I am going to define it further, show you the positive aspects of using “alt” and how to use it to its best advantage.. Although alt is used for other page elements, such as image map areas, I am concentrating on its use for images.

Definition of the alt attribute

The alt attribute is a method of providing a descriptive text alternative for images. Example:

<img src=”http://www.yourdomain.com/your-image.jpg” alt”this is the alt text” />

Reasons for using the alt attribute

• To display a text equivalent for an image in browsers where images have been turned off.. Reasons:
  • To speed up page load time for users on slow dial-up connections.
  • To avoid viruses that can be spread through image files, where the user does not have adequate virus protection.
  • To save bandwidth when users are concerned about using up download limits.
  • To save download amounts if using a pay per download scheme (e.g. when connecting to internet via a mobile phone)
  • To aid browsing when using a handheld device e.g. PDA, mobile phone, electronic books, Blackberries.
• Accessibility purposes for users with disabilities:
  • For those who use assistive technologies such as screen readers which convert text-to-speech, sound icons, or a braille output
  • For those with color blindness which precludes them from distinguishing detail in images.
  • For those using audio-based browser technologies
• Search engine optimization:
  • Most search engines interpret the meaning of objects by analyzing their alt attribute. They cannot see images!
  • Use keywords in alt text to help with indexing and pagerank.

How to add alt text in blogs

In Blog Posts:

Blogger - In your “Create” post screen upload or point Blogger to your image location using the “Add Image” icon in either the visual or html post tabs. Once this is done look in the Edit HTML window and you will find an empty alt attribute which looks like this alt=”" . Add your text in between ” and ” e.g. alt=”this is the descriptive alt text”

Wordpress - add your image using the image icon in the new post visual tab. Add your “alt” text in the Image description box of the Insert/Add Image window.

Elsewhere in your blog:

If you are manually adding an image to your blog via widgets or straight html coding add the alt code to the image tag: For example:

<img src=”http://www.sueblimely.com/images/icons/ifollowblue.jpg ” alt=”You comment, I follow” /> will produce:

If you are using IE, hovering over the image will show this text. Another attribute, “title”, can be used for displaying image description and this does show up in Firefox.

Tips for the text in the “alt” attribute

• Keep the text short - if too long it may break page layout where images are turned off.
• Ensure the text is meaningful and adquately descriptive for accessiblity purposes or where graphics are not being displayed.
• Include keywords for search engine purposes but still take account of the first two points above.
• If the image is a text image, use the same text for the “alt” attribute - e.g for blog titles
• Use CSS background images for bullets, lines or other decorative elements where descriptions are not necessary to make sense of the page. If you need to add them directly to your page you can leave the alt tag empty (alt=”") or, for example, use alt=”*” for a bullet and alt=”—” for a seperator.
• Use the “title” attribute in addition to the “alt” where you want to add longer descriptions. Example:

<img src=”http://www.sueblimely.com/images/icons/ifollowblue.jpg ” alt=”You comment, I follow” title=”Your comment backlink is followed by search engines.” />

Checking out your page:

If you wish to see how well you are using the alt attribute,

• Turn off images in your brower - see if your alt attributes make sense -try reading your page out loud.
• Convert your blog post into audio using a service such as Odiogo

I guess my blog topics do not lead to relevant Yahoo Shortcut images but as this was suggested for the term “alt”, I liked it and appropriate or not I am using it

Popularity: 24% [?]