Sound and Light and Accessibility

No Image without proper tagging - it's the rule!Accessibility is the science of making the web more intelligible for everyone, regardless of their abilities. So you’d be forgiven for taking a step back when greeted by all the acronyms and abbreviations that accessibility matters throw up.

There’s the Web Accessibility Initiative (WAI) which is an attempt by the World Wide Web Consortium (W3C) to make sense of the sometimes contradictory web accessibility standards. Today, WAI is considered to be the ultimate standard in accessibility for the web.

WAI has produced Web Content Accessibility Guidelines (WCAG) — now in its second revision (WCAG 2.0) — which moves beyond the current A to AAA accessibility standards to produce something a little more “joined up”.

The first guideline (GL1) says: “Provide equivalent alternatives to auditory and visual content”. What does that mean in practice?

Images

You should be aiming for an image code like this…

<img src="images/myimage.png" alt="A tree standing alone in the desert" longdesc="descriptions/myimage.txt" title="The loneliness of the environmentalist" />

How does that happen? First, an image placed on a website must have a text description, even if it’s only an image used to pad out a table (which of course you shouldn’t be using on a truly accessible page written in semantic XHTML and CSS). The very least of these is the humble ALT tag; however, in practice, ALT tags on many web sites are at least underutilised and are actually practicality useless for accessibility purposes.

They should be at least five words long and describe what the picture is, for example “An idiot in trouble” or “George W. Bush on the Whitehouse lawn”. Yet what they often say is: “Picture” or “African” or “ri8sn6rx” or even worse, “ ”. The ALT tag is used by screen readers to describe out loud what is on the page; it’s also used by the search engine spiders to assess the worth of your site, which makes it very important for SEO purposes.

There is another accessibility tag for images, the LONGDESC, which is a link to a text file containing a fuller outline of what the image shows; this is important for images which tell a story or those used for illustration of a theme.

Lastly there is the TITLE tag which, while not strictly an accessibility feature, can be a useful aid to making things clearer for all users, not least because in most browsers, hovering over the image produces a bubble containing the contents of the TITLE tag.

So a well-constructed image tag might look something like this …

<img src="images/myimage.png" alt="A tree standing alone in the desert" longdesc="descriptions/myimage.txt" title="The loneliness of the environmentalist" />

You’ll note that all the tags are in lower case and also that the image tag is closed by “/>”, both are part of semantic XHTML 1.0 Strict which you are using anyway, aren’t you?

Sound

By comparison, sound files are much easier (or much more trouble) to make accessible. If you have a sound file, you should add a link to a text file to a transcript of the recording. For a long clip, this could take some time to copy out, but for those with hearing difficulties this sort of consideration is likely to go down very well.