Making The Web Accessible
Leading the Web to its full potential.
This talk is available online:
W3C and WAI
Principles of accessible design
Quick Tips, Guidelines and more
Fix this! - a sample site
Resources to get started
I. Why Accessibility?
People: Doors opened by the Web
Web is fastest-adopted technology in history
Displacing traditional sources of information and interaction
Web is becoming a key resource for:
news, information, commerce
classroom education, distance learning
job searching, workplace interaction
People: Access for all
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
1999. People: Barriers to Access
Many users may be operating in contexts very different from your own:
They may not be able to see, hear, move, or may not be able to process
some types of information easily or at all.
They may have difficulty reading or comprehending text.
They may not have or be able to use a keyboard or mouse.
They may not speak or understand fluently the language in which content
is written or spoken.
Design: Functional Requirements
Similar functional requirements for able-bodied users in other
Eyes-busy/Hands-busy environment: voice output
Noisy/Silent environment: captioning.
Low bandwidth: alternatives to images, video, etc.
Voice browsing: voice input/output
They may have a text-only screen, a small screen, or a slow Internet
Mobile access: limited screen area, screen magnifier
Design: Device Independence
Device-independent design is accessible/universal design.
Separate structure from presentation and reach mobile devices, Web-TV,
kiosks, search engines, etc.
Different learning styles; low literacy levels; second-language
Easier site maintenance (e.g., style sheets shared, caching).
Design: Graceful Transformation
A number of devices - mobile telephone, braille/speaking device, palm-top,
car radio, all giving the Content "XYZ" in different formats.
Charles McCathieNevile, Wendy Chisholm, 1999. Market
10-20% of the population in most countries have disabilities. Some
affect Web access.
Temporary disabilities: RSI, holiday accidents
Aging populations (lower vision, hearing, mobility).
Lots of mobile access users to come!
Disability Discrimination Act
It is illegal to discriminate against somone becuase they have a
Maguire v. SOCOG
Complex case, result was $20 000 awarded to complainant
II. W3C and WAI
World Wide Web Consortium (
W3C hosts the Web Accessibility Initiative (
partnership of industry, disability organizations, access research
US, European and Canadian governments, IBM/Lotus, Microsoft, Bell
Atlantic What WAI does
Review W3C specifications for accessibility
Evaluation and Repair Tools
Education and outreach:
Quick Tips, Movie,
... III. Principles of Accessible Design
Principles that appear in all three Guidelines:
Device independence (input and output)
Alternative equivalent and Metadata
Context, Orientation, and Notification
Techniques are implementation suggestions, issues, and language-specific
Standards and conventions:
Allow assistive technologies access
Interoperability promotes accessibility
Validate or Crash-and-Burn: Don't ignore important information
(ecommerce, contracts, medical decisions).
Credible design: Well-written pages build confidence in content.
Innovate new functionalities, but use standard channels since people and
tools rely on them.
IV. Quick Tips, Guidelines and more
WAI produces a range of materials
"Technical standards". The Guidelines
Discussion papers on specific technologies - CSS, SMIL, ...
Quick Tips, flyers, Curriculum ...
started, Policy reference, ...
Images & animations.
alt attribute to describe the function of each visual.
Use client-side Image maps.
and text for hotspots.
Provide captioning and transcripts
of audio, and descriptions of video. Multimedia.
Use text that makes sense
when read out of context. For example, avoid "click here." Hypertext links.
Use headings, lists, and
consistent structure. Use Page organization. CSS for layout and style where
Summarize or use the
Graphs & charts.
alternative content in case active features are inaccessible or
unsupported. Scripts, applets, & plug-ins.
Make line by line reading sensible.
Validate. Use tools,
checklist, and guidelines at Check your work. http://www.w3.org/TR/WAI-WEBCONTENT. Web Content Accessibility Guidelines
WCAG 1.0 Has a companion
document. Explains to Web site designers how to make accessible Web sites
Foundation for Authoring Tool & User Agent Accessibility
Has 14 guidelines, 60+ checkpoints
Priority/conformance model re-used in ATAG & UAAG
Comprehensive document, but with simplified
WCAG - hit and myth
Techniques document in current development
Modularised by technology (HTML, SVG, SMIL, etc)
Updating according to deployment
Browser support increasing
Guidelines will also evolve
Generalise for wider range of use - XML, Graphics, etc
Increase the amount of information in Techniques document
Using the same process - collaboration of industry, users, expert
WCAG hit and myth
Web Content Guidelines are not...
Requiring text only
Prohibiting colourful, media-rich pages
Written solely for english in the USA
Based on what is easy. (They
are based on what is
necessary.) Authoring Tool Accessibility Guidelines
All tools for Web Content - images, HTML, database systems, word
Both: generation of accessible content
accessibility of the environment. Same Priority, Guidelines, Checkpoints, organization as Web Content
Companion Techniques document with examples, references, etc
Evaluations of Authoring software
February 2000 The Authoring Tool Guidelines
Support all accessibility features of W3C recommendations
Generate standard markup
Make sure that no accessibility content is missing
Provide Methods of checking and correcting inaccessible content
Integrate accessibility solutions into the overall "look and feel"
Promote accessibility in help and documentation
Make the Tool Accessible
Authoring Tools - building the future
Working with developers
Have begun evaluating tools
Building tools, templates, techniques
New version in development "Wombat"
User Agent Accessibility Guidelines
Emphasis for version 1.0 on common graphic browsers, HTML
Some focus on mobile devices, multimedia players, ...
Same Priority, Guidelines, Checkpoints, and Techniques organization
Accessible UI, control over style
Orientation and access to document structure
Visibility of accessibility information and controls
Compatibility with assistive technology
V. What does Accessibility look like?
SMIL supports captions, audio descriptions:
Caption text: SVG - semantics for structure
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
One of those cool swiveling monitor stands that sit under the
A very fancy monitor
A desktop computer - broad flat box style
A built-in disc drive
Fix this - making a site accessible
While fictional, this page accurately illustrates common practices.
Fix 1: Ensure Scripts are accessible
Content must not rely on scripts to provide information.
Use markup instead of scripts when possible.
Don't prevent access through browser-sniffing.
Make other scripts accessible:
<img src="blood.gif" alt="earn miles - donate blood"></a>
"miles" target="_blank" onfocus="highlight()"
onmouseover="highlight()"><img src="blood.gif" alt="earn miles - donate blood"></a>
Related Checkpoints: WCAG
example Fix 2: Provide equivalent alternatives
Since text can be rendered visually, as speech, or as braille it helps many
In HTML, provide short functional equivalent text with the "alt"
Provide content for applets:
<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
example Fix 3: Make frames accessible
To provide navigation alternatives, assign titles to frames and add a
title="Table of Contents"
<P><a href="a"><img src="vnav.gif" border=0 usemap="#map" alt="Navigation Bar..."></a>
Related checkpoint: WCAG
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" bgcolor="#8e0851" text="white" link="3fa" vlink="5f5"
Don't forget images!
Related Checkpoint: WCAG
example Fix 5: Use meaningful link text
To provide information about link targets to users who surf link text only,
Coping With Asthma's Relentless
Attacks:<A HREF="a">Click Here</A>
Coping With Asthma's Relentless Attacks</A>
Related checkpoint: WCAG
example Fix 6: Add structure
To convey a logical model other than visually, use markup correctly. For
<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
example Fix 7: Use style sheets
Use CSS instead of background image as color
Replace text in images with real text.
Use a style sheet instead of
FONT element / inline
Related checkpoints: WCAG
3.1, 3.3, UAAG 4.17 A much more accessible version
VI. Resources to Get Started
Ensure that your Web sites are accessible
Promote your commitment to accessibility
Partner with W3C/WAI in promoting awareness
Demand tools that support accessibility
Tips and other accessibility information Participate in development of guidelines
Protocols and Formats
Working Group Questions and discussion
W3C presentations are archived online at