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

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