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

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


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)


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.


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.).


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.


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.



• 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.



• For example, Fluid's “Inline Edit” component sometimes behaves like a button and other times like a textbox.

• And what about this?



• 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.


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


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


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...



• 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.



• 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.



• “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.


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.


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.


Thank You!

• Inclusive Design Research Centre, OCAD University– http://idrc.ocad.ca/

• Fluid Project– http://fluidproject.org

• Fluid Infusion– http://fluidproject.org/products/infusion/

Date post:	08-May-2015
Category:	Technology
Upload:	aegis-accessible-projects
View:	1,154 times
Download:	0 times

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

Technology