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

• 1.1.1 Non-text Content

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