This document summarizes a presentation about improving web accessibility for disabled users. The presentation discusses best practices from Yahoo!, including the advantages of WAI-ARIA and inclusive design. It provides examples of how techniques like semantics, landmarks, ARIA roles, and live regions can make AJAX, web apps, and mobile interfaces more usable for disabled and all users. The goal is to design inclusively for human diversity from the start.

1. Next generation web accessibility:
Improvement of usability for disabled users
Creating a nice user experience for everyone
Artur Ortega
March 17, 2011
1

2. About the speaker: Artur Ortega
The difficulties which I meet with in order to realize my existence are
precisely what awaken and mobilize my activities, my capacities.
— Jose Ortega y Gasett
2

3. Abstract
This lecture provides best practices used
at Yahoo! for increasing the usability of
web pages for disabled users. The real
world examples will explain in detail the
advantages of WAI-ARIA and other
techniques used to improve overall
usability for everyone. Say goodbye to
“Only accessible” and say hello to
“Inclusive Design”!
3

4. Definition: Accessibility
Facilities & Transport
Consumer Goods
& IT
In the usual way
Information Sources
Without too
&
Available much hassle
Communication
Generally without any
Facilities
& Usable help
And other areas
of life
For disabled people
4

5. Definition: Usability
Product
Specific Specific
users With
goals
Effectiveness,
Efficiency & Satisfaction
In a specific context of use
Qualitative attribute assesses how easy user interfaces are to use
Source: ISO 9241
5

6. Definition: Universal Design
1. Equitable use
2. Flexibility in use
3. Simple and intuitive
4. Perceptible information
5. Tolerance for error
6. Low physical effort
7. Size and space for approach and use
Source: Connell, et al., 1997
6

7. Definition: Inclusive Design
Accessibility + Effectiveness,
Efficiency &
Satisfaction
Without too much hassle
7

8. Universal vs Inclusive Design
Inclusive Design
Adaptations &
Universal Design
Accommodations
Design for human diversity, social inclusion & equality
8

9. Real world examples
9

10. Example: Wheelchair Access
`
Photo by Alan (merrionsq), available under a Creative Photo by Leonardo Bonnani, available under a Creative
Commons Attribution-NonCommercial-NoDerivs licence Commons Attribution-NonCommercial-ShareAlike licence
10

11. Example: Closed Captions
Source: 'YouTube Captions and Subtitles',
http://www.youtube.com/watch?v=QRS8MkLhQmM
11

12. Challenges
12

13. Challenges: AJAX, web apps, mobile
 98.4% JavaScript enabled
 550% increase in mobile screen
reader usage in under two years
 Social media usage is largely
unchanged since October 2009
Source: WebAIM - Screen Reader User Survey
13

14. Inclusive Web Design
Effectiveness,
Without too Usability for
Efficiency &
much hassle disabled users
Satisfaction
Next generation of accessibility
14

15. Challenges of Inclusive Web
Design
Effectiveness,
Efficiency &
Satisfaction
Generally
In the
without any
usual way
help
15

16. A Retrospective: Static Content
Photo: Wayan Vota
16

17. Video: Static Page – Wikipedia
Source: http://www.wikipedia.org
17

18. Tackling the challenges
of Inclusive Web Design
In the usual way
AJAX Adding
Generally without
semantics
Web apps any help
& information Adaptations &
Mobile accommodations
18

19. Semantics & Information
Semantics Information
Mark-up Language information
ALT text
WAI-ARIA Long image descriptions
Microformats Subtitles / Closed captions
Audio description
Sign-language
Etc.
19

20. Semantic mark-up:
Some things never change
20

21. Video: Semantic mark-up
Source: http://developer.yahoo.com/yui/examples/tabview/frommarkup_clean.html
21

22. Microformats
Pros Cons
Easy access Breaking
to structured accessibility
information. because of mis-
use of elements
& attributes.
22

23. Mobile
Pros
Cons
Built-in
Few devices with
accessibility
accessibility built-in
Smart & handy
Expensive
Apps extend
Some apps lack
assistive
accessibility
functionality
23

24. Mobile
Compass
24

25. Mobile
Yahoo! Messenger
25

26. Mobile
Foursquare
26

27. AJAX
Pros Cons
Better usability New area of
Faster than accessibility
full-page reloads Needs more
Usage of open APIs knowledge, caution
and testing
27

28. AJAX
Facebook on the new Yahoo! homepage
28

29. WAI-ARIA
Accessible AJAX with WAI-ARIA
Adding missing semantics
to dynamic mark-up
29

30. WAI-ARIA: Page Navigation
without Landmarks
30

31. Video: Page navigation without
landmarks – Yahoo Sport
Source: http://uk.eurosport.yahoo.com/
31

32. WAI-ARIA: Page Navigation
with Landmarks
32

33. Video: Page navigation with landmarks
– Flickr
Source: http://www.flickr.com/groups/blind_photographers/pool/
33

34. WAI-ARIA landmarks: code
<body>
<div class="header" role="banner">
<div class="navigation" role="navigation">
</div>
</div>
<div class="section" role="main">
<h1>DIVs + ARIA Roles</h1>
<div class="article" role="article">
</div>
</div>
<div class="footer" role="contentinfo">
</div>
</body>
34

35. WAI-ARIA
35

36. General WAI-ARIA examples
 Menu
 Tabs
 Live Region
36

37. Menu without WAI-ARIA roles:
A Traditional AJAX Menu
37

38. Video: menu without WAI-ARIA roles
Source: http://developer.yahoo.com/yui/examples/menu/example08_clean.html
38

39. Menu with WAI-ARIA roles:
Modern AJAX Menu (NVDA)
39

40. Video: menu with WAI-ARIA roles
(NVDA)
Source: http://developer.yahoo.com/yui/examples/menu/menuwaiaria_source.html
40

41. Menu with WAI-ARIA roles:
Modern AJAX Menu (JAWS)
41

42. Video: Menu with WAI-ARIA roles
(JAWS)
Source: http://developer.yahoo.com/yui/examples/menu/menuwaiaria_source.html
42

43. WAI-ARIA roles: menu code
<div role="menubar">
<div role="menuitem" aria-haspopup="true"
id="fileMenu">File</div>
<div role="menu" aria-labelledby="fileMenu">
<div role="menuitem">Open</div>
<div role="menuitem">Save</div>
<div role="menuitem">Save as ...</div>
...
</div>
</div>
43

44. Tabs without WAI-ARIA roles:
Traditional AJAX Tabs
44

45. Video: Tabs without WAI-ARIA roles
Source: http://es.eurosport.yahoo.com/
45

46. Tabs with WAI-ARIA roles:
Modern AJAX Tabs
46

47. Video: tabs with WAI-ARIA roles
Source: http://developer.yahoo.com/yui/examples/tabview/tabview-ariaplugin.html
47

48. WAI-ARIA roles: tabs code
<ul class="tablist" role="tablist">
<li id="tab1" class="tab selected" aria-
controls="panel1" aria-selected="true"
role="tab" tabindex="0">Opera</li>
<li id="tab2" class="tab" aria-
controls="panel2" role="tab" aria-
selected="false" tabindex="-1">Firefox</li>
<li id="tab3" class="tab" aria-
controls="panel3" role="tab" aria-
selected="false" tabindex="-1">Explorer</li>
<li id="tab4" class="tab" aria-
controls="panel4" role="tab" aria-
selected="false" tabindex="-1">Safari</li>
</ul>
48

49. Behaviour of
AJAX updates:
The Off-Screen
Model
49

50. AJAX Updates:
Without Forced Updates
50

51. Video: AJAX updates without forced
updates
Source: http://developer.yahoo.com/yui/examples/tabview/tabview-ariaplugin.html
51

52. AJAX updates: code
Var bufferUpdater;
function updateVB(){
if(!bufferUpdater){
bufferUpdater =
document.createElement("input");
bufferUpdater.type = "hidden";
bufferUpdater.value = 1;
document.body.appendChild(bufferUpdater);
}
bufferUpdater.value =
(bufferUpdater.value == 1 ? 0 : 1);
}
52

53. Live Regions
53

54. Video: Live Regions
Source: http://www.oaa-accessibility.org/example/22/
54

55. Live Regions: code
<div id="liveregion1"
class="region"
role="timer"
aria-labelledby="live1Label"
aria-live="assertive"
aria-atomic="true"
aria-relevant="all">
</div>
Source: http://www.oaa-accessibility.org/example/22/
55

56. Conclusion
Next Generation of Accessibility
Inclusive Design
56

57. Outlook
57

58. Contact
Artur Ortega
Twitter: @DesignedByBlind
Email: artur@ortegalink.com
58

59. 59