Post on 08-May-2015
description
7 – 8 October 2010 ÆGIS 1st International Conference, Seville, Spain
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
ÆGIS 1st International Conference, Seville, Spain 27 – 8 October 2010
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
ÆGIS 1st International Conference, Seville, Spain 37 – 8 October 2010
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)
ÆGIS 1st International Conference, Seville, Spain 47 – 8 October 2010
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.
ÆGIS 1st International Conference, Seville, Spain 57 – 8 October 2010
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.).
ÆGIS 1st International Conference, Seville, Spain 67 – 8 October 2010
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.
ÆGIS 1st International Conference, Seville, Spain 77 – 8 October 2010
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.
ÆGIS 1st International Conference, Seville, Spain 87 – 8 October 2010
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.
ÆGIS 1st International Conference, Seville, Spain 97 – 8 October 2010
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?
ÆGIS 1st International Conference, Seville, Spain 107 – 8 October 2010
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.
ÆGIS 1st International Conference, Seville, Spain 117 – 8 October 2010
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
ÆGIS 1st International Conference, Seville, Spain 127 – 8 October 2010
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
ÆGIS 1st International Conference, Seville, Spain 137 – 8 October 2010
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...
ÆGIS 1st International Conference, Seville, Spain 147 – 8 October 2010
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.
ÆGIS 1st International Conference, Seville, Spain 157 – 8 October 2010
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.
ÆGIS 1st International Conference, Seville, Spain 167 – 8 October 2010
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.
ÆGIS 1st International Conference, Seville, Spain 177 – 8 October 2010
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.
ÆGIS 1st International Conference, Seville, Spain 187 – 8 October 2010
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.
ÆGIS 1st International Conference, Seville, Spain 197 – 8 October 2010
Thank You!
• Inclusive Design Research Centre, OCAD University– http://idrc.ocad.ca/
• Fluid Project– http://fluidproject.org
• Fluid Infusion– http://fluidproject.org/products/infusion/