One if not the “a must” thing anyone learns in designing accessible websites is putting an ALT attribute on images. The Manila ICT Design Recommendations states that we need to “Attach ALT (alternative) text to graphic images so that assistive computer technology such as screen readers can reach the content”. After reading a few articles about web accessibility and from my own personal experience, I have compiled a list of ways in which we can write a good ALT text.
- KISS (KEEP IT SHORT AND SIMPLE) — Remember the famous clich “A picture is worth a thousand words”? Well, nobody can prevent you from typing a thousand words to describe your image. But I bet you won’t. Besides, it will not validate especially if you’re using XHTML. A maximum of 80 characters are only allowed.
- ALT is short for ALTERNATIVE — It means, if the image will not be displayed, the substitute will appear (or be heard of in case of screen readers). Will your ALT text replace what you actually see on the image?
- BE IMAGINATIVE — Let’s say you have a picture of a conference where Mr. Guest Speaker is talking on the microphone. You can’t just say “Mr. Guest Speaker is talking on the microphone.” That would be too drab and too common sense. A better way might be, “Mr. Guest Speaker talks about the importance of web accessibility among developers.” There are no hard and fast rules. It is your imagination that rules.
- ALT text is like CAPTION — Ever notice a photo in a newspaper where a text caption is written at the bottom? That is basically an example of an ALT text. It describes the content of the photo including the exact names of persons, where they are positioned and what they are doing.
- GRAMMAR PLEASE — Oh yes, good grammar can be applied here. Your ALT text will be easier to understand if your sentence has a sense. Also, avoid starting with “This is a picture of” or “Included here are the”. You will be saving a lot of characters if you go direct to the point.
- ALT text is NOT TITLE tag — Most often, ALT text is confused with TITLE attribute. Thanks to the mighty minds of Microsoft, Internet Explorer gets it wrong by displaying ALT text as tooltip that appears every time you place your mouse pointer on top of it. ALT text describes the image, not putting just a title on it.
Now, let’s discuss the limitations of ALT text. What if,
- I USE DECORATIVE IMAGES? — I’m happy to tell you that you are excused from putting ALT text on these images. Most sites put those nifty, cutesy and trendy images like spacer gifs to divide tables or separate objects, customized bullets for listings and floral patterns for corners. Ask yourself, “Do I need to tell others what it is?” Certainly not, but you cannot escape an error message from any HTML validators. What I would suggest is simply put an empty alt text (ALT=“ ”) or sometimes called a null text. Screen readers will never notice that it is there. Better yet, use Cascading Style Sheets to replace it.
- I USE CHARTS AND GRAPHS? — A bar graph or a pie chart tells of a certain figure or data is expressed in comparison with other data. Now this is difficult. What we can do is simply sum up all the highlights of the specific chart. If the graph is about the rise of Philippine Peso against the US Dollar in the past months, simply emphasize on the trend. You may try, “Line graph shows Peso increased by 0.05% average from March to October, 2006.”
- I USE TEXT AS IMAGE? — Images containing text are used when a designer wants to place a fancy or non-standard typeface. You can use this provided that supply an equivalent ALT text. The solution here is to make the ALT text the same as the image. This is particularly important when images are used for navigation elements that also act as links.
- I USE IMAGE MAPS? — Image maps are a group of images combined to form a single image. But specific parts of the image called hot spots can be clicked to go to a specified URL. We can place ALT text on every hot spot to describe it. For example,
<IMG SRC=”imagemap.jpg” ALT=”&” WIDTH=”200″ HEIGHT=”300″ BORDER=”0″ USEMAP=”#Map”>
<MAP NAME=”Map”>
<AREA SHAPE=”rect” COORDS=”7,9,191,54″ HREF=”#maps” ALT=”Sign our Guestbook here.”>
<AREA SHAPE=”rect” COORDS=”7,68,191,114″ HREF=”#maps” ALT=”View our Guestbook here.”> - I REALLY NEED TO DESCRIBE IN DETAIL? — Well, if it is really very important for you to explain the complete image, I suggest you use the longdesc attribute. It is an extra command that you can use to point to a URL of a full description of an image. Once the image is clicked, another web page opens. The downside of this is that you have to create a separate HTML file to put the explanation of the image. Here is an example,
<IMG SRC=”graph1.gif” LONGDESC=”graph1.htm” ALT=”Income graph">
So you see, writing ALT text is easy. But writing a good one takes a little more effort.
Share this:
