Website Design

Slapaddicts designs and develops web sites in Manchester UK.
Find out more about Web Design in Manchester from Slapaddicts

How alt attributes help accessibility

The first, and arguably most important, of the WCAG checkpoints deals with providing a text equivalent for every nontext element on a Web page. Since the guidelines mention the alt attribute specifically, most Web builders interpret the guideline to mean that an alt attribute is required for every image or other nontext page element. The alt attribute isn't the only way to meet the text equivalency requirement, but it's the simplest and easiest to implement in many cases.

By including an alt attribute in each IMG tag, you enable visually impaired visitors who use screen readers to "hear" the content that other visitors see in the images. However, to perform that task properly, the text of the alt attribute must be functionally equivalent to the image or other nontext element it's replacing.

Making alt attributes functionally equivalent

Many Web builders encounter problems when crafting the text of an alt attribute so it successfully conveys the same meaning as the corresponding image. Putting the image filename or other cryptic text in the alt attribute doesn't cut it. That tactic may enable your page to pass muster with an automated accessibility validator (e.g., Bobby) that simply checks for the existence of the alt attribute but doesn't actually make your Web page more accessible.

The alt attribute text should answer the question, "What function does this image serve?" in such a way that someone reading the text will get essentially the same meaning as someone viewing the image.

This doesn't mean that you need to describe the image in detail. The goal of the alt text is to state the purpose of the image, not translate its entire content from a visual format to a textural one. If you need to compose a long text description of an image, put the description in a separate text file and use the longdesc attribute to reference that file.

Consider the following examples:

For a corporate logo that serves as part of the essential branding and identification on a page: alt="XYZ Corporation logo"
For an image used as a bullet: alt="bullet"
For an image of a poison ivy plant used to illustrate an article on poisonous plants: alt="photo of poison ivy plant"
For a decorative image that is part of the visual design of the page but not an essential content element: alt=""
For an invisible spacer image: alt=""

The third example assumes there is a text description of the poison ivy plant elsewhere on the page. If the photo is the only information presented that enables the visitor to identify the plant, then you may need a longer text equivalent. The longdesc attribute, pointing to a separate text file, is the way to handle such a situation.

Empty alt attributes

The last two examples show empty alt text attributes. The images to which these attributes are attached may be necessary to the appearance and visual organization of the page, but they are not part of the essential page content. Consequently, there's no function for which you need to provide a text equivalent.

However, the absence of a function doesn't mean that you can omit the alt attribute. Providing an empty alt attribute efficiently tells screen readers to ignore this image, whereas a missing alt attribute may cause the screen reader to compensate for the omission by reading the path and filename aloud.

Website Design

Slapaddicts designs and develops web sites in Manchester UK.
Find out more about Web Design in Manchester from Slapaddicts