An Introduction to Accessible Rich Internet Applications (ARIA

wai-aria
ANINTRODUCTIONTO ACCESSIBLERICHINTERNETAPPLICATIONS
Patrick H. Lauke / The Paciello Group / AccessU / 15 May 2018

what is ARIA
and why do we need it ?

the problem
it's "easy" (in most cases) to make static web content accessible, but
nowadays the web strives to be an application platform
complex web applications require structures (e.g. interactive
controls) that go beyond what regular HTML offers (though some of
this introduced with HTML5 ... more on that later)

the problem
when building interactive controls, some (too many) web developers
go "all out" on the JavaScript/CSS, but ignore/sidestep regular HTML
controls completely

code examples here are
simpliﬁed
(but will hopefully convey the right concepts)

<div onclick="...">Test</div>
faked button
for a sighted mouse / touchscreen user this is a button...
but what about keyboard users?

<div tabindex="0" onclick="...">Test</div>
faked button with focus
now we can at least focus it... but can we activate it?

<div tabindex="0" onkeyup="..." onclick="...">Test</div>
faked button with focus and keyboard handling
for a sighted mouse / touchscreen / keyboard user this is a button...
but what about assistive technology users?

compare <div> to a real <button>
faked button versus real <button>

"test"
versus
"test button – to activate press
SPACE bar"

the problem
generic/inappropriate HTML elements, with extra JavaScript/CSS on
top...but they're still recognised and exposed as <span> , <div> , etc

the interplay of browser and
assistive technology

Operating systems and other platforms provide interfaces that expose
information about objects and events to assistive technologies
Java Accessibility API [JAPI], Microsoft Active Accessibility [MSAA], the Mac OS X
Accessibility Protocol [AXAPI], the Gnome Accessibility Toolkit (ATK) [ATK], and
IAccessible2 [IA2]

Marco Zehe: Why accessibility APIs matter

assistive technologies
•   NVDA (free)
•   Narrator (free)
•   JAWS
•   ZoomText
•   Dragon NaturallySpeaking
•   VoiceOver (free)
•   TalkBack (free)
•   ...

inspection tools
test using assistive technologies (e.g. screenreaders), however...
assistive technologies often use heuristics to repair
incomplete/broken accessibility API information - so we want to
check what's actually exposed to the OS/platform.
of course, browsers also have bugs/incomplete support...

Firefox Accessibility Inspector (version 61+)
(enable devtools.accessibility.enabled in about:config )

chrome://accessibility view of the raw accessibility tree

Accessibility Viewer (aViewer)

James Craig - Using ARIA 1.0 and the WebKit Accessibility Node
Inspector

Xcode Accessibility Inspector
(but for Chrome, remember to turn on accessibility mode in chrome://accessibility)

if you use custom (not
standard HTML) widgets,
use ARIA to ensure correct info
is exposed

W3C - Accessible Rich Internet Applications (WAI-ARIA) 1.1

ARIA deﬁnes HTML attributes
to convey correct role, state,
properties and value

at a high level, ARIA deﬁnes various role and aria-* attributes that
can be added to your markup

W3C - WAI-ARIA 1.1 - 5.3 Categorization of Roles
the whole model is vast and complex...and thankfully you don't need
to remember this

Roles are categorized as follows:
•   Abstract Roles: never used in markup directly - they serve only for
the categorization/deﬁnitions
•   Widget Roles: interactive controls - simple or composite (made up of
various components)
•   Document Structure Roles: deﬁne what content/structures represent
(e.g. headings, lists, groups)
•   Landmark Roles: identify key parts of a document/page
•   Live Region Roles: special areas of the page whose content is
dynamically updated and should be announced by AT
•   Window Roles: content that acts as a separate window (dialogs)

each role has "states and properties" (e.g. ARIA 1.1 deﬁnition for button )
implicit/inherited or deﬁned via aria-* attributes

this is all complex and
confusing...

as my former colleague Karl Groves succintly put it,
ARIA helps answer the questions:
what is this thing and what does it do?

what information does ARIA provide?
•   role: what type of "thing" is this? (e.g. 'button', 'main content')
•   state: what is its situation? (e.g. 'disabled', 'checked', 'expanded')
•   name: what is its name/label?
•   relationship: is it tied to any other elements in the page somehow?
this information is mapped by the browser to the operating system's
accessibility API and exposed to assistive technologies.
extra beneﬁt: once AT understands meaning/purpose, it can
automatically announce speciﬁc hints and prompts
(e.g. JAWS "... button - to activate, press SPACE bar")

<div tabindex="0"
role="button" onkeyup="..."
onclick="...">Test</div>
faked button with appropriate role

use ARIA to:
•   make custom widgets understandable to assistive technology users
•   programmatically indicate relationships between elements
•   notify users of dynamic updates
•   hide irrelevant visible content from assistive technology
•   remediation of inaccessible content without completely recoding

ARIA roles and attributes: restrictions
•   certain role s only make sense as part of a speciﬁc complex widget
•   some aria-* attributes are global
•   other aria-* attributes only make sense for particular role
•   not all roles/attributes are supported/implemented consistently
everywhere

what ARIA doesn't do...
ARIA is not magic : it only changes how assistive technology
interprets content. speciﬁcally, ARIA does not :
•   make an element focusable
•   provide appropriate keyboard bindings
•   change browser behavior
•   automatically maintain/update properties
•   change visible appearance
all of this is still your responsibility...

ARIA support
• Browsers: Firefox 3+, Internet Explorer 8+, Safari 4+ (Mac), Chrome 17+,
...
• Assistive technologies: JAWS 8+, Windows Eyes 5.5+, ZoomText,
VoiceOver, TalkBack, NVDA, ORCA, ...

"support" does not mean that
everything works, though...

in principle ARIA can be used
in all markup languages
(depending on browser support )

Using ARIA to enhance SVG accessibility

...but we'll just focus on
ARIA in HTML

If you can use a native HTML element [HTML5] or attribute with the
semantics and behaviour you require already built in, instead of re-
purposing an element and adding an ARIA role, state or property to
make it accessible, then do so.
“

you can use a <span> to behave as, and be exposed just like, a link...
<span tabindex="0" role="link"
onclick="document.location='...'"
onkeyup="..." >link</span>
example: link
...but why would you?
unless there's a very good reason, just use <a href="...">...</a>

2. don't change native
semantics
unless you really have to / know what you're doing

don't do this:
<h1 role="button">heading button</h1>
do this instead:
<h1><span role="button">heading button</span></h1>
otherwise the heading is no longer a heading
(e.g. AT users can't navigate to it quickly)

don't do this:
<ul role="navigation">
<li><a href="...">...</a></li>
...
</ul>
do this instead:
<div role="navigation">
<ul>
<li><a href="...">...</a></li>
...
</ul>
</div>
otherwise the list is no longer a list
(e.g. AT won't announce "list with X items...")

3. make interactive ARIA
controls keyboard accessible

All interactive widgets must be focusable and scripted to respond to
standard key strokes or key stroke combinations where applicable. [...]
Refer to the keyboard and structural navigation and design patterns
and widgets sections of the WAI-ARIA 1.1 Authoring Practices

4. don't "neutralise" focusable
elements

don't use role="presentation" or aria-hidden="true" on a visible
focusable element. Otherwise, users will navigate/focus onto
"nothing".

<button role="presentation">press me</button>
<button aria-hidden="true">press me</button>
<span tabindex="0" aria-hidden="true">...</span>

5. interactive elements must
have an accessible name

<span tabindex="0" role="button">
<span class="glyphicon glyphicon-remove"></span>
</span>

<span tabindex="0" role="button">
<span class="glyphicon glyphicon-remove">
<span class="...">Delete</span>
</span>
</span>
<span tabindex="0" role="button" title="Delete" >
</span>
refer to WAI-ARIA 1.1 - 5.2.7. Accessible Name Calculation

<span tabindex="0" role="button" aria-label="Delete" >
</span>
<span tabindex="0" role="button" aria-labelledby="..." >
</span>
...
<span id=" ... " class="...">Delete</span>
refer to WAI-ARIA 1.1 - 5.2.7. Accessible Name Calculation

Chrome DevTools' accessibility panel can help understand which
attributes contribute to an element's name (example)

WAI-ARIA spec can be dry/technical - use for reference
W3C - WAI-ARIA 1.1 Authoring Practices more digestible.

ARIA is used when
building/denoting things that
native HTML can't do

HTML5 introduced new
elements, element types,
attributes that solve some of
these situations

W3C HTML Accessibility API Mappings 1.0

HTML5 now also includes WAI-ARIA ...

...and you can validate pages with (static) ARIA validator.w3.org

common structures and widgets
(not an exhaustive list - enough to understand concepts)

using ARIA to provide
structure

<p class="1" role="heading" aria-level="1" >Heading 1</p>
...
<p class="h2" role="heading" aria-level="2" >Heading 2</p>
...
<p class="h3" role="heading" aria-level="3" >Heading 3</p>
...
example: headings
• add role="heading"
• if more than one hierarchical level, and can't be inferred from
structure, add explicit aria-level

<div role="list" >
<div role="listitem" >...</div>
...
</div>
example: list/listitem
• add role="list" and role="listitem"
• generally more complex (big markup structures that boil down to
essentially "a list of things...")

if your page/app uses inappropriate markup, ARIA can be used to
remove semantic meaning. useful for remediation if markup cannot
be changed.
<table role="presentation" >
<tr>
<td>Layout column 1</td>
<td>Layout column 2</td>
</tr>
</table>
example: layout table remediation
ARIA 1.1 introduced role="none" as an alias for
role="presentation" – they are equivalent (and older browsers/AT
likely better off still using role="presentation" )

adapted from HTML5 Doctor - Designing a blog with html5
example: blog structure

why deﬁne landmarks?
•   users of assistive technologies can more easily ﬁnd areas of your
page/app
•   AT keyboard controls to navigate to/between landmarks
•   overview dialogs listing all landmarks (e.g. NVDA)

example: blog structure with ARIA

adapted from HTML5 Doctor - Designing a blog with html5
example: blog structure with HTML5

using ARIA for
simple/standalone widgets

my JavaScript sucks...
(but will hopefully convey the right concepts)

<span class="...">Button?</span>
<div class="...">Button?</div>
<a href="#" class="...">Button?</a>
example: button
while using a link is slightly less evil, as at least it receives keyboard
focus by default, it's still not correct: links are meant for navigation ,
not in-page actions or form submissions

<span tabindex="0" class="..." role="button" >Button!</span>
<div tabindex="0" class="..." role="button" >Button!</div>
<a href="#" class="..." role="button" >Button!</a>
•   add role="button"
•   make sure it's focusable
•   add handling of SPACE (and in some cases ENTER )

assuming there's a click handler:
foo.addEventListener('keyup', function(e) {
// Space key
if (e.keyCode === 32) {
// stop default behavior (usually, scrolling)
e.preventDefault();
// trigger the existing click behavior
this.click();
}
});

you could even do it "in one go" for all your faked buttons, assuming
they have the correct role="button" , with querySelectorAll and
attribute selectors:
var buttons = document.querySelectorAll("[role='button']");
for (var i=0; i<buttons.length; i++) {
buttons[i].addEventListener('keyup', function(e) {
if (e.keyCode === 32) {
e.preventDefault();
this.click();
}
});
}

•   default HTML does not offer a simple on/off toggle
•   "CSS only" <input type="checkbox"> hacks – but these may be
confusing to AT users/not always appropriate
•   ARIA can be used to enhance native elements – start off with closest
match, like an actual <button> , and extend from there

let's assume we implement this with JavaScript to purely add a CSS
classname:
<button class="...">Toggle</button>
<button class="... toggled ">Toggle</button>
example: toggle
in real applications, you'll likely keep track of the state in some additional way –
this is only for illustrative purposes

<button class="..." aria-pressed="false" >Toggle</button>
<button class="... toggled " aria-pressed="true" >Toggle</button>
foo.getAttribute("aria-pressed");
foo.setAttribute("aria-pressed", "true");
foo.setAttribute("aria-pressed", "false");
add aria-pressed and dynamically change its value
example: toggle with aria-pressed
• these are HTML attributes and must be read/written using
getAttribute() / setAttribute()
• and even boolean attributes take string values

<button class="... " aria-pressed="true" >Toggle</button>
button[aria-pressed="true"] { ... }
• bonus: use CSS attribute selectors – no need for extra CSS class (this
also helps debugging – easier to spot visually when ARIA
roles/properties aren't correctly set)
example: toggle with aria-pressed and simpliﬁed CSS
toggled
button.toggled { ... }

if your actual label text changes when toggling, aria-pressed is
likely not necessary (could actually be more confusing for user)
<button ...>Mute</button>
if (...) {
this.innerHTML = "Mute";
...
} else {
this.innerHTML = "Unmute";
...
}
example: toggle with a changing name/label

<span tabindex="0" class="...">Option</span>
<span tabindex="0" class="... checked">Option</span>
example: checkbox

<span tabindex="0" role="checkbox"
aria-checked="false" class="...">Option</span>
<span tabindex="0" role="checkbox"
aria-checked="true" class="... checked">Option</span>
•   add role="checkbox"
•   make sure it's focusable
•   add handling of SPACE
•   add aria-checked and dynamically change its value
example: checkbox with aria-checked

<span tabindex="0" class="...">Yes</span>
<span tabindex="0" class="... selected">No</span>
<span tabindex="0" class="...">Maybe</span>
example: radio button

<span tabindex="0" role="radio"
aria-checked="false" class="...">Yes</span>
aria-checked="true" class="... selected">No</span>
aria-checked="false" class="...">Maybe</span>
•   add role="radio"
•   add handling of SPACE and cursor keys
•   add aria-checked and dynamically change its value
•   should be contained inside role="radiogroup" (cfr. <fieldset> )
example: radio button with ARIA (but note incomplete focus handling)

<button ...>More details</button>
<div class="show" ...> ... </div>
example: disclosure widget

<button ... aria-expanded="true"
aria-controls="disclosure1" >More details</button>
<div class="show" ... id="disclosure1"> ... </div>
example: disclosure widget with aria-expanded / aria-controls

• ARIA Practices 1.0 suggested using a tab panel pattern (we'll brieﬂy
look at this in a moment)
• ARIA Practices 1.1 is more pragmatic: an accordion is seen simply as a
series of disclosure widgets (see ARIA Practices 1.1 - 3.1 Accordion)

<button ... aria-expanded="true"
aria-controls="accordion1" >Item 1</button>
<div class="show" ... id="accordion1"> ... </div>
<button ... aria-expanded="false"
<button ... aria-expanded="false"
example: accordion using disclosure widgets

<button>Launch...</button>
...
<div ... >
<div>My custom dialog</div>
...
</div>
example: modal dialog
...but focus handling is not really correct...

• when triggered, focus should move to the dialog
• focus should be maintained inside the dialog
example: modal dialog with focus management
...but for assistive tech users, it's still not clear what is happening...

...
<div role="dialog"
aria-labelledby="dialog-header"
aria-describedby="modalDialogDescription" ... >
<div id="modalDialogHeader">My custom dialog</div>
<div id="modalDialogDescription">
...
</div>
...
</div>
example: modal dialog with focus management and ARIA
...almost perfect, but assistive tech users can still navigate out of the
modal...

<div id="wrapper">>
</div>
...
<div role="dialog" ...</div>
function openModal() {
document.getElementById("wrapper").setAttribute("aria-hidden","true"
...
}
function closeModal() {
document.getElementById("wrapper").removeAttribute("aria-hidden");
...
}
example: modal dialog with aria-hidden
note: aria-hidden does not prevent regular keyboard focus!

function openModal() {
document.getElementById("wrapper").setAttribute("inert","");
...
}
function closeModal() {
document.getElementById("wrapper").removeAttribute("inert");
...
}
example: modal dialog with inert
note: inert does hide elements from accessibility tree and remove
behavior such as keyboard focusability. however, not natively
supported yet – use the inert polyﬁll

...
<div role="dialog" aria-modal="true"
aria-labelledby="dialog-header"
aria-describedby="modalDialogDescription" ... >
<div id="modalDialogHeader">My custom dialog</div>
<div id="modalDialogDescription">
...
</div>
...
</div>
example: modal dialog with aria-modal (new in ARIA 1.1)
...but you still need to do the focus management yourself...

complex widgets and focus
•   some complex widgets (group of radio buttons, menus, listboxes, tab
lists) only have a single "tab stop"
•   focus/interactions within the widget are handled programmatically
•   TAB / SHIFT + TAB moves to the next widget, not to sub-components

keyboard navigation within widgets
• either: "roving" tabindex (only one element inside widget has
tabindex="0" , all others tabindex="-1" )
• or: focus remains on widget itself, denote active child element with
aria-activedescendant (and manually scroll into view, provide
highlight via CSS)
W3C WAI-ARIA 1.1 Authoring Practices - 5.6 Keyboard Navigation
Inside Components

<span tabindex="-1" role="radio"
aria-checked="false" class="...">Yes</span>
aria-checked="true" class="... selected">No</span>
<span tabindex="-1" role="radio"
aria-checked="false" class="...">Maybe</span>
only one radio button inside the group has focus. changing the
selection using CURSOR keys, dynamically changes tabindex , aria-
checked and sets focus() on the newly selected radio button
example: ARIA Practices 1.1 - Radio Group Using Roving tabindex

not all complex widgets lend themselves to "roving" tabindex – e.g.
role="combobox" needs aria-activedescendant , as actual focus
must remain inside the textbox.
example: ARIA Practices 1.1 Combobox with Listbox Popup
this approach can be complex, and not always supported by assistive
technologies (particularly on mobile).

making assistive technology
aware of content changes

<div id="output"></div>
var o = document.getElementById("output");
o.innerHTML = "Surprise!"; // show the notification
example: notiﬁcation as result of button press
but how can AT users be made aware of the notiﬁcation / content
change?

one way to notify users of assistive technologies of new content (a
new element added to the page, made visible, a change in text) is to
move focus() programmatically to it
<div id="output" tabindex="-1" ></div>
o.focus(); // move focus to the notification
but this is not always possible, as it would interrupt the user's current
actions...
example: notiﬁcation via focus() and a more problematic example
simulating a long-running function.

ARIA live regions
• announce a change on content without moving focus to it
• aria-live : off (default), polite , assertive

<div id="output" aria-live="polite" ></div>
example: notification via aria-live
bonus points: set aria-disabled="true" on the control, and
optionally aria-busy="true" on the notification / section of the page
that is getting updated. see notification via aria-live , with aria-
busy and aria-disabled

• some role s have implicit live region (e.g. role="status" and
role="alert" ), as do some markup elements (e.g. <output> )

<span role="status" >
some form of status bar message...
</span>
example: status bar
<span role="alert" >
an alert message (no user interaction)
</span>
example: alert

ARIA live regions need to be "primed" ﬁrst – the browser and AT need
to realize there's a live region, and start watching for changes.
• sending something with role="alert" as part of your static HTML
document has no effect – AT won't announce this when the page is
loading
• creating a dynamic element with aria-live="..." or an implicit
live region role and ﬁlling it with content right away will (depending
on timing) usually not give browser/AT enough time to "see" the
element and notice the change ... again resulting in no announcement

// create a new div element
var newDiv = document.createElement("div");
// set aria-live property
newDiv.setAttribute("aria-live", "polite");
// and give it some content
var newContent = document.createTextNode("Surprise!");
// add the text node to the newly created div
newDiv.appendChild(newContent);
// add the new div to the page
document.body.appendChild(newDiv);
// ... WON'T ACTUALLY WORK

by default, live regions only announce any new/changed content.
however, this can be controlled:
• aria-atomic : true / false ("treat the live region as one atomic unit
and announce everything")
example: live region clock and live region clock with aria-atomic
(there's also aria-relevant , but it is badly supported/pointless - see Aaron
Leventhal and Rob Dodson: Why authors should avoid aria-relevant).

ARIA has many more
complex/composite widgets and
structures

<div role="tablist" ...>
<div role="tab" aria-controls="panel1"
aria-selected="true" ...>Tab 1</div>
<div role="tab" aria-controls="panel2" ...>Tab 2</div>
<div role="tab" aria-controls="panel3" ...>Tab 2</div>
</div>
<div role="tabpanel" id="panel1" aria-hidden="false" >...</div>
<div role="tabpanel" id="panel2" aria-hidden="true" >...</div>
<div role="tabpanel" id="panel3" aria-hidden="true" >...</div>
example: ARIA Practices 1.1 Tabs with Automatic Activation
variations on this theme: Marco Zehe - Advanced ARIA tip #1: Tabs in
web apps
not appropriate if you're just marking up a site navigation...

some shortcomings / problems
with ARIA

as useful as ARIA is, it is far from perfect ...
•   some patterns rooted deeply in native (Windows) application
paradigms – and as a result, quite limited/restrictive
•   straying from these patterns / using ARIA incorrectly can make
things worse for users
•   certain roles/patterns deﬁne speciﬁc keyboard interactions – but
work badly or not at all in touchscreen + AT scenarios
•   particularly for new roles/attributes (ARIA 1.1) and complex patterns,
browser and AT support may be lacking

<div role="menubar" >
<div role="menuitem" ...> ...
<div role="menu" </div>
<div role="menuitem" ...>...</div>
...
</div>
</div>
...
</div>
example: ARIA Practices 1.1 Navigation Menubar
most suitable for real "application-like" web-apps - arguably not
appropriate for general "website navigation"

ARIA 1.1 menu (role)
speciﬁc child elements only ( menuitem , menuitemcheckbox , menuitemradio )

Using ARIA - 2.15 ARIA Design Patterns and Touch Device Support

ARIA Practices 1.1 - Horizontal Slider on Android / Chrome / TalkBack
(use volume keys...)

ARIA Practices 1.1 - Horizontal Slider on iOS / Safari / VoiceOver
(swipe up or down...)

ARIA Practices 1.1 - Combobox with Listbox Popup
on Android / Chrome / TalkBack

ARIA Practices 1.1 - Combobox with Listbox Popup
on iOS / Safari / VoiceOver

frameworks, web components,
angular, etc?

•   not everybody codes their complex applications from scratch using
hand-made HTML/JavaScript/CSS
•   many ready-made libraries, scripts and frameworks offer at least
basic ARIA support (by default, or as an "optional" setting or module)
•   particularly open source projects offer good opportunities to get
involved – ﬁle issues, submit pull requests, improve documentation
•   lack of accessibility/ARIA support likely not down to malice, but a
lack of knowledge or even understanding of the problem...

AngularJS Developer Guide - Accessibility with ngAria

what ARIA is/isn't ...
•   ARIA conveys "what is this thing and what does it do?" to assistive
technologies
•   ARIA does not inﬂuence browser behavior itself – you need to manage
keyboard handling, state, etc. yourself
•   ARIA is vast and complex, depends on browser/AT support, has
shortcomings

pragmatic approach to using ARIA
•   understand/break-up complex app into simple component elements
•   you don't always need ARIA – appropriate HTML usually best
•   No ARIA is better than Bad ARIA
•   consult ARIA Practices to see if they match an existing pattern
•   follow the rules of ARIA
•   check main ARIA speciﬁcation for correct syntax, expected attributes,
valid values
•   test in actual browser/AT

get in touch
@patrick_h_lauke
github.com/patrickhlauke/aria
paciellogroup.com
splintered.co.uk

An Introduction to Accessible Rich Internet Applications (ARIA

Recommended

Recommended

More Related Content

Similar to An Introduction to Accessible Rich Internet Applications (ARIA

Similar to An Introduction to Accessible Rich Internet Applications (ARIA (20)

More from Patrick Lauke

More from Patrick Lauke (20)

Recently uploaded

Recently uploaded (20)

An Introduction to Accessible Rich Internet Applications (ARIA