One of the most common problems our testers come across in relation to images on websites. Incorrect or missing alt-text can cause serious issues for users of screen readers, such as blind and partially sighted people, as well as presenting issues of legal compliance for websites that fail to use alt-text correctly.
As AbilityNet’s Stefan Sollinger explained in our March Accessibility webinar, one of the frustrating things is that people don’t need have to have a high level of technical understanding in order to produce effective alt-text. It should be easy for everyone who produces content for the web to produce useful alt-text, whether they are coding by hand in html or using a basic Content Management System. The problem is that too many people don't realise how important it is, or produce tags that are unhelpful.
Stefan, Senior Accessibility and Usability Consultant at AbilityNet, has come up with five golden rules to help ensure that their alt-text is compliant and accessible.
- Rule 1: Every <img> must have an alt= attribute
- Rule 2: Describe the information, not the picture
- Rule 3: Active images require descriptive alt-text
- Rule 4: Images that contain information require descriptive alt-text
- Rule 5: Decorative images should have empty alt-text
The rules provide an excellent framework through which to understand and implement fully accessible, and legally compliant, alt-text practices.
Checking your tags
In order to understand where you’re going wrong, it can be helpful to look at your pages as an AbilityNet tester would. Steffan recommends a number of tools to help assess website compliance on page.
If you’re browsing using Firefox, there are a couple of great tools available:
- Web Developer Toolbar - http://chrispederick.com/work/web-developer/firefox/
- WAVE Toolbar - http://wave.webaim.org/toolbar/
The Paceiello Group’s accessibility toolbar can be used in Internet Explorer:
- Web Accessibility Toolbar - http://www.paciellogroup.com/resources/wat
Or there’s Wave, which can be used in any web browser:
Use these tools to check your site and see how well your alt-text has been implemented.
As well as providing a framework, the rules also raise some questions, which Stefan explained in the webinar.
For example one of our webinar attendees wanted to know to what degree alt-text is relevant for captioned images. As with so much related to alt-text, the answer is deceptively simple - if all of the information is contained in the caption, no alt-text is necessary, so the field should read alt=“”.
If you want to understand more about compliant alt-text you can:
- View the full video recording of the webinar aon Vimeo and hear Stefan explain the rules in more detail. Please note this video has not been captioned yet - please contact us if you need to be sent details in another format.
- You can also read about Stefan’s Golden Rules in more detail.
- Or view the webinar slideshow on Slideshare.