DE 4105 - WAI



Appendix/Deliverable 2.2 - Part of WP02

Accessibility Demonstration module
Copy of Web slides





Daniel Dardailler




Telematics Applications Programme




Accessibility Demonstration module

In order to demonstrate the effect of accessible design on Web sites, an online demonstration was designed and implemented by WAI-DE participants.

The demo features a common frame-based Web site layout. This was initially a real Web site fetched off the Web in its inaccessible state, but text was changed to respect privacy. A simulation of browsing using an assistive technology browser (text-only) such as Lynx is then performed and then the demo goes in a tutorial mode on how to repair the site. The same site is then presented in its accessible form with and without Lynx.

This example is of great value as a simple tutorial and our past presentations using it have shown that the audience is very receptive of the problems of accessibility one they've observed the issues themselves.

This deliverable is a slide module for a short (20mn) presentation demonstrating the making of an accessible site starting from an inaccessible one.

The online version of this demo is available at:

and a copy of the slide text is provided here.

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