2.1.3 Examples

Extreme Example #1 - Alternative Text

Alternative text must be supplied with every image in order for a web page to pass a code validation test. Images include, but are not limited to regular graphics, type graphics, symbols, image maps, tables and charts.

If a web page has an image of a snow sled then it must be described appropriately using alt-text. There are many ways to describe the image of a sled.

A sled: A sled
Exam­ple 1a
BAD alt­-text=

Exam­ple 1b
BAD alt­-text=

Exam­ple 1c
GOOD or BAD alt­-text=

Exam­ple 1d
GOOD or BAD alt­-text=
"The sled called 'Rose­bud'"
The sled called 'Rosebud'
Exam­ple 1e
GOOD or BAD alt­-text=
"Win­ter Ac­tiv­ities"

Winter Activities

Example 1a — One way is to call it "image".

Example 1b — Another way is to call the image by its computer file name "xyz2002.jpg".

Both of these descriptions are inadequate and would fail a human-compliance check for accessibility, but using an online automated evaluator might pass them (because there is something between the quotes of the alt-attribute). It would pass any description at all. Only a person can identify whether the alternative text describes the image or the purpose of the image appropriately. What is appropriate depends on the purpose for the image — the reason it is used.

Example 1c — When the image is simply decorative you can use a blank description (put nothing between the quote marks of the alt-attribute). This will inform screen readers that the image isn't important. For instance, if you are just sprinkling random winter-related images on a page about "Winter fun".

Example 1d — If the content on the webpage refers to a particular image then it should be described. The description must focus on what is important about the image in the context of the web page. In this example, we'll pretend the image illustrates a famous scene from the movie 'Citizen Kane' so the alt-text, "The sled called 'Rosebud'", is appropriate because the main character had named his sled 'Rosebud'. That same alt-text would be meaningless or confusing if the page was about sleds in general.

Example 1e — Finally, if the image is used as a graphical link and replaces a text-link, then the purpose or destination of the link is the appropriate alternative text. In this example, the sled is used as a link button to a web page called Winter Activities so that would be the alternative text. But that same alt-text would be "bad" if you were referring to the sled "Rosebud" from the movie "Citizen Kane".

Extreme Example #2 Colours and Backgrounds

Example of a web page designed with very poor colour choices, low contrast, and a highly distracting background.

The CEO of an organization has given you a colour scheme of a dark red and brown psychedelic background with white and light reds, yellows and oranges for the text of the new website. You know that it breaks the accessibility and usability guidelines that relate to colour contrast and perceivability, but ignoring high-level management suggestions can be foolhardy. However, if you can point to the requirement for websites in the Integrated Accessibility Standards Regulation and the principle of perceivable, then you may be able to resolve the issue in favour of accessibility.

This point is so important it bears repeating. An automated validation check will not identify whether or not the alternative text is appropriate. Only a person who understands the purpose and relationship of the image to the page can supply the appropriate text.