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
• ltimg srcsmily.gif altsmily icon /gt

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 its also the most ignored one?
• ALT text is useful for
• Blind and visually impaired people using a Screen
  Reader
• Browsers that dont support images (Lynx).
• Search engines to determine the content of the
  image from page context alone.

4
International Web Design Standards
Web Content Accessibility Guideline Version 1.0 - 1999 (W3C WCAG - WAI) Section 508 of US Rehabilitation Act - 2000 (ADA - USA) Publicly Available Specifications - 2006 (PAS 78 - UK) Philippine Web Design Accessibility Recommen-dations - 2007 (PWDAR)
Priority 1 - 1.1 - Provide a text equivalent for every non-text element (e.g., via "alt", "longdesc", or in element content). (a) A text equivalent for every non-text element shall be provided (e.g., via "alt", "longdesc", or in element content). In full support of WCAG including WCAG 2.0 MS 1 - 3 - Attach ALTltaltgt (alternative) text to graphic images so that assistive computer technology such as screen readers can reach the content.
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.
• ALTObama 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 Lunas Spolarium

• ALT Award winning painting of Juan Luna
• ALTA classic Lunas painting demonstrating the
  use of light and color to create composition.
• ALT Lunas 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.)

1. BE IMAGINATIVE - There are no hard and fast
   rules. Its your imagination that rules.

10
Example Which is better?

• ALT President Arroyo talks to the crowd.
• ALTSpeaking 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.)

1. 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.
• ALTMarian Rivera dress sexy pink smile.
• ALT Sexy photo of Marian Rivera
• ALTMarian Rivera wears a sexy pink dress during
  FHM fashion night.

13
How do I write a good ALT text? (cont.)

1. 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
• ALTMcdonalds Arch logo with Im lovin it
  slogan
• ALT Mcdonalds
• ALTHome (if used as a linked image)

15
How do I write a good ALT text? (cont.)

1. 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
• ALTAbstract shopping cart to the left of the
  words shop IBM on a blue background

17
Now, what if?

• I USE DECORATIVE IMAGES?
• Im 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 dont need ALT texts.
Decorative images dont 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 ALTPie 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.
ALTSubscribe Now ALTMail
ALTGet Widget ALTSearch 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,
• ltIMG SRCimagemap.jpg ALT WIDTH200"
  HEIGHT300" BORDER0" USEMAPMapgtltMAP
  NAMEMapgtltAREA SHAPErect COORDS7,9,191,54"
  HREFmaps ALTSign our Guestbook
  here.gtltAREA SHAPErect COORDS7,68,191,114"
  HREFmaps ALTView our Guestbook here.gt

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. ltarea
coords"..." alt"Calendar" href"r/a1" /gtltarea
coords"..." alt"Messenger" href"r/p1" /gtltarea
coords"..." alt"Check Email" href"r/m1"
/gtltarea coords"..." alt"What's new"
href"r/wn" /gtltarea coords"..."
alt"Personalize" href"r/i1" /gtltarea
coords"..." alt"Help" href"r/hw" /gt
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,
• ltIMG SRCgraph1.gif LONGDESCgraph1.htm
  ALTIncome graph /gt

26
Example
ltIMG SRCciitmap.gif LONGDESCmapciit.htm
ALTConference Venue Map /gt
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