Next generation web accessibility:    Improvement of usability for disabled users       Creating a nice user experience fo...
About the speaker: Artur Ortega    The difficulties which I meet with in order to realize my existence are    precisely wh...
Abstract    This lecture provides best practices used      at Yahoo! for increasing the usability of      web pages for di...
Definition: Accessibility    Facilities & Transport      Consumer Goods              & IT                                 ...
Definition: Usability                                  Product       Specific                                          Spe...
Definition: Universal Design    1. Equitable use    2. Flexibility in use    3. Simple and intuitive    4. Perceptible inf...
Definition: Inclusive Design    Accessibility      +        Effectiveness,                                 Efficiency &   ...
Universal vs Inclusive Design                 Inclusive Design                                    Adaptations &          U...
Real world examples9
Example: Wheelchair Access                                                                     ` Photo by Alan (merrionsq)...
Example: Closed Captions                               Source: YouTube Captions and Subtitles,                      http:/...
Challenges12
Challenges: AJAX, web apps, mobile        98.4% JavaScript enabled        550% increase in mobile screen         reader ...
Inclusive Web Design                                    Effectiveness,     Without too    Usability for                   ...
Challenges of Inclusive Web         Design                  Effectiveness,                   Efficiency &                 ...
A Retrospective: Static Content                                  Photo: Wayan Vota16
Video: Static Page – Wikipedia                               Source: http://www.wikipedia.org17
Semantics & Information     Semantics          Information     Mark-up            Language information                    ...
Semantic mark-up:     Some things never change20
Video: Semantic mark-up                Source: http://developer.yahoo.com/yui/examples/tabview/frommarkup_clean.html21
Microformats         Pros                Cons     Easy access           Breaking     to structured       accessibility    ...
Mobile              Compass24
Mobile          Yahoo! Messenger25
Mobile              Foursquare26
AJAX            Pros                Cons       Better usability      New area of         Faster than         accessibility...
AJAX     Facebook on the new Yahoo! homepage28
WAI-ARIAAccessible AJAX with WAI-ARIA  Adding missing semantics     to dynamic mark-up29
WAI-ARIA: Page Navigation        without Landmarks30
Video: Page navigation without     landmarks – Yahoo Sport                                Source: http://uk.eurosport.yaho...
WAI-ARIA: Page Navigation          with Landmarks32
Video: Page navigation with landmarks     – Flickr                        Source: http://www.flickr.com/groups/blind_photo...
WAI-ARIA35
General WAI-ARIA examples        Menu        Tabs        Live Region36
Video: menu without WAI-ARIA roles                   Source: http://developer.yahoo.com/yui/examples/menu/example08_clean....
Menu with WAI-ARIA roles:     Modern AJAX Menu (NVDA)39
Video: menu with WAI-ARIA roles     (NVDA)                 Source: http://developer.yahoo.com/yui/examples/menu/menuwaiari...
Menu with WAI-ARIA roles:     Modern AJAX Menu (JAWS)41
Video: Menu with WAI-ARIA roles     (JAWS)                 Source: http://developer.yahoo.com/yui/examples/menu/menuwaiari...
Tabs without WAI-ARIA roles:        Traditional AJAX Tabs44
Video: Tabs without WAI-ARIA roles                                Source: http://es.eurosport.yahoo.com/45
Video: tabs with WAI-ARIA roles                   Source: http://developer.yahoo.com/yui/examples/tabview/tabview-ariaplug...
WAI-ARIA roles: tabs code     <ul class="tablist" role="tablist">        <li id="tab1" class="tab selected" aria-        c...
AJAX Updates:     Without Forced Updates50
Video: AJAX updates without forced     updates                   Source: http://developer.yahoo.com/yui/examples/tabview/t...
AJAX updates: code     Var bufferUpdater;           function updateVB(){                 if(!bufferUpdater){              ...
Video: Live Regions                           Source: http://www.oaa-accessibility.org/example/22/54
Live Regions: code     <div id="liveregion1"        class="region"        role="timer"        aria-labelledby="live1Label"...
Outlook57
Contact     Artur Ortega     Twitter: @DesignedByBlind     Email: artur@ortegalink.com58
59
Next generation web accessibility: Improvement of usability for disabled users
Next generation web accessibility: Improvement of usability for disabled users
Next generation web accessibility: Improvement of usability for disabled users
Next generation web accessibility: Improvement of usability for disabled users
Next generation web accessibility: Improvement of usability for disabled users
Next generation web accessibility: Improvement of usability for disabled users
Next generation web accessibility: Improvement of usability for disabled users
Next generation web accessibility: Improvement of usability for disabled users
Next generation web accessibility: Improvement of usability for disabled users
Upcoming SlideShare
Loading in...5
×

Next generation web accessibility: Improvement of usability for disabled users

3,823

Published on

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”!

Published in: Business
0 Comments
3 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
3,823
On Slideshare
0
From Embeds
0
Number of Embeds
8
Actions
Shares
0
Downloads
36
Comments
0
Likes
3
Embeds 0
No embeds

No notes for slide

Transcript of "Next generation web accessibility: Improvement of usability for disabled users"

  1. 1. Next generation web accessibility: Improvement of usability for disabled users Creating a nice user experience for everyone Artur Ortega March 17, 20111
  2. 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. 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. 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. 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. 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. 7. Definition: Inclusive Design Accessibility + Effectiveness, Efficiency & Satisfaction Without too much hassle7
  8. 8. Universal vs Inclusive Design Inclusive Design Adaptations & Universal Design Accommodations Design for human diversity, social inclusion & equality8
  9. 9. Real world examples9
  10. 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. 11. Example: Closed Captions Source: YouTube Captions and Subtitles, http://www.youtube.com/watch?v=QRS8MkLhQmM11
  12. 12. Challenges12
  13. 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. 14. Inclusive Web Design Effectiveness, Without too Usability for Efficiency & much hassle disabled users Satisfaction Next generation of accessibility14
  15. 15. Challenges of Inclusive Web Design Effectiveness, Efficiency & Satisfaction Generally In the without any usual way help15
  16. 16. A Retrospective: Static Content Photo: Wayan Vota16
  17. 17. Video: Static Page – Wikipedia Source: http://www.wikipedia.org17
  18. 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. 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. 20. Semantic mark-up: Some things never change20
  21. 21. Video: Semantic mark-up Source: http://developer.yahoo.com/yui/examples/tabview/frommarkup_clean.html21
  22. 22. Microformats Pros Cons Easy access Breaking to structured accessibility information. because of mis- use of elements & attributes.22
  23. 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. 24. Mobile Compass24
  25. 25. Mobile Yahoo! Messenger25
  26. 26. Mobile Foursquare26
  27. 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. 28. AJAX Facebook on the new Yahoo! homepage28
  29. 29. WAI-ARIAAccessible AJAX with WAI-ARIA Adding missing semantics to dynamic mark-up29
  30. 30. WAI-ARIA: Page Navigation without Landmarks30
  31. 31. Video: Page navigation without landmarks – Yahoo Sport Source: http://uk.eurosport.yahoo.com/31
  32. 32. WAI-ARIA: Page Navigation with Landmarks32
  33. 33. Video: Page navigation with landmarks – Flickr Source: http://www.flickr.com/groups/blind_photographers/pool/33
  34. 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. 35. WAI-ARIA35
  36. 36. General WAI-ARIA examples  Menu  Tabs  Live Region36
  37. 37. Menu without WAI-ARIA roles: A Traditional AJAX Menu37
  38. 38. Video: menu without WAI-ARIA roles Source: http://developer.yahoo.com/yui/examples/menu/example08_clean.html38
  39. 39. Menu with WAI-ARIA roles: Modern AJAX Menu (NVDA)39
  40. 40. Video: menu with WAI-ARIA roles (NVDA) Source: http://developer.yahoo.com/yui/examples/menu/menuwaiaria_source.html40
  41. 41. Menu with WAI-ARIA roles: Modern AJAX Menu (JAWS)41
  42. 42. Video: Menu with WAI-ARIA roles (JAWS) Source: http://developer.yahoo.com/yui/examples/menu/menuwaiaria_source.html42
  43. 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. 44. Tabs without WAI-ARIA roles: Traditional AJAX Tabs44
  45. 45. Video: Tabs without WAI-ARIA roles Source: http://es.eurosport.yahoo.com/45
  46. 46. Tabs with WAI-ARIA roles: Modern AJAX Tabs46
  47. 47. Video: tabs with WAI-ARIA roles Source: http://developer.yahoo.com/yui/examples/tabview/tabview-ariaplugin.html47
  48. 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. 49. Behaviour of AJAX updates: The Off-Screen Model49
  50. 50. AJAX Updates: Without Forced Updates50
  51. 51. Video: AJAX updates without forced updates Source: http://developer.yahoo.com/yui/examples/tabview/tabview-ariaplugin.html51
  52. 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. 53. Live Regions53
  54. 54. Video: Live Regions Source: http://www.oaa-accessibility.org/example/22/54
  55. 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. 56. Conclusion Next Generation of Accessibility Inclusive Design56
  57. 57. Outlook57
  58. 58. Contact Artur Ortega Twitter: @DesignedByBlind Email: artur@ortegalink.com58
  59. 59. 59

×