Blog category

The lowdown on accessible web content

May 19, 2008

A few high level hints on the accessibility requirements of some of the more common page objects.

Images

Every image should have a valid alt attribute that converys information about, or the purpose of, the image. If the image doesn’t convey any information, it should have an alt attribute of "".

Audio

Transcripts of audio content should be made available.

Colour

Colour alone shouldn’t be used to convey information. There should also be some other form of visual indicator such as additional characters, images or font changes.

Tables

Use the th and td elements correctly. Place column headings in the first row of the table and place row headings in the first column. Use the scope attribute to clarify any ambiguous heading cells.

Flicker

Don’t use the blink and marquee elements. For animated GIFs or other moving objects, the flicker frequency must be less than 2 Hz or greater than 55 Hz. Better to have no moving content at all.

Navigation

For people using screen readers it can be very irritating to have to listen to the same (sometimes lengthy) navigation options on every page. Provide a link before the navigation to bypass the navigation and jump straight to the main content.

The use of properly structured header tags (<h1> to <h6>) provides another way for screen readers to bypass repetitive page-top content and additionally navigate through a page by skipping from one headline to the next.

For client-side image maps, provide alt-text on each area of the map to describe the target of the hotspot.

Server-side image maps are inaccessible so should be avoided.

Links

Link text should clearly state the purpose and destination of the link. Phrases like “Click Here” may mean nothing to someone listening to a screen reader.