5 Web Accessibility Tips For The Humble ALT Tag
Posted by admin, 1 Year, 2 Months, 1 Week, 3 Days, 13 Hours ago
I recently attended a couple of Web Accessibility seminars and thought I would share my experiences. Before the seminars, my exposure to ALT text in terms of web accessibility was nothing more than "always have alt texts on images". However, after attending the seminars I now have had my eyes opened to the world of accessible web design - and I must say, it's a bit daunting.
There is quite simply SO much to take into account if you want to make your site 100% accessible, however, there are definitely some quick and easy things you can do to take steps towards your site conforming to at least the WCAG Priority 1.0 Guidelines. The first of these steps is to ensure you use the ALT texts in a correct manner.
The following tips are 5 of the most important things to keep in mind about the humble ALT text:
1. Decorative Images Should Have Blank ALT Tags
As I mentioned, simply having alt text on every image isn't enough. To understand why this is you must understand how and why ALT texts are used. One of main reasons we have alt text is for screen readers to be able to provide a verbalize an image on the page to a vision-impaired web user.
However, the tip I learned is that you don't always want to put text in the alt text! If an image is used for purely decorative purposes. you should use an empty alt attribute.
For example:
... <img src="/images/swirls.jpg" alt="" /> ...
If we have a website about dogs for example, and we have some decorative images of dogs along the right hand side of the page then we need to ask ourselves - do visually-impaired people need to know those images are there? Or are they purely decorative? It takes time to read out the alt texts of an image with a screen reader - so do we want to be wasting the user's time in telling them there are pretty pictures of a dog running in a park?
Note: The preferred way of displaying decorative images would be to use the CSS background-image selector which will mean the image is not shown when stylesheets are turned off, and not announced to a screen reader user at all.
2. Don't Put 'Image of ...' in ALT Texts
Another thing to keep in mind is not to put unnecessary text in the alt texts:
For example:
<img src="/images/georgewbush.jpg" alt="Image of George W. Bush" />
Most screen readers will announce the item as an image anyway - so the above example will be read out as "Image - Image of George W. Bush" which once again means the screen reader user is forced to hear duplication of information.
As a result, avoid using thing such as 'image of...' or 'the following is an image of ...' in any alt text.
3. Keep ALT Texts Concise
This is fairly logical and follows on from the second point - we want to keep ALT texts concise as possible.
4. ALT Texts For Images Containing Text Should Be The Exact Words
Firstly, avoid using images for text as much as possible.
BUT, if you must do it - make sure the alt text of the image is the direct equivalent of the text found in the image.
5. Images That Are Links Should Have ALT Texts Representing The Link Destination
For active images that link to other pages, the ALT text should indicate the link's destination or function. Also, avoid writing ALT text using the words 'link to...':
For example:
<img src="/images/whitehouselink.gif" alt="link to whitehouse webpage" />
Instead, you should use the following:
<img src="/images/whitehouselink.gif" alt="whitehouse webpage" />
There you have it - for more information about ALT text, you might want to check out the following links:
* Guidelines on ALT texts and IMG elements
* Mini FAQ about the alternative text on images
Comments (0)
no comments
