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

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?