Alt And Beyond Making Web Graphics Accessible
Posted on 25 Oct 2002
by Tim Roberts (wiseguysonly)
Rated 3.8 (Ratings: 13)
- More articles in IA/Usability
Alt and beyond: Making web graphics accessible
Many developers still view graphics and accessibility as being on opposingends of the web development scale. The truth is that including graphics in your documents does not mean your page has to be any less accessible. In fact, as we will see later in this article, graphics can be used to enhance the accessibility of a page. There are, however, a few key techniques that you can employ to ensure that you don't have to construct alternative "Text-Only" documents. The web truly is the last frontier where we can treat all people equally with "one size fits all" web documents. There is just a little bit extra we need to do to achieve this.
What's the alternative?
A key technique in producing accessible graphics in your web documents is utilizingthe alt attribute. For every image that appears on your site you should include the alt attribute with no exception. Shortly, we will see how easy it is to root out missing alt attributes and also why we should take care in crafting alternative representations of our site graphics. Firstly though, lets find out what the alt attribute does.
Employing an alt attribute in your image tag is this simple:
By now, I am hoping you are sold on using alt attributes for every image onyour site. If you are, the first thing you will want to do is root out all the missing tags around your site. Using Watchfire's Bobby this is an easy task. Just punch in your URL and scan the resulting report for Priority 1 errors. This is where you will be able to find out exactly how many instances of missing alt attributes are on your site, and where you will find them. Now we have a list of offenders and we can deal with them accordingly.
Telling it like it is
Of course, you can just enter empty alt attributes and Bobby would not findany errors. But that would achieve nothing in reality other than wasting your own time. If you don't use the alt attribute correctly you may as well not use it at all.
The first rule of alternative text is to make it coherent with the image. Thebiggest misuse of alt is to put a snappy caption or joke reference that doesn't necessarily have any reference to the image it is associated with. Don't do it. An alt attribute is the only way someone without a graphical browser can make sense of an image, so you shouldn't waste it. Be straight to the point, but most of all "represent".
Look at these two tags for images:
<img src="logo.gif" alt="logo" />
<img src="logo.gif" alt="WiseGuysMedia: accessibility consultations">
The first one is better than nothing, but the second one is so much better.It tells you a great deal more about what my logo is and the text also looks good at the head of every page in a text only browser.
The importance of alternative representations is clear when they are used fornavigation buttons. Without a textual representation, non-graphical browsers will not be able to tell the user anything about the link other than the full URL of where it points to. The user will not be able to get around your site and hence won't be hanging round for long. If you use individual images for image maps as navigation then you should also ensure that you don't just give an alt attribute to the main image. You need to add alt attribute to the "hotspots" in the map also like this:
Another thing to watch out for with alt attributes is images that appear sideby side. Look at this code:
<img src="cat" alt="my cats head">
<img src="dog" alt="my dog eating">
For a text only browser, and screen reader the out put would be along theselines.
"my dog eating my cats head"
Besides landing you in trouble with animal rights activists, it can also bevery confusing. When you are rendering images side by side, end each alt attribute with a simple full stop to put everything in context.
Above, I stated that every image should have an alt attribute. This includesspacers and images that do not convey any meaning whatsoever. This is one occasion when you can leave the value of the alt attribute empty:
<img src="spacer" alt=" " />. The reason for doing this is that every time a text only browser or screen reader or text-only browser comes across an image, it will render the filename if no alt attribute is present. This can be very annoying and also confusing. So for images that really have no purpose other than decoration, an empty alt attribute will render nothing. This is much better than listening to the file name of every decorative image on your site. Naturally, the CSS / XHTML puritans amongst us will tell you that you should be using CSS for positioning and decoration as opposed the older methods of spacer images - they have a point.
If a picture paints a thousand words...
Before you run off and start plastering your site with alt attributes, justremember that a good rule of thumb with them is to be concise and to the point. Some pictures require more than several words to describe them and this is where we need to go beyond the alt attribute.
Consider this scenario. I have a picture of my favorite piece of art. To renderit textually I could put this:
<img src="art.gif" alt="My favorite piece of art"
OK, it does have an alt attribute, but it doesn't really tell you much. Onthe other hand, I could always do this:
It works, sure, but it makes my (X)HTMLbulky and maybe my site user doesn't want to listen to or read all of that description. There is a solution. It's another attribute we can connect to image tags when the image requires a longer description. It is imaginatively titled the
longdescattribute. The beauty of this attribute is that you can still use and alt attribute along side a long description attribute that references a separate more detailed textual representation of the image. You do it like this:
long description available" longdesc="medusa.html" />
<img src="art.gif" alt ="My favorite piece of art:
All I need to do now is create a separate html document with a longer descriptionof my image called "medusa.html".
A caveat, as always
Whatever standards we have at our disposal, it is the browsers and user-agentsthat give us real world constraints. With
longdesc, this is still a question of support. Newer assistive technologies can handle the longdesc attribute, but many browsers still don't support it. At the National Center for Accessible Media, a technique that has become widely recognized has been developed to overcome this problem. The technique is to place a link to the long description around an uppercase [D] directly below the associated image. Whilst this is not a standard, it is widely recognized amongst the disabled community. The output would look something like this below the image: [D] with the link pointing to your long description document. You can also use a title on the link such as
title="This links to a longer description of the image above"to give the user another clue.
Accessible Graphics revisited
So far we have concentrated on supplying alternative text for graphics, butwe can also use guidelines that help us make graphics more accessible for browsers that can render them. There are many circumstances where users with disabilities can see your graphics, but care must still be taken to ensure they do not impede their ability to use your web documents.
Although we can alternatively represent it, try to limit the amount of textyou include in your graphics. Some low vision users view web documents through screen magnifiers. When the text in graphics is zoomed in, it can appear very distorted of blurred. If you are going to use text in graphics, the following guidelines can help make them more accessible:
- Make fonts sizes as large as possible.
- Use simpler block fonts and avoid anti-aliasing if possible.
- Use good color contrast between the text and background.
For users with dyslexia or other learning difficulties, graphics can be boththe best and the worst of the web. Complex instructions can be represented by graphics that would be much simpler for a user with a learning difficulty to comprehend. Examples include technical data or guides to completing a web payment process. However, very bright or animated graphics can easily distract a dyslexic user from content on your site and make it difficult for them to concentrate. Section 508 advises that images should not flicker between 2 and 55 times per second. That is basically one major change per second.
Developing accessible web sites should not be about sacrificing your designand graphics. Ensuring that every image is represented alternatively and correctly is far more important than removing it from your site. A little care and attention to the actual design of your graphics can also assist not only users with disabilities, but also every user of your web documents,