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: <img

src="logo.gif" alt="logo" />. What this actually

does is to provide a textual representation of your graphic for users who do

not have graphical browsers. Such users include blind and low vision people

whose screen readers will audibly render the value of the alt attribute or text

only browsers such as lynx that will render the alt text only. This technique

is not only of benefit to users with disabilities. Mobile Internet devices are

becoming increasingly popular, and many still don't render graphics but can

deal with alt attributes.

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:

<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 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:

</p><img src="navigation.gif" alt="Navigation." usemap="#Map" /> </p><p><map name="Map"></p> <area shape="rect" coords="95,4,138,25" href="#" alt="contact" /></p> <area shape="rect" coords="51,4,94,25" href="#" alt="about" /></p> <area shape="rect" coords="7,4,50,25" href="#" alt="home" /></p></map></p>

Another thing to watch out for with alt attributes is images that appear side

by side. Look at this code:

<img src="dog" alt="my dog eating">


<img src="cat" alt="my cats head">

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: <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, 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:

<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. On

the other hand, I could always do this:

</p><img src="medusa.gif" </p>alt="My favourite piece of art, The Raft of the Medusa. </p>It depicts the helpless passengers and crew of the French ship Medusa.</p>The large canvas (16 by 23 feet) with its twisting figures in desperate </p>hope at the sighting of a rescue ship" /></p>

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:

<img src="art.gif" alt ="My favorite piece of art:

long description available" longdesc="medusa.html" />

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,