Next Generation Web Accessibility: Improvement Of Usability For Disabled Users

accessibility-205x85This post originally appeared on the Yahoo Accessibility blog.

This presentation was given at the CSUN 2011 conference. It 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”!

Slide Transcript

  1. Next generation web accessibility:
    Improvement of usability for disabled users

    Creating a nice user experience for everyone

    Artur Ortega
    March 17, 2011

  2. About the Speaker: Artur Ortega

    [ drawing of wing ]

    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

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

  4. Definition: Accessibility

    [ flow diagram with following content ]

    For disabled people
    • Facilities & Transport
    • Consumer Goods & IT
    • Information Sources & Communication Facilities
    • And other areas of life

    Available and Usable

    In the usual way:

    • Without too much hassle
    • Generally without any help
  5. Definition: Usability

    [ flow diagram with following content ]

    Qualitative attribute assesses how easy user interfaces are to use

    In a specific context of use

    • Specific Users [to] Product [to] Specific Goals
    • Specific Users: With Effectiveness, Efficiency & Satisfaction [to] Specific Goals
  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
  7. Definition: Inclusive Design

    Accessibility
    [ plus ]
    Effectiveness, Efficiency & Satisfaction
    [ equals ]
    Without too much hassle

  8. Universal vs Inclusive Design

    Design for human diversity, social inclusion & equality

    Inclusive Design
    [ includes ]

    • Universal Design
    • Adaptations & Accommodations
  9. Real world examples

  10. Example: Wheelchair Access

    [ image of very steep wheelchair ramp to a store ]

    [ image of building with wide door at sidewalk level ]

    Photo by Alan (merrionsq), available under a Creative Commons Attribution-NonCommercial-NoDerivs licence
    Photo by Leonardo Bonnani, available under a Creative Commons Attribution-NonCommercial-ShareAlike licence

  11. Example: Closed Captions

    [ screen capture about video captioning on YouTube ]
    Source: YouTube Captions and Subtitles

  12. Challenges

  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
  14. Inclusive Web Design

    Next generation of accessibility

    Without too much hassle
    [ with ] Usability for disabled users [ leads to ]
    Effectiveness, Efficiency & Satisfaction

  15. Challenges of Inclusive Web Design

    Effectiveness, Efficiency & Satisfaction

    • In the usual way
    • Generally without any help
  16. A Retrospective: Static Content

    [ image of newspaper stand ]

    Photo: Wayan Vota

  17. Wikipedia Home Page

    [ Video screencapture of JAWS reading the various languages on Wikipedia.com ]

  18. Tackling the challenges of Inclusive Web Design

    AJAX, Web apps, Mobile

    Adding semantics & information

    In the usual way, generally without any help, adaptations & accommodations

  19. Semantics & Information

    Semantics
    Mark-up
    WAI-ARIA
    Microformats
    Information
    Language information
    ALT text
    Long image descriptions
    Subtitles / Closed captions
    Audio description
    Sign-language
    Etc.
  20. Semantic mark-up: Some things never change

    [ video screencapture JAWS reading Yahoo! Sports Spain ]

  21. Microformats

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

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

    [ screenshot of mobile compass application ]
    Compass

  24. Mobile

    [ screenshot of Yahoo! Messenger ]
    Yahoo! Messenger

  25. Mobile

    [ screenshot of Foursquare ]
    Foursquare

  26. AJAX

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

    Facebook application on Yahoo home page
    [ Screenshot of Facebook application within the Yahoo! Home page ]

    • WAI-ARIA
    • Accessible AJAX with WAI-ARIA
    • Adding missing semantics to dynamic mark-up
  28. WAI-ARIA: Page Navigation without Landmarks

  29. [ Video screencapture of JAWS reading Yahoo! Sports web page ]
  30. WAI-ARIA: Page Navigation with Landmarks

  31. [ video screen capture of JAWS reading blind photographers group on Flickr ]
  32. WAI-ARIA landmarks: code


    <body>
    <div class="header">
    <div class="navigation">
    </div>
    </div>
    <div class="section">
    <h1>DIVs + ARIA Roles
    <div class="article">
    </div>
    </div>
    <div class="footer">
    </div>
    </body>

  33. WAI-ARIA

  34. General WAI-ARIA examples

    • Menu
    • Tabs
    • Live Region
  35. Menu without WAI-ARIA roles: A Traditional AJAX Menu

  36. [ video screen capture of JAWS reading a javascript powered navigation without WAI-ARIA ]
  37. Menu with WAI-ARIA roles: Modern AJAX Menu (NVDA)

  38. [ video screencapture of NVDA reading a menu with WAI-ARIA ]
  39. Menu with WAI-ARIA roles: Modern AJAX Menu (JAWS)

  40. [ video capture of JAWS reading an AJAX menu with WAI-ARIA ]
  41. WAI-ARIA roles: menu code


    <div>
    <div id="fileMenu">File</div>
    <div>
    <div>Open</div>
    <div>Save</div>
    <div>Save as ...</div>
    ...
    </div>
    </div>

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

  43. [ video screencapture: Screen Reader & Javascript Menu - Menu with WAI-ARIA roles (NVDA) ]
  44. Tabs with WAI-ARIA roles: Modern AJAX Tabs

  45. [ video screen capture: Screen Reader & Javascript Menu - Menu with WAI-ARIA roles (JAWS)
  46. WAI-ARIA roles: tabs code


    <ul class="tablist">
    <li id="tab1" class="tab selected">
    Opera
    </li>
    <li id="tab2" class="tab">
    Firefox
    </li>
    <li id="tab3" class="tab">
    Explorer
    </li>
    <li id="tab4" class="tab">
    Safari
    </li>
    </ul>

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

  48. AJAX Updates: Without Forced Updates

  49. [ video screencapture Screen Reader & Javascript - AJAX updates without forced virtual buffer updates
  50. 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);
    }

  51. Live Regions

  52. [ video screenshot of live regions: Screen Reader & Javascript - AJAX updates with WAI-ARIA Live Regions ]
  53. Live Regions: Code


    <div id="liveregion1"
    class="region"

    >
    </div>

  54. Conclusion: Next Generation of Accessibility Inclusive Design

  55. Outlook

    [ two images of a protest for accessible transportation in London ]

  56. Contact

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