Alt and beyond: Making web graphics accessible.

Alt and beyond: Making web graphics accessible

Many developers still view graphics and accessibility as being on opposing ends 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 utilizing the 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 on your 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 find any 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. The biggest 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:

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 for navigation 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 side by side. Look at this code:

For a text only browser, and screen reader the out put would be along these lines.

"my dog eating my cats head"

Besides landing you in trouble with animal rights activists, it can also be very 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 includes spacers and images that do not convey any meaning whatsoever. This is one occasion when you can leave the value of the alt attribute empty:

If a picture paints a thousand words...

Before you run off and start plastering your site with alt attributes, just remember 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 render it textually I could put this:

OK, it does have an alt attribute, but it doesn't really tell you much. On the other hand, I could always do this:

It works, sure, but it makes my (X)HTML bulky 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 longdesc attribute. 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:

All I need to do now is create a separate html document with a longer description of my image called "medusa.html".

A caveat, as always

Whatever standards we have at our disposal, it is the browsers and user-agents that 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, but we 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 text you 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 both the 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 design and 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,