Transcript Accessibility

Accessibility in a
Web 2.0 World
Shawn Henry, W3C WAI
Topics

Components

ATAG

WCAG 2.0

Dynamic applications


Scripting, AJAX, RIA (rich Internet applications)
Handouts:

Expanded version

Additional URIs
You ?

W3C WAI ?

WCAG 1.0 ?

WCAG 2.0 ?

ATAG ?

Screen readers ?

AJAX ?
Heard of
Know
fairly
well
Want to know about:

What’s accessibility all about ?

WCAG 2.0 ?

Scripting, AJAX ?
W3C WAI


World Wide Web Consortium (W3C)

International

Develops Web standards (HTML, CSS, …)
Web Accessibility Initiative (WAI)


Develops Web accessibility guidelines,
international standards
www.w3.org/WAI/
Components of Web Accessibility
Web Content
(WCAG)
Authoring Tool
(ATAG)
User Agent
(UAAG)
Weak Components
Cause Accessibility Barriers
The Powerful Impact of
High Quality Components
ACTION !

Actively encourage
improvements in
authoring tools

WAI resources:
 Authoring
Tool Accessibility Guidelines
(ATAG)
 Selecting
and Using Authoring Tools
for Web Accessibility
What’s New with WCAG Two

Applies to more advanced Web technologies

More precisely testable (still need human)

Adaptable for situations (Baseline)

Extensive supporting materials,
practical implementation
WCAG 1.0

Guidelines

Checkpoints
Priority 1, 2, 3
WCAG 2.0

Principles

Guidelines

Success Criteria
Level 1, 2, 3
Principles

Perceivable

Operable

Understandable

Robust
Testable, Levels Example

WCAG 1.0 Checkpoint


2.2 Ensure that foreground and background color
combinations provide sufficient contrast when viewed
by someone having color deficits…
WCAG 2.0 Success Criteria

1.4.1 Text or diagrams, and their background, have a
luminosity contrast ratio of at least 5:1 [Level 2]

1.4.3 Text or diagrams, and their background, have a
luminosity contrast ratio of at least 10:1 [Level 3]
WCAG 2.0 Supporting Documents

Overview of WCAG 2.0 Documents

Techniques for WCAG 2.0 WD

WCAG 2.0 Quick Reference WD 

Understanding WCAG 2.0 WD

Coming
• How to make accessible tables, forms, …
• Quick Tips …
• UI
When?

Public Working Drafts
Last Call Working Draft

Candidate Recommendation

Implementations

Proposed Recommendation

W3C Recommendation=Web Standard
Transitioning

Most sites that conform to WCAG 1.0 should not
require significant changes

See WCAG 2 FAQ

Support:

"How WCAG 2.0 Drafts Differ from WCAG 1.0" section

Comparison of WCAG 1.0 Checkpoints to WCAG 2.0

Transitioning Web Sites

Transitioning Accessibility Policies
Baseline in WCAG 2.0
1. Heard of
2. Tried to understand
Understanding Baseline

First, Why

Flexibility for different situations today

Flexibility over time

For example, SVG (Scalable Vector Graphics)

WCAG Working Group is refining
(expect some changes)
Baseline

List of technologies

For example: HTML, CSS, etc...

That are accessible, that users have available

An established list of Web technologies
that an author can use to create
accessible Web content

Can use technologies outside of baseline, if
content is usable without

That is, used for enhancement
Topics
Components
ATAG
WCAG 2.0
Baseline

Dynamic applications
• Scripting, AJAX, RIA
(coming up: additional slides since handout)
Scripting, AJAX, RIA

Good news with WCAG 2 !

Baseline
Scripting Tips for Accessibility

Do automatic redirects on server side, instead of
client side

Device independence, e.g.,


onmouseover & onfocus

mousedown
& keydown

click
& keypress

mouseover
& focus

mouseout
& blur
Techniques for WCAG 2.0
“Client-side Scripting Techniques”
AJAX

Accessibility

Usability – general, for all

User doesn’t know updates will happen auto

User doesn’t notice updates

User can’t find updated info

Unexpected change in focus

Back button breaks

Can’t bookmark
Demo: WCAG 2.0 Quick Reference
AJAX Temperature Gauge

Not just cool, hot? Really useful to users?

Approach
DISCLAIMER: not endorse, others too, …
the hows and whys of degradable ajax
Progressive enhancement with Ajax

“first build your app using old-fashioned server-side
technology… once you’ve got that built, you can then
apply JavaScript…”

“progressive enhancement [is] how we should all be
building our web apps”
– Jeremy Keith
AJAX

Accessibility

Usability – general, for all

User doesn’t know updates will happen auto

User doesn’t notice updates

User can’t find updated info

Unexpected change in focus

Back button breaks

Can’t bookmark
Straw Activity

Some people have a very small field of
vision -- called “tunnel vision”. Imagine
using a complex Web page like this…
Screen Magnification
AJAX

Accessibility

User doesn’t know updates will happen auto

User doesn’t notice updates

User can’t find updated info

Unexpected change in focus – can’t read page

Back button breaks

Can’t bookmark
Whaddyado for Now

Explain interaction

Provide options (default least problematic!)

Manual update

Notifications (e.g., dialog box)

Draw attention (e.g., “yellow fade technique”)

Set focus

Avoid automatic focus change (usually)

…
More Whaddyado for Now

…

<Hx> and proper markup

Provide navigation to changes

Example:
The DOM and Screen Readers
(Juicystudio) Errors from Form Validation
DISCLAIMER: not endorse, others too,…
Whaddyado for Later

ARIA Suite for Accessible Rich Internet Apps
from W3C WAI Protocols & Formats WG

Some implementations already
Accessibility for Dynamic Applications

Create desktop-style widgets for Web
e.g., tree control

Keyboard nav (w/o excessive Tab)
(benefit keyboard “power” users)

Notification of updates
Dynamic Applications
• DISCLAIMER: not endorse, others too,…
AJAX Accessibility Overview, Becky Gibson, IBM
+ W3C Announces Roadmap for Accessible
Rich Internet Applications (WAI-ARIA) press
release
+ Call for Review: Accessible Rich Internet
Applications (WAI-ARIA) Working Drafts
e-mail
+ ARIA Overview (coming soon)
+ www.w3.org/WAI/ Highlights
And so


WCAG 2.O

Better for developers

Better accessibility
Dynamic Applications

Be a showcase: Get attention, get help
More:

Tomorrow 2:00
Accessibility: Better, Faster, Cheaper
Responsibilities
 Business Case
 Black, White, Gray
 Collaborators with Disabilities
 Demos


Understanding Web Accessibility
book chapter
www.uiaccess.com/understanding.html