Nice2All.com

The first of 14 guidelines in the WCAG Accessibility Standards tells us to provide equivalent alternatives to auditory and visual content.

Today I would like to take a look just at providing equivalent alternatives to those graphics we all love using in our articles. We have two attributes in HTML that we can use to achieve compliance with the standards on this point, the alt and title attributes.

Now just which attribute should we be using where?

There are many people who still think that the alt attribute should be used to provide a tool tip text for images. This became a common use for this attribute when Internet Explorer incorrectly decided that they would show the alt attribute as a tool tip text. If a title attribute is included along with the alt attribute Internet Explorer will use the title attribute as a tool tip text. Most other graphic browsers will show only the title attribute as a tool tip text.

The alt attribute actually has a different purpose that has nothing to do with tool tip texts. The purpose of this attribute is to, just as the name suggests, provide an alternative to an image. Any non-graphic browser, or graphic browser with images turned off, will display the alt attribute in place of the image itself. The alt attribute also loads before the image and in the cases of large images one will normally see the alt attribute on the screen of a graphic browser before the actual image appears.

People browsing with screen readers actually hear the alt attribute read to them in place of the images. If one leaves the alt attribute out most of the screen readers will read out the full path to the image and this can be very annoying.

The simple rule to follow with regards to the alt attribute is simply to always include them with all images. If the image forms part of the meaning of the relevant article you should provide the full alternative to the image in this attribute. e.g. alt=”A description of the image”. A friendly request here though, please do not provide an alternative to the image if the image really does not add something to the article itself. In the case of images used purely for decorative purposes the alt attribute should still be used but in this case the so-called empty attribute should be used, e.g alt=”". In this last scenario a user with a screen reader will not hear the full path and will not even know the image was there to start off with.

The title attribute on the other hand is to provide additional information about numerous elements within a HTML page. This is primarily used to add a description to links on a page. Most browsers will rightly show this attribute as a tool tip text. The folks interested in search engine optimization generally use this attribute to add more keywords to their pages.

There are some who believe that both the alt and title attributes should be used for the elements on a page. The jury is still out on this one. Some screen readers still being used out there, will read both these attributes when they are used together. Personally I use the alt attribute (empty or descriptive) with images and the title attribute with links.

This is a way in which we can all help to make our pages a lot more accessible. This is not just something for the techies out there, this is something we all can do when we add those images to our content. Keep thinking of others, there are many who will appreciate your efforts.

These posts might be related:

1. Adding Images to our Content
2. “New Windows” are still with us
3. Do it yourself accessibility
4. W3C Accessibility Guidelines - Priority 1 Checkpoints
5. 10 Common Errors when Implementing Accessibility