The Alt Text Attribute and Accessibility
Alternative text is a very important part of a webpage, but this is often overlooked by web developers, who neglect it because it can be difficult to implement. Additionally, badly written or misused alt text can be equally damaging. And this comes at a cost to the accessibility of the website, and indeed general usability and even search engine optimisation. When it comes to providing accessible and useful alternative text to images on your website, there are 2 points you need to consider:
- Whilst every image should have an alt text attribute, only non-presentational images should have a populated alt text attribute;
- The alt text should provide equivalent information to the image.
Should every image have an alt text attribute? Of course. In fact, your html won’t validate without it. It’s basic web standards. Basically, alt=”” is a required attribute for every image in a webpage. However, not every text alt attribute needs to be populated. In fact, doing that could actually be counter productive to your accessibility. If you have an image in your document that is just presentational, then you shouldn’t give it alt text. This is because it has no real content value, and assistive technologies will need to waste time, and resources, without enhancing the experience for the user. If an image is for presentational purposes it should probably only be included through CSS (an argument for another day, I suppose), and the last thing a user would want is to have to endure a long list of descriptions (or content equivalents for items that have no content...) while attempting to go through the real content of the site.
With regards to the actual content of the alt text, I’ve seen it written a hundred times that this should describe what the image is. This can, however, be anti-accessibilty also. For example, let’s say you have a pie chart image with visitor statistics for your website. In your alt text, you’ve gone along with idea that describing the image is best. So you write alt=“Pie chart showing website user statistics.” If a screen reader user was to view this page, the alt text would be of no use to them whatsoever. They’d know there was a pie chart, but they have been prevented from obtaining any of the information held within. Yet the website will pass html validation, and any automated accessibility check.
The correct procedure here, of course, would be to use the alt or longdesc attribute to provide a text equivalent of the pie chart. In the example above, this would be something like alt=”Website visitor sources : Search Engines 34 visits, 54.84%; Direct Traffic 18 visits, 29.03%; Referring Sites 10 visits, 16.13%“ As well as being good for accessibility, it’s also good from an SEO perspective: instead of packing the alt text with keywords, the alt text contains real, relevant content and will be assessed by search engines as such.
Another point to consider is that if an image is performing a function, such as form submission or a link, the alt text of the image should mirror the action performed by the image. To paraphrase an example from the book “Web Accessibility: Web Standards and Regulatory Compliance”, if you have an image of a magnifying glass acting as a search button, consider which alt text would be more useful:
- “Picture of a blue magnifying glass, click here to search the site”; or
- “Search”
The second one is clearly preferable, because it is concise and so allows the user to immediately recognise the function of the image, as opposed to having to sit through “descriptive” text before finding out what it is there for.
By distinguishing between your presentational and content images, and by extracting the real text content portrayed by images on your site, you can ensure that your alt text is useful and improve the accessibility of your website.
Your Comments
There are no comments for this post.