Accessibility in a Web 2.0 World

1
Accessibility in aWeb 2.0 World
(get a straw)

• Shawn Henry, W3C WAI

2
Topics

• Components
• ATAG
• WCAG 2.0
• Dynamic applications
• Scripting, AJAX, RIA (rich Internet applications)
• Handouts
• Expanded version
• Additional URIs

3
You ?

• W3C WAI ?
• WCAG 1.0 ?
• WCAG 2.0 ?
• ATAG ?
• Screen readers ?
• AJAX ?

Heard of
Know fairly well
4
Want to know about

• Whats accessibility all about ?
• WCAG 2.0 ?
• Scripting, AJAX ?

5
W3C WAI

• World Wide Web Consortium (W3C)
• International
• Develops Web standards (HTML, CSS, )
• Web Accessibility Initiative (WAI)
• Develops Web accessibility guidelines,internation
  al standards
• www.w3.org/WAI/

6
Components of Web Accessibility
Web Content(WCAG)
User Agent(UAAG)
Authoring Tool(ATAG)
7
www.w3.org/WAI/intro/components
Web Content(WCAG)
UserAgent(UAAG)
Authoring Tool(ATAG)
8
Weak ComponentsCause Accessibility Barriers
9
The Powerful Impact ofHigh Quality Components
10
Authoring Tools Support
11
ACTION !

• Actively encourage improvements in authoring
  tools
• WAI resources
• Authoring Tool Accessibility Guidelines (ATAG)
• Selecting and Using Authoring Tools for Web
  Accessibility

12
ACTION !

• Actively encourage improvements in authoring
  tools
• WAI resources
• Authoring Tool Accessibility Guidelines (ATAG)
  www.w3.org/WAI/intro/atag
• Selecting and Using Authoring Tools for Web
  Accessibility www.w3.org/WAI/impl/software

13
Whats 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

14

• WCAG 1.0
• Guidelines
• CheckpointsPriority 1, 2, 3

• WCAG 2.0
• Principles
• Guidelines
• Success CriteriaLevel 1, 2, 3

15
Principles

• Perceivable
• Operable
• Understandable
• Robust

16
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 51
  Level 2
• 1.4.3 Text or diagrams, and their background,
  have a luminosity contrast ratio of at least 101
  Level 3

Level 2
17
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

18
WCAG 2.0 Supporting Documents

• Overview of WCAG 2.0 Documents www.w3.org/WAI/intr
  o/wcag20
• Read this first
• Provides foundation
• Updated with changes
• Links to Frequently Asked Questions (FAQ), W3C
  Process
• Techniques for WCAG 2.0 WD
• WCAG 2.0 Quick Reference WD
• Customizable
• Success Criteria
• Sufficient Techniques

19
WCAG 2.0 Supporting Documents

• Understanding WCAG 2.0 WD
• Intent of the success criterion
• Key terms
• Techniques
• Common failures
• Examples
• Benefits, how it helps people with disabilities
• Coming
• How to make accessible tables, forms,
• UI

20
When?

• Public Working Drafts
• Last Call Working Draft
• Candidate Recommendation
• Implementations
• Proposed Recommendation
• W3C RecommendationWeb Standard

21
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

22
Transitioning

• Most sites that conform to WCAG 1.0 should not
  require significant changes
• Accessibility issues basically the same
• Different approach takes some time to learn
• 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

23
Baseline in WCAG 2.0

1. Heard of
2. Tried to understand

24
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)

25
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

26
Questions ?

• Components
• ATAG
• WCAG 2.0
• Baseline
• Dynamic applications
• Scripting, AJAX, RIA
• (coming upadditional slidessince handout)

27
Topics

• Components
• ATAG
• WCAG 2.0
• Baseline
• Dynamic applications
• Scripting, AJAX, RIA
• (coming up additional slides since handout)

28
Scripting, AJAX, RIA

• Good news with WCAG 2 !
• Baseline

29
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.0Client-side Scripting
  Techniques

30
AJAX

• Accessibility
• Usability general, for all
• User doesnt know updates will happen auto
• User doesnt notice updates
• User cant find updated info
• Unexpected change in focus
• Back button breaks
• Cant bookmark

31
Demo WCAG 2.0 Quick Reference
32
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 youve got that
  built, you can then apply JavaScript
• progressive enhancement is how we should all
  be building our web apps Jeremy Keith

33
AJAX

• Accessibility
• Usability general, for all
• User doesnt know updates will happen auto
• User doesnt notice updates
• User cant find updated info
• Unexpected change in focus
• Back button breaks
• Cant bookmark

34
Straw Activity

• Some people have a very small field of vision --
  called tunnel vision. Imagine using a complex
  Web page like this

35
(No Transcript)
36
Screen Magnification
37
AJAX

• Accessibility
• User doesnt know updates will happen auto
• User doesnt notice updates
• User cant find updated info
• Unexpected change in focus cant read page
• Back button breaks
• Cant bookmark

38
AJAX

• Accessibility
• User doesnt know updates will happen auto
• User doesnt notice updates
• User cant find updated info
• Unexpected change in focus cant read page

39
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)

40
More Whaddyado for Now

• ltHxgt and proper markup
• Provide navigation to changes
• ExampleThe DOM and Screen Readers(Juicystudio)
  Errors from Form Validation DISCLAIMER not
  endorse, others too,

41
Whaddyado for Later

• ARIA Suite for Accessible Rich Internet Appsfrom
  W3C WAI Protocols Formats WG
• Some implementations already

42
Accessibility for Dynamic Applications

• Create desktop-style widgets for Webe.g., tree
  control
• Keyboard nav (w/o excessive Tab)(benefit
  keyboard power users)
• Notification of updates

43
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

44
Dynamic Applications

• 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
• www.w3.org/WAI/ Highlights

45
Example
46
And so

• WCAG 2.O
• Better for developers
• Better accessibility
• Dynamic Applications
• Be a showcase Get attention, get help

47
More

• Tomorrow 200Accessibility Better, Faster,
  Cheaper
• Responsibilities
• Business Case
• Black, White, Gray
• Collaborators with Disabilities
• Demos
• Understanding Web Accessibilitybook
  chapterwww.uiaccess.com/understanding.html