Transcript
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
top related