Alt Text
Problem
- Images, photos, and graphics are unusable by screen reading programs unless they are assigned alternative text.
Examples
Incorrect code
<img src="graph-1.jpg" alt="Percentage of primary school students studying Languages, 2007–13" >
Correct code
<img src="graph-1.jpg" alt="Percentage of primary school students studying Languages, 2007–13. The percentage of primary school students studying Languages has dropped from 73.6% in 2007 to 55.5% in 2012 and then increased again to 62.6% in 2013.">
Incorrect code
<img src="graph.jpg" alt="Graph showing primary school language programs" >
Correct code
<img src="graph.jpg" alt="Figure 3.1. Percentage of primary schools providing Languages programs, by year level, 2007–13. Higher year levels appear to provide more Languages programs. Each calendar year the percentage of schools has dropped with the lowest point in 2012 (averaged around 50%), which increased again to an approximated average of 60% in 2013.">
WCAG Success Criteria
WCAG Sufficient Techniques
- G94: Providing short text alternative for non-text content that serves the same purpose and presents the same information as the non-text content
- G95: Providing short text alternatives that provide a brief description of the non-text content
Testing Method
- Install the WAVE toolbar for Firefox
- Open Firefox
- On the WAVE toolbar, click on 'Errors, Features, and Alerts'
- This will perform a quick accessibility check of the page. Problems are highlighted in red. Things needing manual checking are shown as a question mark.
- Are there any images missing alt text?
- Tip: Click on 'Reset Page' to remove the errors and alerts
- Tip: If the an error is being reported but there is no red flag, try clicking on 'Disable Styles'
- Tip: Try making changes to the code with Firebug and then retesting the page
Practical Exercise
- Look at the images on this prospective students page.
- What alternative text would you use to describe them?
- What alternative text did they use?