Accessibility Tips
Techniques for improving web site accessibility.
Alt Text
Problem
- Images, photos, and graphics are unusable by screen reading programs unless they are assigned alternative text.
Sample
Incorrect code
<img src="students.jpg">Correct code
<img src="students.jpg" alt="students discussing an assignment">
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
Examples
- Images on this page are missing alt text and thus is unable to be read by a screen reader
- Images on this page have some alt text but it doesn't adequately describe the nature of the image
Practice Exercise
- Use the WAVE toolbar to identify the missing alt text on this page
Help
For assistance please contact Andrew Normand, Web Accessibility Program Leader
Email: anormand@unimelb.edu.au
Phone: +61 3 9035 4867