Making The Web Accessible

W3CWeb Accessibility Initiative      

Leading the Web to its full potential.

Charles McCathieNevile --

This talk is available online:

Single Page version


I. Why Accessibility?

  1. People
  2. Design
  3. Market
  4. Law

People: Doors opened by the Web

People: Access for all


The image being described:

A cartoon made on a computer. Under a banner proclaiming "edemocracy?" a person in a wheelchair (I can't tell if I meant a man or woman, but I guess it isn't important for the cartoon) looks at some steps. At the top of the stairs is a computer, with the screen showing a red and a green button under the word "VOTE!"

Picture by Charles McCathieNevile, 1999.

People: Barriers to Access

Many users may be operating in contexts very different from your own:

Design: Functional Requirements

Similar functional requirements for able-bodied users in other environments:

Design: Device Independence

Design: Graceful Transformation


The image being described:

A number of devices - mobile telephone, braille/speaking device, palm-top, car radio, all giving the Content "XYZ" in different formats.

Picture by Charles McCathieNevile, Wendy Chisholm, 1999.



Refer to WAI Policies Reference list.

Disability Discrimination Act
It is illegal to discriminate against somone becuase they have a disability
Maguire v. SOCOG
Complex case, result was $20 000 awarded to complainant

II. W3C and WAI

What WAI does

  1. Accessibility Guidelines:
  2. Review W3C specifications for accessibility
  3. Evaluation and Repair Tools
  4. Education and outreach: Quick Tips, Movie, ...

III. Principles of Accessible Design

Principles that appear in all three Guidelines:

Techniques are implementation suggestions, issues, and language-specific details

Standards and conventions:

IV. Quick Tips, Guidelines and more

WAI produces a range of materials

W3C Recommendations
"Technical standards". The Guidelines
Reference Notes
Discussion papers on specific technologies - CSS, SMIL, ...
Education materials
Quick Tips, flyers, Curriculum ...
Education resources
Getting started, Policy reference, ...

The Quick Tips

Web Content Accessibility Guidelines

W3C REC logo

WCAG - hit and myth

WCAG hit and myth

Web Content Guidelines are not...

Authoring Tool Accessibility Guidelines

The Authoring Tool Guidelines

  1. Support all accessibility features of W3C recommendations
  2. Generate standard markup
  3. Make sure that no accessibility content is missing
  4. Provide Methods of checking and correcting inaccessible content
  5. Integrate accessibility solutions into the overall "look and feel"
  6. Promote accessibility in help and documentation
  7. Make the Tool Accessible

Authoring Tools - building the future

User Agent Accessibility Guidelines

V. What does Accessibility look like?

SMIL supports captions, audio descriptions:

Video showing a shrinking car a   Caption text:  Larger image of the caption tex

SVG - semantics for structure

Network with two computers conn

Rendering the network image
The graphic components Additional structure semantics
Network An example of a computer network based on a hub
Hub A typical 10baseT/100BaseTX network hub
Computer A A common desktop PC
Computer B A common desktop PC
Cable A 10BaseT twisted pair cable
Cable B 10BaseT twisted pair cable
Cable N 10BaseT twisted pair cable
Cable A connects 
Computer A and the Hub 

Cable B connects 
Computer B and the Hub 

Cable N connects 
Hub to external Network

And user control of presentation

A common desktop PC Monitor stand One of those cool swiveling monitor stands that sit under the monitor Monitor A very fancy monitor The computer A desktop computer - broad flat box style disc drive A built-in disc drive Computer

Fix this - making a site accessible

While fictional, this page accurately illustrates common practices.

Fix 1: Ensure Scripts are accessible

Make other scripts accessible:

   <a href="javascript:popout('miles')" onmouseover="highlight()">
         <img src="blood.gif" alt="earn miles - donate blood"></a>


   <a href="miles" target="_blank" onfocus="highlight()"
      onmouseover="highlight()"><img src="blood.gif" alt="earn miles - donate blood"></a>

Related Checkpoints: WCAG 6.3, 6.4, UAAG 9.1

Improved example

Fix 2: Provide equivalent alternatives

Since text can be rendered visually, as speech, or as braille it helps many users.

In HTML, provide short functional equivalent text with the "alt" attribute:

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

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

Provide content for applets:

   <applet code="Lake.class">
     <param name="image" content="lh.gif">
     <img src="lh.gif" alt="Latest News">

Provide long descriptions for complex content (charts, graphs, etc.)

Related Checkpoints: WCAG 1.1, 6.3 ATAG 3.1, 3.3, 3.5

Improved example

Fix 3: Make frames accessible

To provide navigation alternatives, assign titles to frames and add a "noframes" alternative:

   <FRAME ... name="TOC"
              title="Table of Contents" >
   <FRAME ... name="Home"
              title="Home Page" >
      <P><a href="a"><img src="vnav.gif" border=0 usemap="#map" alt="Navigation Bar..."></a>

Related checkpoint: WCAG 12.1

Improved example

Fix 4: Specify colours appropriately

Specify all colours for a colour scheme. If only a background is given it might be the same as user-specified defaults for a foreground.

Ensure specified colours have sufficient contrast to be read.

  body background=bg.gif


  body background="bg.gif" bgcolor="#8e0851" text="white" link="3fa" vlink="5f5"

Don't forget images!

Related Checkpoint: WCAG 2.2

Improved example

Fix 5: Use meaningful link text

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

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


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

Related checkpoint: WCAG 13.1

Improved example

Fix 6: Add structure

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

  <B>9 May 1999</B> <IMG src="l1.gif">


  <H1>9 May 1999 
      <IMG src="l1.gif" alt="Latest News"></H1>

Related checkpoints: WCAG 3.5, 3.6, ATAG 3.2

Improved example

Fix 7: Use style sheets

Related checkpoints: WCAG 3.1, 3.3, UAAG 4.17

A much more accessible version

VI. Resources to Get Started

Get Involved!

Questions and discussion

W3C presentations are archived online at