Accessibility in aWeb 2.0 World

Shawn Henry, W3C WAI

(get a stra

w)

Topics

ComponentsATAG

WCAG 2.0

Dynamic applicationsScripting, AJAX, RIA (rich Internet applications)

Handouts:Expanded version

Additional URIs

You ?

W3C WAI ?

WCAG 1.0 ?

WCAG 2.0 ?

ATAG ?

Screen readers ?

AJAX ?

Heard ofKnowfairlywell

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

User Agent(UAAG)

Authoring Tool(ATAG)

Web Content(WCAG)

Weak ComponentsCause 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 TwoApplies to more advanced Web

technologies

More precisely testable (still need human)

Adaptable for situations (Baseline)

Extensive supporting materials, practical implementation

WCAG 1.0

Guidelines

CheckpointsPriority 1, 2, 3

WCAG 2.0 Principles

Guidelines

Success CriteriaLevel 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]

[Level 2]

WCAG 2.0 Supporting DocumentsOverview 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 RecommendationImplementations

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, WhyFlexibility for different situations today

Flexibility over time

For example, SVG (Scalable Vector Graphics)

WCAG Working Group is refining(expect some changes)

BaselineList 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 withoutThat 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 allUser 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?

ApproachDISCLAIMER: 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 allUser 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

AccessibilityUser 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 Appsfrom W3C WAI Protocols & Formats WG

Some implementations already

Accessibility for Dynamic ApplicationsCreate 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.OBetter for developers

Better accessibility

Dynamic ApplicationsBe a showcase: Get attention, get help

More:

Tomorrow 2:00Accessibility: Better, Faster, CheaperResponsibilitiesBusiness CaseBlack, White, GrayCollaborators with DisabilitiesDemos

Understanding Web Accessibilitybook chapterwww.uiaccess.com/understanding.html