- PowerPoint PPT Presentation

About This Presentation
Title:

Description:

ALT is an HTML attribute of img tag. It is one of the two required attributes of an img tag. ... ALT='Marian Rivera wears a sexy pink dress during FHM fashion night. ... – PowerPoint PPT presentation

Number of Views:676
Avg rating:3.0/5.0
Slides: 34
Provided by: Lap563
Category:
Tags: fhm

less

Transcript and Presenter's Notes

Title:


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
Write a Comment
User Comments (0)
About PowerShow.com