Web Accessibility Present and Future
Leading the Web to its full potential
- About W3C and WAI
- The Web Content Guidelines
- Accessibility in the future
Charles McCathieNevile - charles@w3.org
This presentation: http://www.w3.org/2000/Talks/1220-roma
The Web - Better for everyone?
What is the World Wide Web Consortium?
- World Wide Web Consortium (W3C)
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
- Coordinates translations of our publications
- Ensures that our specifications are useful throughout the world
The Web Accessibility Initiative at W3C
- W3C hosts the Web Accessibility Initiative (WAI)
- One of four administrative divisions (domains) of W3C
- representatives of industry, government, users and researchers
- WAI has some additional sponsors
- American (US, Canada) and European (EU) governments
- Industry sponsors - Bell Atlantic, IBM, Microsoft and
others
How do we work?
- Working groups operate under the process of W3C
- WAI includes a high proportion of invited experts
- The work is done via
- Email lists (mostly public)
- Telephone meetings (weekly or fortnightly)
- Physical meetings (2 or 3 per year)
What does WAI do?
- Ensure the accessibility of W3C's work
- Create guidelines for accessibility
- Develop tools to improve accessibility now
- Conduct education and outreach
1. Ensure the accessibility of our work
WAI works with other groups in W3C on the accessibility of their
specifications:
- HTML 4.0, CSS2:
- Seperating the information's structure and content from its
presentation
- SMIL, SVG
- XLink, XHTML, DOM, Schemas, and others
- Improving the accessibility of XML
2. Create Guidelines for Accessibility
We Work on More Guidelines
- User Agent Accessibility
Guidelines
- How to make accessible user agents (browsers, plugins, ...)
- Accessibility of the software and communication with assistive
technology
- Finished "Last Call". Hopefully published as a Recommendation early
2001
- XML Accessibility Guidelines
- How to create XML languages that support accessibility.
3. Coordinate Accessibility Tools
Coordinate research and development of tools to facilitate accessibility.
- Evaluation of the accessibility of content
- Repair tools
- Tools to improve or repair the accessibility of content: rdfpic,
aprompt
- Conversion tools
4. Conduct Education and Outreach Activities
Education & Outreach Working Group coordinates:
- Promotional materials, brochures, films, ...
- Simplified and education material (e.g. Quick Tips, Curriculum)
- Outreach campaigns and presentations
- Tracking policies and laws
Quick Tips
Now available in over 15 Languages, including Italian:
- Immagini ed animazioni.
Utilizzare l'attributo alt per descrivere la funzione di ogni
elemento grafico.
- Immagini cliccabili.
Utilizzare l'elemento MAP e descrivere le zone attive.
- Multimedia. Fornire
sottotitoli e trascrizioni per l'audio, e descrizione di
filmati.
- Link ipertestuali.
Utilizzare enunciati che conservino il loro senso al di fuori del
contesto. Per esempio, evitare «cliccare qui».
- Organizzazione.
Utilizzare titoli, liste e una struttura coerente. Utilizzare CSS
per l'impaginazione.
- Figure e diagrammi.
Descriverli all'interno della pagina o utilizzare l'attributo
longdesc.
- Script, applet e plug-in.
Fornire una pagina alternativa quando tali funzionalitá sono inaccessibili
o non supportati.
- Cornici (frames).
Utilizzare NOFRAMES e titoli sigificativi.
- Tabelle. Facilitare la
lettura linea per linea. Riassumere.
- Verificare il lavoro.
Validare. Utilizzare gli strumenti, la lista di controllo e le linee guida
di: www.w3.org/TR/WCAG.
End of Part One
General Questions on W3C and WAI?
Part Two - Web Content Guidelines
History
- Various guidelines developed by organizations and individuals
- Incorporation of these ideas into guidelines by Trace Centre
- Trace guidelines were submitted to the W3C.
- Working group established in late 1997
- Public drafts: review from individuals and organizations
- Guidelines approved as a W3C Recommendation May 1999
Structure of 1.0 Guidelines
- Guidelines, checkpoints and techniques
- Guidelines: general statements of access
requirements
- Checkpoints: more concrete and specific
requirements
- Each checkpoint assigned one of three priority levels
- Conformance defined by priority levels of checkpoints
- Techniques: how to apply checkpoints (e.g. in
HTML)
- Techniques document was recently updated
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):
- Illustrate with images
- Validate!!
- Make large groups of links "skippable"
The Inaccessible example
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:
<a href="javascript:popout('miles')" onmouseover="highlight()">
<img src="blood.gif" alt="earn miles - donate blood"></a>
Becomes
<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" >
<NOFRAMES>
<BODY>
<P><a href="a"><img src="vnav.gif" border=0 usemap="#map" alt="Navigation Bar..."></a>
...
</BODY>
</NOFRAMES>
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
becomes
body background="bg.gif" bgcolor="#8e0851" text="white" link="3fa" vlink="5f5"
Remember:
- Don't forget images!
- A background might be the same as a user's default foreground.
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">
becomes:
<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
- Use CSS instead of background image as color
- Replace text in images with real text.
- Use a style sheet instead of
FONT element / inline
styles
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
- Works in any browser
- Doesn't need images, colour, scripts
- Is structured
- Easier to maintain
End of Part Two
Questions on Web Content Accessibility Guidelines?
Part 3 - Accessibility in the future
- Web Content Accessibility Guidelines 2.0
- XML Guidelines
- How SMIL and SVG use them
- How metadata and the semantic web help
Why work on WCAG 2.0?
- Increasing use of XML formats on the Web
- Broad range of skills and perspectives required
- Define requirements in a more abstract manner
- More specific techniques for various technologies
- Different audiences will be familiar with different areas
Glimpse of current work
- Drafts internal (but available to the public)
- Development of 2.0 guidelines at an early stage
- 2.0 requirements will be based on the 1.0 document
- Comparison of cheeckpoints between 1.0 and 2.0 available
Outline of Requirements
6 guidelines in the current draft of version 2.0
- Text equivalents: content for varied modalities
- Separation of content and structure from presentation
- Designing for ease of comprehension
- Designing for ease of browsing and navigation
- Support for multiple input methods (keyboards, voice...)
- Compatibility with browsers and adaptive technologies
Summary of XML Guidelines
Similar to Web Content Accessibility Guidelines
to create XML languages that are accessible
- Rich alternatives for content
- Structure and meaning in markup
- Presentation support
- Device Independence
- User Control
- Use existing standards
What is SMIL?
- A language for synchronised presentations
- Describes synchronisation for parts of a presentation
- Images
- Captions
- Video (and more)
- Version 1.0 is a W3C Recommendation (1998)
- Version 2.0 in "Last Call" - the group thinks it has finished.
Example: "car"
What is SVG?
- Scalable Vector Graphics
- An XML language for images
- Does many of the same things as Flash, but accessibly
- Uses CSS for the style of a presentation
An example of SVG
Comparison
| Bitmap Version |
SVG Version |
 |
|
After magnification...
The bitmap version
And with SVG...
Text in SVG: Structure
Alternatives in SVG
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
Network:
An example of a computer network based on a hub
With these components
- Hub
- 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 -->
<switch>
<textstream src="carcaps.rt"
region="textregion" system-captions="on"/>
</switch>
Sign language captions...
Descriptions of video (SMIL 2.0)
<!-- Audio Descriptions -->
<audio src="card.au" systemAudioDesc="on"
systemOverdubOrSubtitle="overdub"/>
<!-- Text Descriptions -->
<textstream src="cardc.rt" systemAudioDesc="on"
systemCaptions="on"/>
Control of the language (SVG and SMIL)
<!-- AUDIO -->
<switch>
<audio src="carnen.rm" systemLanguage="en"/>
<audio src="carnde.rm" systemLanguage="de"/>
<audio src="carnen.rm"/>
</switch>
Accessible Animations
SMIL 2.0 and SVG provide a way to create accessible animations.
HIT ME!
There are examples in the Note
"Accessibility features of SVG".
Metadata...
What is it?
- Information that can be read by a computer
- So it is very very simple
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
More with metadata
Using RDF in SVG - the cup is on top of
the table
- there is a text-only SVG browser!
is perhaps an image of the idea:
surprise
Using metadata to assess, or find accessibility
Summary of XML Guidelines
Similar to Web Content...
- Rich alternatives for content
- Structure and meaning in markup
- Presentation support
- Device Independence
- User Control
- Use existing standards
Resources
Thank You!
All W3C presentations are on the Web:
http://www.w3.org/Talks
Questions?