“How to Write a Good ALT Text”

1. “How to Write a Good ALT Text” By Jojo I. Esposa Jr. Manila Christian Computer Institute for the Deaf (MCCID) & Philippine Web Accessibility Group (PWAG)

2. What is an ALT Text? ALT is an HTML attribute of img tag. It is one of the two required attributes of an img tag. The other one is src. Ex: <img src=“smily.gif” alt=“smily icon” />

3. Do we need to put ALT text? Did you know that ALT attribute is the most important accessibility feature and easiest to follow yet it’s also the most ignored one? ALT text is useful for: • Blind and visually impaired people using a Screen Reader • Browsers that don’t support images (Lynx). • Search engines to determine the content of the image from page context alone.

4. International Web Design Standards

5. How do I write a good ALT text? K.I.S.S. (KEEP IT SHORT AND SIMPLE) - A maximum of 80 characters is allowed.

6. Example: Which is better? • ALT =“Democrat Presidential Nominee Barack Obama smiles as he waves using the I-Love-You hand sign to the thousands of supporters gathered at the Florida State campaign trail. His running mate Joe Biden claps his hands beside Obama.” • ALT=“Obama signs I-LOVE-YOU to the crowd.”

7. How do I write a good ALT text? 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?

8. Example: Which is better? Juan Luna’s Spolarium • ALT =“Award winning painting of Juan Luna” • ALT=“A classic Luna’s painting demonstrating the use of light and color to create composition.” • ALT =“Luna’s painting depicts two dead gladiators being dragged to a horrible disposal as crowd look on in helpless horror.”

9. How do I write a good ALT text? (cont.) BE IMAGINATIVE - There are no hard and fast rules. It’s your imagination that rules.

10. Example: Which is better? • ALT =“President Arroyo talks to the crowd.” • ALT=“Speaking before businessmen, President Arroyo emphasizes the need for charter change.” • ALT =“President Arroyo looks at the crowd while pointing both fingers up in the air.”

11. How do I write a good ALT text? (cont.) 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.

12. Example: Which is better? • ALT =“This is a photo of Marian Rivera.” • ALT=“Marian Rivera dress sexy pink smile.” • ALT =“Sexy photo of Marian Rivera” • ALT=“Marian Rivera wears a sexy pink dress during FHM fashion night.”

13. How do I write a good ALT text? (cont.) ALT text is NOT TITLE tag - Most often, ALT text is confused with TITLE attribute. Thanks to 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.

14. Example: Which is better? • ALT =“Mcdonalds Trademark Logo” • ALT=“Mcdonalds Arch logo with I’m lovin’ it slogan” • ALT =“Mcdonalds” • ALT=“Home” (if used as a linked image)

15. How do I write a good ALT text? (cont.) Describe the FUNCTION, not the CONTENT - ALT text must describe what the image does, not what it contains.

16. Example: Which is better? • ALT =“Shop IBM” • ALT=“Abstract shopping cart to the left of the words shop IBM on a blue background”

17. Now, 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.

18. Example: Arrow bullets don’t need ALT texts. Decorative images don’t need ALT texts.

19. What if? (cont.) 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. What we can do is simply sum up all the highlights of the specific chart. 

20. Example: Sample ALT Text: ALT=“Pie chart shows low vision gets the biggest share followed by partial blindness.”

21. What if? (cont.) 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.

22. Example: Use the exact text. ALT=“Subscribe Now” ALT=“Mail” ALT=“Get Widget” ALT=“Search the Journal”

23. What if? (cont.) 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.”>

24. Example: You could code the image map hot spots correctly by setting the alt-text to the text that actually appears in the image. <area coords="..." alt="Calendar" href="r/a1" /><area coords="..." alt="Messenger" href="r/p1" /><area coords="..." alt="Check Email" href="r/m1" /><area coords="..." alt="What's new" href="r/wn" /><area coords="..." alt="Personalize" href="r/i1" /><area coords="..." alt="Help" href="r/hw" />

25. What if? (cont.) 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“ />

26. Example: <IMG SRC=”ciitmap.gif” LONGDESC=”mapciit.htm” ALT=”Conference Venue Map“ />

27. Practice Time … Practice Time … Practice Time Assign an ALT text for the following images:

28. 1.

29. 2.

30. 3.

31. 4.

32. 5.

33. Maraming salamat po! “Ang Web Accessibility ay hindi lamang para sa mga may kapansanan. Ito ay para rin sa ating lahat na nagpapasalamat dahil nakamit natin ang kaalaman ng walang anumang hadlang.” www.pwag.org