Next generation web accessibility: Improvement of usability for disabled users
Upcoming SlideShare
Loading in...5
×
 

Like this? Share it with your network

Share

Next generation web accessibility: Improvement of usability for disabled users

on

  • 3,929 views

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

Statistics

Views

Total Views
3,929
Views on SlideShare
2,735
Embed Views
1,194

Actions

Likes
3
Downloads
34
Comments
0

14 Embeds 1,194

http://yaccessibilityblog.com 611
http://yajon.ru 545
http://www.google.com 9
http://www.einfach-fuer-alle.de 6
http://yandex.ru 4
http://feeds.feedburner.com 4
http://translate.googleusercontent.com 4
http://assets.txmblr.com 3
http://webcache.googleusercontent.com 2
http://search.yahoo.com 2
http://funpromo.ru 1
http://www.bing.com 1
http://www.soso.com 1
http://paper.li 1
More...

Accessibility

Categories

Upload Details

Uploaded via as Adobe PDF

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

Next generation web accessibility: Improvement of usability for disabled users Presentation 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