Web Pages and Graphics
Examples of unhelpful use of graphics
Some web authoring software automatically inserts the file name and file size into the ALT TEXT properties: pretty pointless when you think about it. The photo below has these features.
Without helpful alt text, screen readers are unable to convey what the graphic is. With graphics that are essentially page decoration, this might permissible. However, the graph below, which expresses information in a convenient way for sighted people to understand, has no alt text. The data on the graphic is invisible to screen readers.
The graphic above is invisible to screen readers.
Aiming to provide helpful use of graphics.
The excellent photograph below has fairly standard ALT TEXT: not a lot of detail, but it does give an indication of the graphic file's content.
The pie chart below also has ALT TEXT, but is it descriptive enough? The title "Daily Toast Consumption", which you might expect a screen reader to pick up, is actually part of the graphic. Text on a graphic is invisible to screen readers.
Clearly, not enough alt text to describe the graph to those who cannot see it. So, what would be better?
Letting Graphics convey their message
Usually
on a web page, there would be some text in the document itself that mentions
and describes any important graphics, in addition to ALT TEXT.
Unimportant graphics, such as the cubes to the right of this line, may be included for decoration and therefore do not warrant or require a description.
The pie chart below relies on its visual simplicity to convey information that might otherwise be conveyed in a table. All the information, including the title "Daily Toast Consumption", is part of the graphic file, so we must include a full description somewhere.
On this page, the pie chart graphic has both ALT TEXT and LONGDESC, which allows a more detailed explanation of complex graphics. We have also provided a link to a separate brief web page that lists the pie chart data.
Description
of the pie chart graphic
Summary
Alternate Text
- Include ALT TEXT on all graphics, unless they are entirely ornamental.
- If a graphic conveys important information, such as a map or a graph, provide a full text description in the page or elsewhere.
- If you have used a graphic as a button, provide helpful ALT TEXT. If you use the company logo on every page as a Home button, then "company logo" is not the best ALT TEXT. "Home page" may not describe what the graphic is, but it does describe the graphic's function on the page. More helpful for everyone.
Links
- Aim to hyperlink phrases that are indicative of what the next page is about.
- Do not hyperlink single words.
Spelling and Grammar
Accurate spelling and is important, to enable a screen reader to recognise a word from its dictionary. In incorrect space, in a tit le for example, can have curious results.
Correct punctuation helps the screen reader give appropriate emphasis to phrases and to pause in the correct place. Punctuation at the end of each line of a list, for example, will make the screen reader pause at a helpful point.
Contributed by David King, Dudley College of Technology and KCM Design. Article originally published October 2004.