Usable ARIA: the Fluid Infusion component set and the relationship between ARIA and usability.

1,303 views

Published on

Inclusive Design Research Centre (IDRC) at Ontario College of Art & Design (OCAD)

Published in: Technology
  • Be the first to comment

  • Be the first to like this

Usable ARIA: the Fluid Infusion component set and the relationship between ARIA and usability.

  1. 1. Usable ARIA: the Fluid Infusion component set and the relationship between ARIA and usability Colin Clark, Justin Obara, Jess Mitchell, Jan Richards Inclusive Design Research Centre (IDRC) OCAD University 7 – 8 October 2010 ÆGIS 1st International Conference, Seville, Spain
  2. 2. Overview 1) The Challenges of JavaScript Accessibility 2) How ARIA Helps 3) UI Innovation on the Web and the Limits of ARIA 4) What is Fluid Infusion? 5) Accessibility in Fluid Infusion 6) Personalization 7) Conclusion 7 – 8 October 2010 ÆGIS 1st International Conference, Seville, Spain 2
  3. 3. The Challenges of JavaScript Accessibility • There has been a major shift on the web, from documents to applications developed using dynamic web content (a combination of Javascript, HTML, CSS). • Instead of browsers providing renderings for markup with inherent meaning (e.g., <input type=”radio”...>), browsers are now often provided with markup lacking inherent meaning (e.g., <div>'s and <span>'s) on which JavaScript operates to create user interfaces. • The familiar accessibility techniques for static web content are no longer enough (but are still necessary on the markup end) 7 – 8 October 2010 ÆGIS 1st International Conference, Seville, Spain 3
  4. 4. The Challenges of Javascript Accessibility <ol> <li><a href="#catsPanel">Cats</a></li> <li><a href="#dogsPanel">Dogs</a></li> <li><a href="#hamstersPanel">Hamsters</a></li> </ol> <div> <div id="catsPanel">Cats meow.</div> <div id="dogsPanel">Dogs bark.</div> <div id="hamstersPanel">Hamsters wheel.</div> </div> The code relies on user perception to create the illusion of a coherent tabbed panel UI. 7 – 8 October 2010 ÆGIS 1st International Conference, Seville, Spain 4
  5. 5. How ARIA Helps • ARIA fills the gap between standard HTML tags and the varied dynamic web content controls. • It provides roles (e.g., tab, tabpanel), states (e.g., checked vs. unchecked) and properties (e.g., labelled-by) that describe the behavior of most familiar UI widgets. • These roles, states and properties are then exposed to ARIA- enabled assistive technologies (e.g., the latest versions of JAWS, Orca, and NVDA) by the browser via the operating system's native accessibility APIs (e.g., ATSPI on Linux, MSAA, IAccessible2, etc.). 7 – 8 October 2010 ÆGIS 1st International Conference, Seville, Spain 5
  6. 6. How ARIA Helps <ol role="tablist"> <li id="cats" role="tab"><a href="#catsPanel">Cats</a></li> <li id="dogs" role="tab"><a href="#dogsPanel">Dogs</a></li> <li id="hamsters" role="tab"><a href="#hamstersPanel">Hamsters</a></li> </ol> <div> <div id="catsPanel" role="tabpanel" aria-labelledby="cats">Cats meow.</div> <div id="dogsPanel" role="tabpanel" aria-labelledby="dogs">Dogs bark.</div> <div id="hamstersPanel" role="tabpanel" aria-labelledby="hamsters">Hamsters wheel.</div> </div> ARIA injects meaningful structure. 7 – 8 October 2010 ÆGIS 1st International Conference, Seville, Spain 6
  7. 7. UI Innovation on the Web and the Limits of ARIA • The most obvious challenge facing developers and users of ARIA today is a lack of implementation maturity (in and between browsers and AT), meaning ARIA testing remains critical. • Another challenge is usable keyboard control, without which a control may claim to be one type of control, but may defy user expectations for control. – The desktop conventions for keyboard control (e.g., tab and arrow navigation) are very mature and often surprisingly complicated. 7 – 8 October 2010 ÆGIS 1st International Conference, Seville, Spain 7
  8. 8. UI Innovation on the Web and the Limits of ARIA • More challenging are the limits imposed by the role-based approach to describing user interfaces. – e.g., a button widget is given an ARIA role of "button." The behavior of the button, namely that it can be clicked or activated by the user to perform a particular action, is not specified, but rather assumed from the name of the role. • This works well as long as developers create user interfaces that fall cleanly into these categories. But often there is no perfect role or the role may change dynamically. 7 – 8 October 2010 ÆGIS 1st International Conference, Seville, Spain 8
  9. 9. UI Innovation on the Web and the Limits of ARIA • For example, Fluid's “Inline Edit” component sometimes behaves like a button and other times like a textbox. • And what about this? 7 – 8 October 2010 ÆGIS 1st International Conference, Seville, Spain 9
  10. 10. UI Innovation on the Web and the Limits of ARIA • Ultimately, the solution to this problem may lie in a more flexible approach to describing UIs at the accessibility API level. • The interactions and behaviors of a particular control would be explicitly described rather than being implied by a single role name. Examples of this approach include: – Control Patterns in Microsoft's UI Automation – ATK Interfaces • It is possible that a future version of ARIA may take a similar approach. 7 – 8 October 2010 ÆGIS 1st International Conference, Seville, Spain 10
  11. 11. What is Fluid Infusion? • Fluid is an open source community of: – Designers – Developers – Accessibility experts • Fluid consists of universities, museums and individuals • Fluid helps other open communities: – jQuery UI – Dojo – W3C Accessibility 7 – 8 October 2010 ÆGIS 1st International Conference, Seville, Spain 11
  12. 12. What is Fluid Infusion? • Fluid Infusion is an application framework built on top of jQuery • Designed for usability and accessibility • Open architecture: everything is configurable • Includes UI components you can reuse and adapt • Includes a lightweight CSS framework for styling • Infusion takes namespacing seriously and it does not assume control of the page, allowing it to be used together with code from other sources (e.g., in a CMS, portal or mashup). • Includes accessibility tools and plugins for jQuery 7 – 8 October 2010 ÆGIS 1st International Conference, Seville, Spain 12
  13. 13. Accessibility in Fluid Infusion • Infusion was built with accessibility in mind, including: – A simple API for quickly creating keyboard-navigable user interfaces, wrapped as a jQuery plugin – Support for ARIA roles and states in all components – High contrast CSS themes in the Fluid Skinning System (FSS) – UI Options component enables user customization • Fluid community has contributed to accessibility in the jQuery and jQuery UI libraries, including: – An API for adding ARIA roles and states – Cross-browser support for getting/setting an element's tabindex – Ongoing support and testing of jQuery UI widgets for accessibility • Even so, some accessibility issues remained... 7 – 8 October 2010 ÆGIS 1st International Conference, Seville, Spain 13
  14. 14. Accessibility in Fluid Infusion • Simple Text Inline Edit: – Allows a user to do quick edits to simple text without having to switch modes or screens. All work is done on the same interface, which helps the user maintain context. – Uses aria-live and aria-relevant. – A usability challenge is managing the transition between “button”- like and “textbox”-like behavior in a way that works effectively for all users. Our approach is to make increased use of tooltips for providing context-sensitive instructions. 7 – 8 October 2010 ÆGIS 1st International Conference, Seville, Spain 14
  15. 15. Accessibility in Fluid Infusion • Progress: – Provides a usable and accessible linear progress display for use on its own or with other Fluid components. – Uses role, aria-valuemin, aria-valuemax, aria-valuenow, aria-busy, and aria-valuetext. – In this case, we needed to deal with an issue in NVDA (a popular free and open-source Windows screen reader). We created a work-around and we also filed an issue with NVDA that was corrected in the subsequent release. 7 – 8 October 2010 ÆGIS 1st International Conference, Seville, Spain 15
  16. 16. Accessibility in Fluid Infusion • “Reorderer Family” (Layout Reorderer, List Reorderer, Grid Reorderer, Image Reorderer): – Allow users to rearrange elements on a page by drag-and-drop or keyboard shortcuts. – Uses aria-role, aria-selected, aria-disabled, aria-dropeffect, aria-dragged. – A usability challenge is the "wrap around" feature. It enables users with limited mobility to more efficiently reach their target, but the boundaries of the layout are not effectively communicated to screen readers. Upcoming improvements will enable users to add "hard stops" at the edges and will also provide additional information to screen reader users about spatial layout. 7 – 8 October 2010 ÆGIS 1st International Conference, Seville, Spain 16
  17. 17. Personalization • Finding accessible “one size fits all” solutions can be a challenge. So, Infusion includes the UI Options component, enabling users to customize the appearance of an application according to personal preference. 7 – 8 October 2010 ÆGIS 1st International Conference, Seville, Spain 17
  18. 18. Conclusion • Dynamic web applications continue to increase in both popularity among developers and in complexity. • But these are being built without regard to accessibility. • ARIA provides an important starting point and it is increasingly being adopted in JavaScript toolkits, Web browsers, and assistive technologies. • However, ARIA alone does not guarantee accessibility • Toolkit developers must focus on the overall usability of their products by users with disabilities. • Fluid Infusion illustrates this approach to both usability and accessibility, embracing a combination of ARIA, personalization, and other techniques. 7 – 8 October 2010 ÆGIS 1st International Conference, Seville, Spain 18
  19. 19. Thank You! • Inclusive Design Research Centre, OCAD University – http://idrc.ocad.ca/ • Fluid Project – http://fluidproject.org • Fluid Infusion – http://fluidproject.org/products/infusion/ 7 – 8 October 2010 ÆGIS 1st International Conference, Seville, Spain 19

×