7 Incorporating ARIA into Web Toolkit


Published on

This presentation deals with the problem of efficient and correct implementation of Accessible Rich Internet Application (ARIA) recommendation into user interface component during rich internet application development process. A new methodology is presented, which is based on testing the accessibility on real-life web applications with help of experienced blind users. Three Web Toolkits were evaluated by this method and serious accessibility issues were found. This new approach was then used to implement ARIA recommendation into one open source Web Toolkit.

Published in: Technology
  • Be the first to comment

  • Be the first to like this

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

No notes for slide
  • 6 0min time slot
  • doprava pridat konkretni reseni z ARIA
  • 7 Incorporating ARIA into Web Toolkit

    1. 1. Jan Vystrcil Czech Technical University in Prague Faculty of Electrical Engineering Czech Republic Incorporating ARIA into Web Toolkit
    2. 2. Outline <ul><li>RIA and ARIA </li></ul><ul><li>Sample application </li></ul><ul><li>Development process </li></ul><ul><li>Testing process </li></ul>
    3. 3. RIA <ul><li>What is Rich Internet Application (RIA)? </li></ul><ul><ul><li>New approach on Internet </li></ul></ul><ul><ul><li>Websites look more like desktop applications </li></ul></ul><ul><ul><ul><li>Online documents </li></ul></ul></ul><ul><ul><ul><li>E-mail </li></ul></ul></ul><ul><ul><ul><li>Instant messaging </li></ul></ul></ul><ul><ul><ul><li>Calendar </li></ul></ul></ul><ul><ul><ul><li>Social networking </li></ul></ul></ul><ul><li>Number of RIA rapidly increasing </li></ul><ul><li>Possible benefits for handicapped people working with Internet </li></ul>
    4. 4. RIA +/- <ul><li>RIA pros </li></ul><ul><ul><li>Higher comfort </li></ul></ul><ul><ul><ul><li>Suggestions </li></ul></ul></ul><ul><ul><ul><li>Immediate feedback </li></ul></ul></ul><ul><ul><li>Better user experience </li></ul></ul><ul><ul><ul><li>Drag&Drop </li></ul></ul></ul><ul><ul><ul><li>Sophisticated components (tree, collapsible panel) </li></ul></ul></ul><ul><ul><li>Dynamics </li></ul></ul><ul><ul><ul><li>Chat </li></ul></ul></ul><ul><ul><ul><li>Shared data </li></ul></ul></ul><ul><ul><ul><li>Collaboration </li></ul></ul></ul><ul><li>RIA cons </li></ul><ul><ul><li>Not transparent </li></ul></ul><ul><ul><ul><li>Many concurrent changes </li></ul></ul></ul><ul><ul><ul><li>Complex components </li></ul></ul></ul><ul><ul><li>Unclear structure </li></ul></ul><ul><ul><ul><li>Content (not in HTML) </li></ul></ul></ul><ul><ul><ul><li>Semantics in code of scripts </li></ul></ul></ul><ul><ul><li>Problematic keyboard navigation </li></ul></ul><ul><ul><li>Difficult controlling of components </li></ul></ul><ul><ul><li>Dependency on JavaScript </li></ul></ul>
    5. 5. WAI-ARIA <ul><li>RIA is less accessible than &quot;standard&quot; web pages </li></ul><ul><ul><li>How this can be solved? </li></ul></ul><ul><li>Web Accessibility Initiative (WAI) </li></ul><ul><ul><li>part of W3C consortium </li></ul></ul><ul><li>Accessible Rich Internet Application suite of W3C (WAI-ARIA) </li></ul><ul><ul><li>Working draft </li></ul></ul><ul><ul><li>Recommendations on how to make RIA accessible </li></ul></ul><ul><ul><ul><li>Additional metadata </li></ul></ul></ul><ul><ul><ul><li>Bring back the semantics into HTML code </li></ul></ul></ul><ul><ul><li>No restrictions on current functionality </li></ul></ul>
    6. 6. a11y issues tackled by ARIA <ul><li>Keyboard-only operation impossible </li></ul><ul><li>Orientation in content </li></ul><ul><ul><li>Missing appropriate labels </li></ul></ul><ul><ul><li>Hiding of some content without announcement </li></ul></ul><ul><ul><ul><li>Tab panels </li></ul></ul></ul><ul><ul><ul><li>Collapsible panels </li></ul></ul></ul><ul><li>Controlling of UI components </li></ul><ul><ul><li>Wrong or missing tab order </li></ul></ul><ul><ul><li>Focus stacking or disappearing </li></ul></ul><ul><ul><li>Wrong or missing status announcement </li></ul></ul><ul><ul><ul><li>Checkbox </li></ul></ul></ul><ul><ul><ul><li>Radio Button </li></ul></ul></ul><ul><ul><ul><li>Slider </li></ul></ul></ul>aria-labeledby aria-expanded tabindex checked
    7. 7. Introduction of sample application <ul><li>Web e-mail client: http:// www.myaccessiblemail.com </li></ul>
    8. 8. SAMPLE 1 Without accessibility
    9. 9. SAMPLE 2 With accessibility
    10. 10. Introduction of sample application
    11. 11. Making ARIA from RIA not so easy as it looks :-)
    12. 12. Problems of implementation a11y into RIA <ul><li>Development process </li></ul><ul><ul><li>Low motivation of developers </li></ul></ul><ul><ul><li>Insufficient knowledge of a11y rules </li></ul></ul><ul><ul><li>Extra work </li></ul></ul><ul><ul><li>Time & Budget restrictions </li></ul></ul><ul><li>Testing process </li></ul><ul><ul><li>Isolated components testing </li></ul></ul><ul><ul><li>Sighted developers/testers used for testing </li></ul></ul><ul><li>Real accessibility </li></ul><ul><ul><li>Various browsers </li></ul></ul><ul><ul><li>Various screen readers </li></ul></ul><ul><ul><ul><li>cca 40 custom options in JAWS </li></ul></ul></ul><ul><ul><ul><li>scripting in Orca </li></ul></ul></ul>
    13. 13. Development process <ul><li>Incorporating of ARIA into UI components of RIA toolkit </li></ul><ul><ul><li>Saving majority of redundant work </li></ul></ul><ul><ul><li>Many RIA toolkits trying ARIA implementation </li></ul></ul><ul><ul><li>Not solving all a11y issues </li></ul></ul><ul><ul><ul><li>Embedded components often working differently than single components </li></ul></ul></ul><ul><ul><li>Some ARIA markup depends on concrete implementation of RIA application </li></ul></ul><ul><li>Need of special developer tool </li></ul><ul><ul><li>Facilitation of ARIA development process </li></ul></ul><ul><ul><li>Familiarization of a11y </li></ul></ul>
    14. 14. First testing of web toolkits <ul><li>Performed in first half of 2009 </li></ul><ul><li>3 Open source RIA toolkits </li></ul><ul><ul><li>Dojo, ExtJS, ICEfaces </li></ul></ul><ul><li>20 developers </li></ul><ul><ul><li>Developed simple real live applications </li></ul></ul><ul><ul><li>Evaluated with screen reader </li></ul></ul><ul><li>Found a11y issues in 30 components </li></ul><ul><li>Total of issues was more than 100 </li></ul>
    15. 15. First testing of web toolkits <ul><li>Testing on small real live application </li></ul><ul><ul><li>No testing of standalone components </li></ul></ul><ul><ul><ul><li>final application a11y not ensured </li></ul></ul></ul><ul><ul><li>Systematical testing of all combinations of components impossible </li></ul></ul><ul><li>Sighted developers/testers used for testing </li></ul><ul><ul><li>Not used to everyday usage of screen readers </li></ul></ul><ul><ul><ul><li>Low efficiency and accuracy of testing with screen reader </li></ul></ul></ul><ul><ul><li>Know the functionality of application in advance </li></ul></ul>
    16. 16. Second testing with blind users <ul><li>Maximal accuracy of testing </li></ul><ul><li>Still any problems? </li></ul><ul><ul><li>Bugs in application </li></ul></ul><ul><ul><li>Unsolved accessibility issues </li></ul></ul><ul><ul><li>Unknown structure of application </li></ul></ul><ul><li>Experienced blind users for testing needed </li></ul><ul><li>Direct cooperation of blind user and developer </li></ul><ul><li>Automatically generated description of page </li></ul><ul><ul><li>Blind user can use it for easier orientation </li></ul></ul>
    17. 17. Conclusion <ul><li>Integration of support into developer tool needed </li></ul><ul><ul><li>User interaction design patterns </li></ul></ul><ul><ul><ul><li>Searching </li></ul></ul></ul><ul><ul><ul><li>Selection </li></ul></ul></ul><ul><ul><ul><li>Navigation </li></ul></ul></ul><ul><ul><li>Checking values for ARIA attributes </li></ul></ul><ul><ul><li>Checking correct use of ARIA attributes </li></ul></ul><ul><ul><ul><li>Section role=&quot;application&quot; => no free text </li></ul></ul></ul>
    18. 18. Thank you for attention Jan Vystrcil Czech Technical University in Prague Faculty of Electrical Engineering Czech Republic