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

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 Gasett2

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 people4

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 92415

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., 19976

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

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

9.
Real world examples9

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 licence10

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

12.
Challenges12

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 Survey13

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

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

16.
A Retrospective: Static Content Photo: Wayan Vota16

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

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

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 change20

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

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 functionality23

24.
Mobile Compass24

25.
Mobile Yahoo! Messenger25

26.
Mobile Foursquare26

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

28.
AJAX Facebook on the new Yahoo! homepage28

29.
WAI-ARIAAccessible AJAX with WAI-ARIA Adding missing semantics to dynamic mark-up29

30.
WAI-ARIA: Page Navigation without Landmarks30

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

32.
WAI-ARIA: Page Navigation with Landmarks32

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-ARIA35

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

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

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

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.html40

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.html42

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 Tabs44

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

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

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

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 Model49

50.
AJAX Updates: Without Forced Updates50

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

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 Regions53

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 Design56

57.
Outlook57

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

59.
59