Five Golden Rules of Alt-Text
Alt-text is for everyone!
Alt-text is a vital ingredient in making the web accessible but too many people don't realise how important it is, or produce tags that are unhelpful. Images without alt-text are a real obstacle for people using screen readers to browse the web, but every site needs to have well-described images. For example many people don't use images when browsing on their phone so rely on Alt-text to know when to download something or what to click on.
As AbilityNet’s Stefan Sollinger explains in this webinar, you don’t need a high level of technical understanding 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 Content Management System.
That's why we've come up with five golden rules for compliant and accessible alt-text:
The Five Golden Rules of Alt-Text
- 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 alt-text
Stefan recommends a number of tools to help assess website compliance on page. They help you understand the value of alt-text and discover how well your site performs against the legal requirements of accessibility.
There are several toolbars which can be installed so that you can view the underlying code of any page as you browse it:
- Web Developer Toolbar for Firefox - http://chrispederick.com/work/web-developer/firefox/
- WAVE Toolbar - http://wave.webaim.org/toolbar/
- Web Accessibility Toolbar works in Internet Explorer - http://www.paciellogroup.com/resources/wat
Or there’s Wave from Webaim that can check any individual page - just visit the site and drop in the address of the page you want to check:
Find out more
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:
And don't forget to subscribe to our webinar news to find out about forthcoming events.
Golden rules for alt text - AbilityNet webinar slides via SlideShare