Recently I judged the accessibility component of the Australian Web Awards. Time and time again I saw the same errors when it came to ALT attributes. Success Criterion 1.1.1 – the ALT attribute requirement – is a complicated success criterion.
Missing versus empty ALT attributes
Images must always have an ALT attribute. Don’t believe me? Then read When Not to Use an ALT Attribute and see if I can convince you.
ALT attributes are not TITLE attributes
TITLE attributes provide information on mouse hover. This is their purpose. The purpose of an ALT attribute is not to provide information on mouse hover – even though the ALT attribute does sometimes appear this way in certain browsers (such as Internet Explorer). The purpose of the ALT attribute is to provide an alternative, textual description of the image, for use by people who cannot access or see the image. So if you have some information that you want to appear to the user when hovering over an image, use the TITLE attribute, and keep the ALT attribute for describing the image.
Problems with ALT attributes
Also remember that ALT attributes (and TITLE attributes) are not available to keyboard users – therefore you should never put anything in an ALT attribute that isn’t conveyed by the image. That means no author or attribution text, dates or copyright information (unless it is displayed in the image itself).
Another issue occurs when people are browsing with images turned off. In Firefox, the ALT attribute is constricted to the size of the actual image – so if you have a 10 by 10 pixel GIF then it will be almost impossible to read the ALT attribute. In Internet Explorer the entire ALT attribute displays, but does not wrap, so can cause horizontal scrolling. In fact there has been an accessibility bug raised about this on Allybugs, and if you are interested you can co-sign the petition.
Writing ALT attributes
ALT attributes can be difficult to write. It is important to describe the function of the image, not the actual image itself (with one major exception: image galleries, which I will cover in another article). The context of an image will always inform what you should write in the ALT attribute. For example, an image of the world might have several different images, depending on its context within a site:
- On a Greenpeace website it might say “Save our world”
- On a travel website it might say “International travel”
- On a University website it might say “We have campuses around the world”
- On an auction website it might say “World globe approximately 30 cm in diameter, made of plastic and fully inflatable”
How long can ALT attributes be?
There are no hard and fast rules about the length of ALT attributes. The Working Group considered adding a 100 character maximum to the ALT attribute technique, but decided against it in WCAG2. While it might not be in the WCAG2 Techniques, it is a good rule to follow.
Next article I will be talking about specific ALT attribute requirements for images such as art, graphs, maps, links and images of text.
Using Python to Parse Spreadsheet Data
By Shaumik Daityari,
Working with large web apps often involves creating and parsing spreadsheets. Learn how to handle and parse these files using Python.
A Comparison of Ruby Version Managers for macOS
By Daniel Kehoe,
If you're a serious Ruby developer, you'll need an up-to-date version, possibly several. We cover the best Ruby version managers for macOS.
A Guide to Git Interactive Rebase, with Practical Examples
By Tobias Günther,
Even if you're a Git pro, there might be more Git tricks to discover. Learn about interactive rebase, one of Git's most powerful tools.
Gian Wild has been working in accessibility since 1998. She worked on the very first Australian accessible web site and was the accessibility consultant for the Melbourne 2006 Commonwealth Games. For six years she was actively involved in the W3C Web Content Accessibility Guidelines Working Group. Gian Wild is the Director of AccessibilityOz.