ARIA and JavaScript Accessibility

ARIA and JavaScript AccessibilityPaul BohmanDirector of Training, Deque

Note: Some slides have speakers notes with additional content

The First Rule of Using ARIA:

NEVER use ARIA unless you have to.(Use native HTML controls and elements whenever possible.)

The 2nd Rule of Using ARIA:

ALWAYS use ARIA when you have to.(Some things can’t be done any other way, especially with dynamic content.)

The Third Rule of Using ARIA:

Go All In. Learn How to use ARIA

right.(Using ARIA incorrectly can actually be worse than not using it at all.)

Going all in...

Halfway solutions or hybrids make adoption harder.(Like the unsuccessful attempt in the late 1970s in the U.S. to gradually convert us to the metric system)

The Fourth Rule of Using ARIA:

Test the results with real screen readers.(It’s the only way to know if your code actually does what it’s supposed to.)

Why ARIA?

ARIA does NOT benefit:People who are deafPeople who are color-blindSighted keyboard usersPeople with Low vision (unless they use a screen reader)

People with cognitive disabilities (unless they use a screen reader)

ARIA DOES benefit:People who use screen readers(And to a lesser extent people who use voice recognition)

Web Applications and Dynamic Content ARIA is designed to make web applications behave more like native applications

It takes advantage of the accessibility API in operating systems and browsers

The Accessibility InspectorIn Mac OSXXCode > Open Developer Tool > Accessibility Inspector

Hover mouse cursor over the object to have it list the accessibility properties

Accessibility Inspector

How a Developer Can Make a Screen Reader Say SomethingLoad a new page (e.g. links, form

submission… or reload the same page)Move the keyboard focus to the new contentUse an ARIA live region to make an announcement (usually without moving focus)

Add or alter ARIA attributes

Live AnnouncementsFor when you need to say something to the user NOW! (or as soon as the screen reader is finished with what it’s already saying; “polite” or “assertive” modes)

Live RegionsIt is an empty container, waiting for content to be injected by JavaScript:

Before:<div aria-live=”polite”></div>

After: <div aria-live=”polite”>Hello!</div>

Live RegionsThe container should be on the page on page load

The container must be empty to begin with(don’t pre-load the live region with content)

Roles, Names, Values

ARIA communicates information about elements and widgets, including dynamic changes to those elements and widgets

Role

What kind of an element/widget is it?

Landmark Roles articlebannercomplementarymain

navigationregionsearchcontentinfo

Screen readers allow users to navigate landmarks with keyboard shortcuts

Widget Roles alertalertdialogapplicationdialoggrouplogmarqueemenumenubarmenuitem

menuitemcheckboxmenuitemradioprogressbarseparatorsliderspinbuttonstatustabtablisttabpanel

timertoolbartooltiptreetreegridtreeitem

“Pseudo HTML” Rolesbuttoncheckboxcolumnheadercomboboxcontentinfoformgridgridcellheadingimg

linklistboxlistitemoptionradioradiogrouprowrowgrouprowheaderscrollbartextbox

Content Type Rolesdocument (normal “browse mode”)application (widgets; use only when the widget needs to control keyboard event handlers)

presentation (overrides the native semantic meaning of an element; essentially turns it into a generic <div> or <span>)

Abstract Rolescommandcompositeinputlandmarkrangesectionsectionheadselectstructurewidget

Note: You can’t use these in your code. These are just categories of roles. I included them here for the sake of completeness.

Names (Labels)What is this particular element/widget called?Label inside element:<div aria-label=”Volume control”>...</div>

Label outside element: <div id=”volControl”>Volume Control</div><div aria-labelledby=”volControl”>...</div>

Value (Properties)What attributes does this element/widget have?Examples: aria-haspopup=”true”

aria-valuemin=”0”

aria-valuemax=”100”

Value (States)What can this object do?What is its status right now?Examples: aria-selected=”true”aria-expanded=”false”aria-checked=”true”

Value (Relationships)How is this widget related to other widgets?Examples: aria-controls=”panel1”

aria-owns=”widget2”

aria-flowto=”div1” (not well supported yet)

Keyboard Behaviors of ARIA Widgets

Navigation of ARIA WidgetsTab to the ARIA widgetTab past it (not within it)… OR…Use arrow keys to navigate within it

Note that this is the general model, for things like tab lists, tree views, application menus, etc. Not everything you can do with ARIA would be considered a widget, so there are exceptions to the above keyboard pattern.

Keyboard Focus ManagementKeyboard activates a buttonContent appearsThe keyboard focus goes to the new content

The user submits data or dismisses the content

The focus goes back to the original button(or to an alternate logical location)

Example: Expandable RegionFor example, the source code regions on this page:https://dequeuniversity.com/library/aria/tabpanels-accordions/tabpanel

Example: Tab Panel Widgethttps://dequeuniversity.com/library/aria/tabpanels-accordions/tabpanel

Example: Alert Dialoghttps://dequeuniversity.com/library/aria/popups-dialogs/sf-alert-dialog

AJAXThe worst sound a person can hear after activating a button is… silence

Always ensure the screen reader updates the user when important updates happen

AJAX: Virtual Buffer IssuesYou MUST insert an intentional pause AFTER the AJAX content loads

The pause is necessary to allow the screen reader to populate its virtual buffer

A typical pause can be about 1 second

ARIA ResourcesDeque University: https://dequeuniversity.com/library/

Open AJAX Alliance: http://oaa-accessibility.org/examples/

ARIA specification: http://www.w3.org/TR/wai-aria/

ARIA authoring practices: http://www.w3.org/TR/wai-aria-practices/

ARIA roles model: http://www.w3.org/TR/wai-aria/roles