Enabling an Accessible Web 2.0


Published on

Presentation from the International Cross-Disciplinary Conference on Web Accessibility 2007 on We 2.0 Technologies for enabling accessibility

Published in: Business, Technology
  • Be the first to comment

No Downloads
Total views
On SlideShare
From Embeds
Number of Embeds
Embeds 0
No embeds

No notes for slide
  • Enabling an Accessible Web 2.0

    1. 1. Enabling an Accessible Web 2.0 Becky Gibson Web Accessibility Architect
    2. 2. <ul><li>Web 2.0 Overview </li></ul><ul><li>Web 2.0 Accessibility Concerns </li></ul><ul><li>Addressing Web 2.0 Accessibility </li></ul><ul><ul><li>Technologies </li></ul></ul><ul><ul><li>Tooling </li></ul></ul><ul><ul><li>Testing </li></ul></ul><ul><li>Demo </li></ul><ul><li>Summary </li></ul>Agenda
    3. 3. What is Web 2.0? <ul><li>Dynamic </li></ul><ul><ul><li>Incremental updates, multimedia </li></ul></ul><ul><li>Interactive </li></ul><ul><ul><li>Maps, web services </li></ul></ul><ul><li>Collaborative </li></ul><ul><ul><li>Wikis, blogs </li></ul></ul><ul><ul><li>Crowdsourcing – http:// www.istockphoto.com </li></ul></ul><ul><ul><li>Collective intelligence </li></ul></ul><ul><ul><ul><li>Amazon Mechanical Turk - http:// www.mturk.com/mturk/welcome </li></ul></ul></ul><ul><ul><ul><li>Digg - http:// www.digg.com /news </li></ul></ul></ul><ul><ul><ul><li>del.icio.us - http:// del.icio.us / </li></ul></ul></ul>“ Thus, mastery of architectures of participation to create real value will be essential to success in the Web of the future.” Dion Hinchcliffe
    4. 4. Google Maps
    5. 5. iStockPhoto
    6. 6. Web 2.0 Technologies <ul><li>JavaScript </li></ul><ul><li>CSS – Cascading Style Sheets </li></ul><ul><li>Ajax – Asynchronous JavaScript and XML </li></ul><ul><li>Multimedia </li></ul>
    7. 7. Yahoo! – February 29, 2000
    8. 8. Yahoo! – May 2, 2007
    9. 9. AOL – February 29, 2000
    10. 10. AOL – May 2, 2007
    11. 11. Web 2.0 Accessibility Concerns <ul><li>Rich Interface controls </li></ul><ul><ul><li>Reliance on Mouse </li></ul></ul><ul><ul><li>Lack of Semantics </li></ul></ul><ul><li>Incremental Updates via Ajax </li></ul><ul><ul><li>Unexpected / Unaware </li></ul></ul><ul><ul><li>Unable to locate </li></ul></ul><ul><li>Changes in focus </li></ul><ul><li>Excessive Navigation </li></ul><ul><li>Multimedia </li></ul><ul><ul><li>Lack of captioning </li></ul></ul><ul><ul><li>Interaction issues </li></ul></ul>
    12. 12. Addressing Web 2.0 Accessibility <ul><li>Updated Web Technologies </li></ul><ul><ul><li>Accessible Rich Internet Applications (ARIA) </li></ul></ul><ul><ul><li>IAccessible2 </li></ul></ul><ul><li>Development Tools </li></ul><ul><ul><li>Integrated Development Environments </li></ul></ul><ul><ul><li>Toolkits </li></ul></ul><ul><li>Testing Tools </li></ul><ul><ul><li>Rule-based Accessibility Validation Environment (RAVEN) </li></ul></ul><ul><ul><li>Functional Web Accessibility Evaluator (FAE) </li></ul></ul><ul><li>Assistive Technologies </li></ul>
    13. 13. Updated Web Technologies - ARIA <ul><li>Allows creation of rich user interface components </li></ul><ul><li>Full keyboard navigation </li></ul><ul><li>Non-intrusive notification of updated content </li></ul>
    14. 14. Need for ARIA <ul><li>Navigation </li></ul><ul><ul><li>All components must be keyboard Accessible </li></ul></ul><ul><ul><li>Remove reliance on tab key navigation </li></ul></ul><ul><li>Notification of updated content </li></ul><ul><li>Assistive Technology (AT) Support </li></ul><ul><ul><li>AT work via platform accessibility APIs </li></ul></ul><ul><ul><ul><li>Only basic HTML elements are supported </li></ul></ul></ul><ul><ul><ul><li>Scripted Web content is not supported </li></ul></ul></ul><ul><ul><li>Assistive Technology needs to: </li></ul></ul><ul><ul><ul><li>Know active roles of scripted user interface components </li></ul></ul></ul><ul><ul><ul><li>Monitor states of scripted user interface components </li></ul></ul></ul>
    15. 15. ARIA Overview <ul><li>Add role semantics to scripted user interface (UI) elements </li></ul><ul><li>Update state information dynamically </li></ul><ul><li>Make items focusable via tabindex attribute </li></ul><ul><li>Add keyboard event handling </li></ul><ul><ul><li>Mimic the keyboard behavior of the rich client UI </li></ul></ul><ul><ul><li>Minimize tab key navigation </li></ul></ul><ul><li>Add live region information and notification behavior* </li></ul><ul><li>Extensible via RDF in future </li></ul>*Live region support coming in Firefox 3
    16. 16. ARIA Support <ul><li>Support for HTML and XHTML </li></ul><ul><li>Implemented in Firefox 1.5 and later versions </li></ul><ul><li>Supported by Window-Eyes and Jaws </li></ul><ul><ul><li>Window-Eyes 5.5 or later </li></ul></ul><ul><ul><li>Partial support in JAWS 7.1, more in JAWS 8.0 </li></ul></ul>
    17. 17. ARIA Demo Available at http://www.weba11y.com/AjaxDemo/sample.html
    18. 18. Updated Web Technologies – Accessibility APIs <ul><li>Each platform has Accessibility API to communicate with AT </li></ul><ul><ul><li>Accessibility ToolKit (ATK) for GNOME </li></ul></ul><ul><ul><li>Java Accessibility API </li></ul></ul><ul><ul><li>Microsoft Active Accessibility (MSAA) for Windows </li></ul></ul><ul><ul><li>UI Automation for Vista </li></ul></ul><ul><li>MSAA created many years ago </li></ul><ul><ul><li>No access to advanced functionality </li></ul></ul><ul><ul><li>ATs rely on off-screen models and private application APIs </li></ul></ul>
    19. 19. Updated Web Technologies – IAccessible2 <ul><li>Extends MSAA to add missing functionality </li></ul><ul><ul><li>rich text, tables, relations </li></ul></ul><ul><ul><li>ARIA Live Regions </li></ul></ul><ul><li>Harmonizes with newer APIs of Java and Linux </li></ul><ul><li>Interface donated to The Linux Foundation as Open Standard </li></ul><ul><li>Will be implemented in Firefox 3 </li></ul><ul><li>Being integrated into Eclipse </li></ul>
    20. 20. Development Tools <ul><li>Web Toolkits </li></ul><ul><ul><li>Dojo </li></ul></ul><ul><ul><li>Scriptaculous </li></ul></ul><ul><ul><li>Prototype </li></ul></ul><ul><ul><li>Google Web Toolkit (GWT) </li></ul></ul><ul><ul><li>Yahoo! User Interface (YUI) </li></ul></ul><ul><ul><li>More….. </li></ul></ul><ul><li>Integrated Development Environments </li></ul><ul><ul><li>Rational Web Developer </li></ul></ul><ul><ul><li>Ajax Toolkit Framework </li></ul></ul><ul><ul><li>More….. </li></ul></ul>
    21. 21. Dojo <ul><li>Open Source JavaScript Toolkit </li></ul><ul><ul><li>“Easy” Ajax </li></ul></ul><ul><ul><li>Data Binding </li></ul></ul><ul><ul><li>Full event system </li></ul></ul><ul><ul><li>Browser abstraction layer </li></ul></ul><ul><ul><li>User Interface Widgets </li></ul></ul><ul><ul><li>Dual Licensed </li></ul></ul><ul><ul><ul><li>Academic Free License v2.1 </li></ul></ul></ul><ul><ul><ul><li>BSD License </li></ul></ul></ul>
    22. 22. Dojo 1.0 Core Widgets (Dijit) <ul><li>Fully Accessible via ARIA Techniques </li></ul><ul><li>Internationalized </li></ul><ul><li>Standard Look and Feel </li></ul><ul><li>Developer Documentation </li></ul><ul><ul><li>API </li></ul></ul><ul><ul><li>User Manual </li></ul></ul><ul><li>Supported Browsers </li></ul><ul><ul><li>Firefox 2.0 </li></ul></ul><ul><ul><li>IE 6+ </li></ul></ul><ul><ul><li>Safari (latest) </li></ul></ul><ul><li>Data Binding </li></ul><ul><ul><li>Tree, Grid, Select </li></ul></ul>
    23. 23. Dojo Demo
    24. 24. Accessibility Testing Tools <ul><li>Test against published standards </li></ul><ul><li>Many tools evaluate the “over the wire” HTML </li></ul><ul><ul><li>Bobby from Watchfire </li></ul></ul><ul><ul><li>WebKing from Parasoft </li></ul></ul><ul><ul><li>More … </li></ul></ul><ul><li>Difficult to evaluate server side technologies </li></ul><ul><li>Issues with dynamic Web 2.0 content </li></ul><ul><li>Need more interactive solutions </li></ul>
    25. 25. RAVEN Rule-based Accessibility Validation ENvironment <ul><li>Set of Eclipse plug-ins </li></ul><ul><li>Originally developed for validating Java GUIs </li></ul><ul><ul><li>Java AWT and Swing </li></ul></ul><ul><ul><li>Eclipse SWT </li></ul></ul><ul><li>Integrates accessibility testing into development environment </li></ul><ul><li>Operates via an XML based set of rules </li></ul><ul><li>Supports Validation of Dynamic HTML </li></ul><ul><ul><li>Uses IAccessible2 </li></ul></ul><ul><li>Being updated to support ARIA </li></ul>
    26. 26. Summary <ul><li>Web 2.0 is dynamic and constantly evolving </li></ul><ul><li>Accessibility of Web 2.0 is possible through </li></ul><ul><ul><li>Updated Technologies </li></ul></ul><ul><ul><li>Toolkits and Development Environments </li></ul></ul><ul><ul><li>Testing Tools </li></ul></ul>