WAI: Make a site accessible!

Web Accessibility Initiative

Demonstration of applying some simple WAI guidelines.


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>
  <LI>Coping With Asthma's Relentless ...

instead of:

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

Related checkpoints: 3.5, 3.6

Fix 5: Use style sheets

Related checkpoints: 3.1, 3.3

A much more accessible version