WAI: Make a site accessible!

Demonstration of applying some simple WAI guidelines.

Presentation

Take an existing frame-based inaccessible Web site
Change some text to respect privacy/copyright
Show how browsing works for lynx users
Fix it
Show again how it work one accessible.

Make this page accessible!

While fictional, this page accurately illustrates common practices.

Fix 1: Provide text equivalents for visuals

Important! Provide text since can be rendered visually, as speech, or as braille. Helps almost all groups of users.

Provide short equivalent text with the "alt" attribute:

   <IMG ... alt="Navigation Bar..." >
   <IMG ... alt="Advertising Information" >

   <AREA ... alt="More Articles" >
   <AREA ... alt="Health Topics" >

   <IMG src="yhd.gif" alt="Buy Your Health" >
   <IMG ... alt="Latest News" >

Related checkpoint: 1.1

Fix 2: Make frames accessible

To provide navigation alternatives, assign titles to frames:

   <FRAME ... name="TOC"
              title="Table of Contents" >
   <FRAME ... name="Home"
              title="Home Page" >

Related checkpoint: 12.1

Fix 3: Use meaningful link text

To provide information about link targets to users who surf link text only, write:

  <A href="a">
    Coping With Asthma's Relentless Attacks</A>

instead of:

  Coping With Asthma's Relentless 
  Attacks:<A HREF="a">Click Here</A>

Related checkpoint: 13.1

Fix 4: Add structure

To convey a logical model other than visually, use markup correctly. For example, write:

  <H1>9 May 1999 
      <IMG src="l1.gif" alt="Latest News"></H1>
  
  <UL>
  <LI>Coping With Asthma's Relentless ...

instead of:

  <B>9 May 1999</B> <IMG src="l1.gif">
  <BR>
  <P><LI>Coping With Asthma's Relentless Attacks: ...

Related checkpoints: 3.5, 3.6

Fix 5: Use style sheets

Use CSS instead of background image as color
Replace text in images with real text.
Use style sheets instead of FONT element.

Related checkpoints: 3.1, 3.3

A much more accessible version

Resources

WAI home page: http://www.w3.org/WAI
WAi Web Content Accessibility Guidelines 1.0: http://www.w3.org/TR/WAI-WEBCONTENT/.