Your SlideShare is downloading. ×
0
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
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
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
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
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
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
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
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×
Saving this for later? Get the SlideShare app to save on your phone or tablet. Read anywhere, anytime – even offline.
Text the download link to your phone
Standard text messaging rates apply

Next generation web accessibility: Improvement of usability for disabled users

3,796

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 …

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,796
On Slideshare
0
From Embeds
0
Number of Embeds
8
Actions
Shares
0
Downloads
36
Comments
0
Likes
3
Embeds 0
No embeds

Report content
Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
No notes for slide

Transcript

  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

×