Web Accessibility Present and Future

Web Accessibility Initiative      

Leading the Web to its full potential

  1. About W3C and WAI
  2. The Web Content Guidelines
  3. Accessibility in the future

Charles McCathieNevile - charles@w3.org

This presentation: http://www.w3.org/2000/Talks/1220-roma

The Web - Better for everyone?


The image being described:

A cartoon I made. Somone in a wheelchair is at the bottom of the stairs. At the top of the stairs is a computer, showing a red and a green button and the word "VOTE!". A banner on the image proclaims "democracy"

Picture by Charles McCathieNevile, 1999.

What is the World Wide Web Consortium?

What do we do at W3C?

About 65 members of the team (employed by W3C) work with around 50 groups

The groups are employees of member organisations, and invited experts..

They create and publish the standards of the Web (HTML, XML, etc)

The official language of W3C is English. The Internationalisation activity

The Web Accessibility Initiative at W3C

How do we work?

What does WAI do?

  1. Ensure the accessibility of W3C's work
  2. Create guidelines for accessibility
  3. Develop tools to improve accessibility now
  4. Conduct education and outreach

1. Ensure the accessibility of our work

WAI works with other groups in W3C on the accessibility of their specifications:

2. Create Guidelines for Accessibility

We Work on More Guidelines

3. Coordinate Accessibility Tools

Coordinate research and development of tools to facilitate accessibility.

4. Conduct Education and Outreach Activities

Education & Outreach Working Group coordinates:

Quick Tips

Now available in over 15 Languages, including Italian:

End of Part One

General Questions on W3C and WAI?

Part Two - Web Content Guidelines


Structure of 1.0 Guidelines

Example of a Guideline

@@2 - don't use colour alone

Applying the Guidelines

7 steps to fix common errors in an example page.

Some other possible steps (not shown in this example set):

The Inaccessible example

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">   </applet>

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.

Ensure colours have enough contrast to be read.

  body background=bg.gif


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


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> 

instead of:

  <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: WCAG3.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

Accessible version [compare to the Inaccessible version]

Same look, but

End of Part Two

Questions on Web Content Accessibility Guidelines?

Part 3 - Accessibility in the future

Why work on WCAG 2.0?

Glimpse of current work

Outline of Requirements

6 guidelines in the current draft of version 2.0

  1. Text equivalents: content for varied modalities
  2. Separation of content and structure from presentation
  3. Designing for ease of comprehension
  4. Designing for ease of browsing and navigation
  5. Support for multiple input methods (keyboards, voice...)
  6. Compatibility with browsers and adaptive technologies

Summary of XML Guidelines

Similar to Web Content Accessibility Guidelines

to create XML languages that are accessible

  1. Rich alternatives for content
  2. Structure and meaning in markup
  3. Presentation support
  4. Device Independence
  5. User Control
  6. Use existing standards

What is SMIL?

Example: "car"

What is SVG?

An example of SVG

Bitmap Version SVG Version
a small bit map image... looks like a small vector image

After magnification...

The bitmap version

Traditional bitmap images do not magnify well...

And with SVG...

but vector images are much clearer

Text in SVG: Structure

HTML inside SVG

It is possible to use HTML or another XML language within SVG to provide text with all the features (links, structure, etc) of that language.

Alternatives in SVG

The whole network

with CSS can be...

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

and we can do better with XSLT


An example of a computer network based on a hub

With these components

A typical 10baseT/100BaseTX network hub
Computer A and Computer B
Common desktop PC
Cable A, Cable B and Cable N
10BaseT twisted pair cable

Captions (SMIL 1.0 and 2.0)

<!-- CAPTIONS --> 
    <textstream src="carcaps.rt"
      region="textregion" system-captions="on"/> 

Sign language captions...

Descriptions of video (SMIL 2.0)

<!-- Audio Descriptions -->
 <audio src="card.au" systemAudioDesc="on"

<!-- Text Descriptions -->
 <textstream src="cardc.rt" systemAudioDesc="on"

Control of the language (SVG and SMIL)

<!-- AUDIO -->
    <audio src="carnen.rm" systemLanguage="en"/> 
    <audio src="carnde.rm" systemLanguage="de"/> 
    <audio src="carnen.rm"/> 

Accessible Animations

SMIL 2.0 and SVG provide a way to create accessible animations.


There are examples in the Note "Accessibility features of SVG".


What is it?

old technology: PICS

level is 0, health is 9, colour is 27

Works easily in major browsers (often used for rating porn...)

I want more than 3 smiles, and colours 12 or 14??

RDF - (a bit) more power


is the

something else

More with metadata

Using RDF in SVG - the cup is on top of the table

- there is a text-only SVG browser!

Surprise A cartoon of an open-mouthed face

is perhaps an image of the idea: surprise

Using metadata to assess, or find accessibility

Summary of XML Guidelines

Similar to Web Content...

  1. Rich alternatives for content
  2. Structure and meaning in markup
  3. Presentation support
  4. Device Independence
  5. User Control
  6. Use existing standards


Thank You!

All W3C presentations are on the Web: http://www.w3.org/Talks