SlideShare a Scribd company logo
1 of 170
Download to read offline
wai-aria
ANINTRODUCTIONTO ACCESSIBLERICHINTERNETAPPLICATIONS
Patrick H. Lauke / The Paciello Group
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)
jQuery UI
webcomponents.org
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 (where native HTML equivalents are available)
and ignore how these controls are exposed to assistive technologies
accessibility is a broad subject
•   the general concept of accessibility covers a large spectrum of
disabilities / user needs
•   accessibility does not just mean "blind users with screen readers"
•   sighted keyboard users, users with colour blindness / deficiencies,
deaf / hard of hearing users, users with cognitive disabilities...
•   however, ARIA is (almost) exclusively about how to ensure that web
content is correctly conveyed to assistive technologies (screen
readers, screen magnifiers with screen reading capability, etc)
github.com/patrickhlauke/aria
code examples here are
simplified
(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 provide interfaces that expose information about
objects and events to assistive technologies
(e.g. Microsoft Active Accessibility [MSAA], the Mac OS X
Accessibility Protocol [AXAPI], IAccessible2 [IA2])
separate from the DOM, browsers have an "accessibility tree"
(see chrome://accessibility for an example)
Marco Zehe: Why accessibility APIs matter
assistive technologies
assistive technologies
•   NVDA (free)
•   Narrator (free)
•   JAWS
•   ZoomText
•   Dragon NaturallySpeaking
•   VoiceOver (free)
•   TalkBack (free)
•   ...
inspection tools
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 DevTools Accessibility panel
Edge DevTools accessible properties
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)
compare <div> to a real <button>
faked button versus real <button>
if you use custom (not
standard HTML) widgets,
use ARIA to ensure correct
info is exposed
what is ARIA?
W3C - Accessible Rich Internet Applications (WAI-ARIA) 1.1
ARIA defines HTML attributes
to convey correct role, state,
properties and value
at a high level, ARIA defines 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/definitions
•    Widget Roles: interactive controls - simple or composite (made up of
various components)
•    Document Structure Roles: define 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 definition for button )
implicit/inherited or defined via aria-* attributes
this is all complex and
confusing...
as my former colleague Karl Groves succinctly 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 benefit: once AT understands meaning/purpose, it can
automatically announce specific 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 specific 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. specifically, 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...
no ARIA is better than bad ARIA
•   ARIA roles/attributes are a "promise" to users / assistive technologies
(e.g. "this component is actually a button...") – you must ensure that it
then behaves correctly
•   if you're not sure how to represent a particular complex widget or
control, don't just throw ARIA roles and attributes at your markup –
you're more likely to make things worse / more confusing / non-
functional for assistive technology users
W3C - WAI-ARIA 1.1 Authoring Practices
WAI-ARIA spec can be dry/technical - use for reference
W3C - WAI-ARIA 1.1 Authoring Practices more digestible.
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
W3C - ARIA in HTML
W3C - Using ARIA
the 5 rules of ARIA use
1. don't use ARIA
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>
otherwise the heading is no longer a heading
(e.g. AT users can't navigate to it quickly)
you can do this instead:
<h1><span role="button">heading button</span></h1>
or, in accordance with the first rule or ARIA:
<h1><button>heading button</button></h1>
example: heading button
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>
or list is no longer a list (e.g. AT won't say "list with X items...")
example: list navigation
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".
<!-- don't do this... -->
<button role="presentation">press me</button>
<button aria-hidden="true">press me</button>
<span tabindex="0" aria-hidden="true">...</span>
example: neutralised elements
Chrome DevTools indicates when a node is hidden
(directly, or due to an ancestor being hidden)
aria-hidden removes nodes from the accessibility tree
(as seen here in Firefox's accessibility inspector)
5. interactive elements must
have an accessible name
<!-- don't do this... -->
<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 class="glyphicon glyphicon-remove"></span>
</span>
refer to WAI-ARIA 1.1 - 5.2.7. Accessible Name Calculation
<span tabindex="0" role="button" aria-label="Delete" >
<span class="glyphicon glyphicon-remove"></span>
</span>
<span tabindex="0" role="button" aria-labelledby="..." >
<span class="glyphicon glyphicon-remove"></span>
</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: accessible name calculation
side note: aria-label / aria-labelledby / aria-describedby and
arbitrary elements (see developer.paciellogroup.com)
ARIA and HTML5
ARIA and HTML5
•   ARIA is used when building things that native HTML can't do
•   for many years, ARIA was a "bridging technology" to overcome HTML
semantic limitations
•   HTML5 introduced new elements, element types, attributes that solve
some of these situations
•   there are still things that HTML can't express, so ARIA is here to stay...
example: HTML5 range input
W3C HTML Accessibility API Mappings 1.0
HTML5 accessibility
of course you can (and for many complex widgets, must) still use
WAI-ARIA in HTML5
side note: 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 role="listitem" >...</div>
<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...")
<img> is identified as an image by assistive technologies, and you
can provide> alternative text.
<img src="..." alt="alternative text">
if you're using embedded <svg> , use ARIA to achieve the same:
<svg role="img" aria-label="alternative text" > ... </svg>
example: embedded SVG image
removing semantics
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" )
landmarks
adapted from HTML5 Doctor - Designing a blog with html5
example: blog structure
why define landmarks?
•   users of assistive technologies can more easily find 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
doesn't HTML5 solve this?
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)
button
<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();
}
});
}
toggle button
•   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 simplified 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 and ARIA versus toggle
with a changing name/label only
checkbox
<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
radio button
<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>
<span tabindex="0" role="radio"
aria-checked="true" class="... selected">No</span>
<span tabindex="0" role="radio"
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)
disclosure widget
<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
accordion
•   ARIA Practices 1.0 suggested using a tab panel pattern (we'll briefly
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"
aria-controls="accordion2" >Item 2</button>
<div class="show" ... id="accordion2"> ... </div>
<button ... aria-expanded="false"
aria-controls="accordion3" >Item 3</button>
<div class="show" ... id="accordion3"> ... </div>
example: accordion using disclosure widgets
modal dialog
<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...
<button>Launch...</button>
...
<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">
<button>Launch...</button>
</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 polyfill
<button>Launch...</button>
...
<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...
managing focus
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>
<span tabindex="0" role="radio"
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).
live regions
making assistive technology
aware of content changes
<div id="output"></div>
var o = document.getElementById("output");
o.innerHTML = "Surprise!"; // show the notification
example: notification as result of button press
but how can AT users be made aware of the notification / 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>
var o = document.getElementById("output");
o.innerHTML = "Surprise!"; // show the notification
o.focus(); // move focus to the notification
but this is not always possible, as it would interrupt the user's current
actions...
example: notification 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>
var o = document.getElementById("output");
o.innerHTML = "Surprise!"; // show the notification
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" first – 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 filling 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
Mozilla Developer Network: ARIA Live Regions
// 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
example:
tab panels
<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">...</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: 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 (Windows95 style) 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 define specific 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
example:
menu/menubar
<div role="menubar" >
<div role="menuitem" ...>...</div>
<div role="menu" >
<div role="menuitem" ...>...</div>
<div role="menuitem" ...>...</div>
<div role="menuitem" ...>...</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)
specific child elements only ( menuitem , menuitemcheckbox , menuitemradio )
menu with a form control - not a valid ARIA menu...
example:
touchscreen + assistive
technology
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, react, 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 – file 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...
Bootstrap - Accessibility
AngularJS Developer Guide - Accessibility with ngAria
React - Accessibility
recap...
ARIA is not a magic bullet
what ARIA is/isn't ...
•   ARIA conveys "what is this thing and what does it do?" to assistive
technologies
•   ARIA does not influence 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 specification 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

More Related Content

What's hot

Modern development paradigms
Modern development paradigmsModern development paradigms
Modern development paradigmsIvano Malavolta
 
Customizing ERModernLook Applications
Customizing ERModernLook ApplicationsCustomizing ERModernLook Applications
Customizing ERModernLook ApplicationsWO Community
 
[2015/2016] HTML5 and CSS3 Refresher
[2015/2016] HTML5 and CSS3 Refresher[2015/2016] HTML5 and CSS3 Refresher
[2015/2016] HTML5 and CSS3 RefresherIvano Malavolta
 
ARIA Techniques for Accessible Web Forms
ARIA Techniques for Accessible Web FormsARIA Techniques for Accessible Web Forms
ARIA Techniques for Accessible Web FormsAidan Tierney
 
Busy Developer's Guide to Windows 8 HTML/JavaScript Apps
Busy Developer's Guide to Windows 8 HTML/JavaScript AppsBusy Developer's Guide to Windows 8 HTML/JavaScript Apps
Busy Developer's Guide to Windows 8 HTML/JavaScript AppsJAX London
 
Web Accessibility - We're All In This Together!
Web Accessibility - We're All In This Together!Web Accessibility - We're All In This Together!
Web Accessibility - We're All In This Together!Andrew Ronksley
 
netmind - Primer Contacto con el Desarrollo de Aplicaciones para Windows 8
netmind - Primer Contacto con el Desarrollo de Aplicaciones para Windows 8netmind - Primer Contacto con el Desarrollo de Aplicaciones para Windows 8
netmind - Primer Contacto con el Desarrollo de Aplicaciones para Windows 8netmind
 
Web Accessibility for the 21st Century
Web Accessibility for the 21st CenturyWeb Accessibility for the 21st Century
Web Accessibility for the 21st Centurydreamwidth
 

What's hot (8)

Modern development paradigms
Modern development paradigmsModern development paradigms
Modern development paradigms
 
Customizing ERModernLook Applications
Customizing ERModernLook ApplicationsCustomizing ERModernLook Applications
Customizing ERModernLook Applications
 
[2015/2016] HTML5 and CSS3 Refresher
[2015/2016] HTML5 and CSS3 Refresher[2015/2016] HTML5 and CSS3 Refresher
[2015/2016] HTML5 and CSS3 Refresher
 
ARIA Techniques for Accessible Web Forms
ARIA Techniques for Accessible Web FormsARIA Techniques for Accessible Web Forms
ARIA Techniques for Accessible Web Forms
 
Busy Developer's Guide to Windows 8 HTML/JavaScript Apps
Busy Developer's Guide to Windows 8 HTML/JavaScript AppsBusy Developer's Guide to Windows 8 HTML/JavaScript Apps
Busy Developer's Guide to Windows 8 HTML/JavaScript Apps
 
Web Accessibility - We're All In This Together!
Web Accessibility - We're All In This Together!Web Accessibility - We're All In This Together!
Web Accessibility - We're All In This Together!
 
netmind - Primer Contacto con el Desarrollo de Aplicaciones para Windows 8
netmind - Primer Contacto con el Desarrollo de Aplicaciones para Windows 8netmind - Primer Contacto con el Desarrollo de Aplicaciones para Windows 8
netmind - Primer Contacto con el Desarrollo de Aplicaciones para Windows 8
 
Web Accessibility for the 21st Century
Web Accessibility for the 21st CenturyWeb Accessibility for the 21st Century
Web Accessibility for the 21st Century
 

Similar to WAI-ARIA An introduction to Accessible Rich Internet Applications / CSS Minsk JS / 22 September 2018

WAI-ARIA - an introduction to accessible rich internet applications (1 day wo...
WAI-ARIA - an introduction to accessible rich internet applications (1 day wo...WAI-ARIA - an introduction to accessible rich internet applications (1 day wo...
WAI-ARIA - an introduction to accessible rich internet applications (1 day wo...Patrick Lauke
 
Accessibility of HTML5 and Rich Internet Applications - CSUN 2012
Accessibility of HTML5 and Rich Internet Applications - CSUN 2012Accessibility of HTML5 and Rich Internet Applications - CSUN 2012
Accessibility of HTML5 and Rich Internet Applications - CSUN 2012Steven Faulkner
 
Too much accessibility: Good intentions, badly implemented
Too much accessibility: Good intentions, badly implementedToo much accessibility: Good intentions, badly implemented
Too much accessibility: Good intentions, badly implementedGabriel Porras
 
Too much accessibility - good intentions, badly implemented / Public Sector F...
Too much accessibility - good intentions, badly implemented / Public Sector F...Too much accessibility - good intentions, badly implemented / Public Sector F...
Too much accessibility - good intentions, badly implemented / Public Sector F...Patrick Lauke
 
An Introduction to WAI-ARIA
An Introduction to WAI-ARIAAn Introduction to WAI-ARIA
An Introduction to WAI-ARIAIWMW
 
ARIA and JavaScript Accessibility
ARIA and JavaScript AccessibilityARIA and JavaScript Accessibility
ARIA and JavaScript AccessibilityPaul Bohman
 
Making your jQuery Plugins More Accessible
Making your jQuery Plugins More AccessibleMaking your jQuery Plugins More Accessible
Making your jQuery Plugins More Accessiblecolinbdclark
 
Web accessibility - WAI-ARIA a small introduction
Web accessibility - WAI-ARIA a small introductionWeb accessibility - WAI-ARIA a small introduction
Web accessibility - WAI-ARIA a small introductionGeoffroy Baylaender
 
Intro to Web Accessibility: Koombea TechTalks
Intro to Web Accessibility: Koombea TechTalksIntro to Web Accessibility: Koombea TechTalks
Intro to Web Accessibility: Koombea TechTalksKoombea
 
Semantic accessibility
Semantic accessibilitySemantic accessibility
Semantic accessibilityIan Stuart
 
HTML5 Accessibility - Is it ready yet?
HTML5 Accessibility - Is it ready yet?HTML5 Accessibility - Is it ready yet?
HTML5 Accessibility - Is it ready yet?Steven Faulkner
 
Front End Frameworks - are they accessible
Front End Frameworks - are they accessibleFront End Frameworks - are they accessible
Front End Frameworks - are they accessibleRuss Weakley
 
Testing For Web Accessibility
Testing For Web AccessibilityTesting For Web Accessibility
Testing For Web AccessibilityHagai Asaban
 
The Inclusive Web: hands-on with HTML5 and jQuery
The Inclusive Web: hands-on with HTML5 and jQueryThe Inclusive Web: hands-on with HTML5 and jQuery
The Inclusive Web: hands-on with HTML5 and jQuerycolinbdclark
 
The Recipe for Making Accessible Widgets!
The Recipe for Making Accessible Widgets!The Recipe for Making Accessible Widgets!
The Recipe for Making Accessible Widgets!Rabab Gomaa
 
How Accessibility Made Me a Better Developer
How Accessibility Made Me a Better DeveloperHow Accessibility Made Me a Better Developer
How Accessibility Made Me a Better DeveloperBilly Gregory
 
Web accessibility workshop 4
Web accessibility workshop 4Web accessibility workshop 4
Web accessibility workshop 4Vladimir Tomberg
 
ARIA_11_12_Practical_Perspective.pptx
ARIA_11_12_Practical_Perspective.pptxARIA_11_12_Practical_Perspective.pptx
ARIA_11_12_Practical_Perspective.pptxMarkSteadman7
 

Similar to WAI-ARIA An introduction to Accessible Rich Internet Applications / CSS Minsk JS / 22 September 2018 (20)

WAI-ARIA - an introduction to accessible rich internet applications (1 day wo...
WAI-ARIA - an introduction to accessible rich internet applications (1 day wo...WAI-ARIA - an introduction to accessible rich internet applications (1 day wo...
WAI-ARIA - an introduction to accessible rich internet applications (1 day wo...
 
Accessibility of HTML5 and Rich Internet Applications - CSUN 2012
Accessibility of HTML5 and Rich Internet Applications - CSUN 2012Accessibility of HTML5 and Rich Internet Applications - CSUN 2012
Accessibility of HTML5 and Rich Internet Applications - CSUN 2012
 
Too much accessibility: Good intentions, badly implemented
Too much accessibility: Good intentions, badly implementedToo much accessibility: Good intentions, badly implemented
Too much accessibility: Good intentions, badly implemented
 
Too much accessibility - good intentions, badly implemented / Public Sector F...
Too much accessibility - good intentions, badly implemented / Public Sector F...Too much accessibility - good intentions, badly implemented / Public Sector F...
Too much accessibility - good intentions, badly implemented / Public Sector F...
 
An Introduction to WAI-ARIA
An Introduction to WAI-ARIAAn Introduction to WAI-ARIA
An Introduction to WAI-ARIA
 
ARIA and JavaScript Accessibility
ARIA and JavaScript AccessibilityARIA and JavaScript Accessibility
ARIA and JavaScript Accessibility
 
Making your jQuery Plugins More Accessible
Making your jQuery Plugins More AccessibleMaking your jQuery Plugins More Accessible
Making your jQuery Plugins More Accessible
 
Web accessibility - WAI-ARIA a small introduction
Web accessibility - WAI-ARIA a small introductionWeb accessibility - WAI-ARIA a small introduction
Web accessibility - WAI-ARIA a small introduction
 
Intro to Web Accessibility: Koombea TechTalks
Intro to Web Accessibility: Koombea TechTalksIntro to Web Accessibility: Koombea TechTalks
Intro to Web Accessibility: Koombea TechTalks
 
Semantic accessibility
Semantic accessibilitySemantic accessibility
Semantic accessibility
 
HTML5 Accessibility - Is it ready yet?
HTML5 Accessibility - Is it ready yet?HTML5 Accessibility - Is it ready yet?
HTML5 Accessibility - Is it ready yet?
 
Front End Frameworks - are they accessible
Front End Frameworks - are they accessibleFront End Frameworks - are they accessible
Front End Frameworks - are they accessible
 
Testing For Web Accessibility
Testing For Web AccessibilityTesting For Web Accessibility
Testing For Web Accessibility
 
The Inclusive Web: hands-on with HTML5 and jQuery
The Inclusive Web: hands-on with HTML5 and jQueryThe Inclusive Web: hands-on with HTML5 and jQuery
The Inclusive Web: hands-on with HTML5 and jQuery
 
Html5 basics
Html5 basicsHtml5 basics
Html5 basics
 
The Recipe for Making Accessible Widgets!
The Recipe for Making Accessible Widgets!The Recipe for Making Accessible Widgets!
The Recipe for Making Accessible Widgets!
 
How Accessibility Made Me a Better Developer
How Accessibility Made Me a Better DeveloperHow Accessibility Made Me a Better Developer
How Accessibility Made Me a Better Developer
 
Web accessibility workshop 4
Web accessibility workshop 4Web accessibility workshop 4
Web accessibility workshop 4
 
ARIA Serious
ARIA SeriousARIA Serious
ARIA Serious
 
ARIA_11_12_Practical_Perspective.pptx
ARIA_11_12_Practical_Perspective.pptxARIA_11_12_Practical_Perspective.pptx
ARIA_11_12_Practical_Perspective.pptx
 

More from Patrick Lauke

These (still) aren't the SCs you're looking for ... (mis)adventures in WCAG 2...
These (still) aren't the SCs you're looking for ... (mis)adventures in WCAG 2...These (still) aren't the SCs you're looking for ... (mis)adventures in WCAG 2...
These (still) aren't the SCs you're looking for ... (mis)adventures in WCAG 2...Patrick Lauke
 
Pointer Events Working Group update / TPAC 2023 / Patrick H. Lauke
Pointer Events Working Group update / TPAC 2023 / Patrick H. LaukePointer Events Working Group update / TPAC 2023 / Patrick H. Lauke
Pointer Events Working Group update / TPAC 2023 / Patrick H. LaukePatrick Lauke
 
These aren't the SCs you're looking for ... (mis)adventures in WCAG 2.x inter...
These aren't the SCs you're looking for ... (mis)adventures in WCAG 2.x inter...These aren't the SCs you're looking for ... (mis)adventures in WCAG 2.x inter...
These aren't the SCs you're looking for ... (mis)adventures in WCAG 2.x inter...Patrick Lauke
 
These aren't the SCs you're looking for ... (mis)adventures in WCAG 2.x inter...
These aren't the SCs you're looking for ... (mis)adventures in WCAG 2.x inter...These aren't the SCs you're looking for ... (mis)adventures in WCAG 2.x inter...
These aren't the SCs you're looking for ... (mis)adventures in WCAG 2.x inter...Patrick Lauke
 
Styling Your Web Pages with Cascading Style Sheets / EDU course / University ...
Styling Your Web Pages with Cascading Style Sheets / EDU course / University ...Styling Your Web Pages with Cascading Style Sheets / EDU course / University ...
Styling Your Web Pages with Cascading Style Sheets / EDU course / University ...Patrick Lauke
 
Evaluating web sites for accessibility with Firefox / Manchester Digital Acce...
Evaluating web sites for accessibility with Firefox / Manchester Digital Acce...Evaluating web sites for accessibility with Firefox / Manchester Digital Acce...
Evaluating web sites for accessibility with Firefox / Manchester Digital Acce...Patrick Lauke
 
Managing and educating content editors - experiences and ideas from the trenc...
Managing and educating content editors - experiences and ideas from the trenc...Managing and educating content editors - experiences and ideas from the trenc...
Managing and educating content editors - experiences and ideas from the trenc...Patrick Lauke
 
Implementing Web Standards across the institution: trials and tribulations of...
Implementing Web Standards across the institution: trials and tribulations of...Implementing Web Standards across the institution: trials and tribulations of...
Implementing Web Standards across the institution: trials and tribulations of...Patrick Lauke
 
Geolinking content - experiments in connecting virtual and physical places / ...
Geolinking content - experiments in connecting virtual and physical places / ...Geolinking content - experiments in connecting virtual and physical places / ...
Geolinking content - experiments in connecting virtual and physical places / ...Patrick Lauke
 
All change for WCAG 2.0 - what you need to know about the new accessibility g...
All change for WCAG 2.0 - what you need to know about the new accessibility g...All change for WCAG 2.0 - what you need to know about the new accessibility g...
All change for WCAG 2.0 - what you need to know about the new accessibility g...Patrick Lauke
 
Web Accessibility - an introduction / Salford Business School briefing / Univ...
Web Accessibility - an introduction / Salford Business School briefing / Univ...Web Accessibility - an introduction / Salford Business School briefing / Univ...
Web Accessibility - an introduction / Salford Business School briefing / Univ...Patrick Lauke
 
Doing it in style - creating beautiful sites, the web standards way / WebDD /...
Doing it in style - creating beautiful sites, the web standards way / WebDD /...Doing it in style - creating beautiful sites, the web standards way / WebDD /...
Doing it in style - creating beautiful sites, the web standards way / WebDD /...Patrick Lauke
 
Web standards pragmatism - from validation to the real world / Web Developers...
Web standards pragmatism - from validation to the real world / Web Developers...Web standards pragmatism - from validation to the real world / Web Developers...
Web standards pragmatism - from validation to the real world / Web Developers...Patrick Lauke
 
Ian Lloyd/Patrick H. Lauke: Accessified - practical accessibility fixes any w...
Ian Lloyd/Patrick H. Lauke: Accessified - practical accessibility fixes any w...Ian Lloyd/Patrick H. Lauke: Accessified - practical accessibility fixes any w...
Ian Lloyd/Patrick H. Lauke: Accessified - practical accessibility fixes any w...Patrick Lauke
 
The state of the web - www.salford.ac.uk / 2007
The state of the web - www.salford.ac.uk / 2007The state of the web - www.salford.ac.uk / 2007
The state of the web - www.salford.ac.uk / 2007Patrick Lauke
 
Keyboard accessibility - just because I don't use a mouse doesn't mean I'm se...
Keyboard accessibility - just because I don't use a mouse doesn't mean I'm se...Keyboard accessibility - just because I don't use a mouse doesn't mean I'm se...
Keyboard accessibility - just because I don't use a mouse doesn't mean I'm se...Patrick Lauke
 
WAI-ARIA An introduction to Accessible Rich Internet Applications / JavaScrip...
WAI-ARIA An introduction to Accessible Rich Internet Applications / JavaScrip...WAI-ARIA An introduction to Accessible Rich Internet Applications / JavaScrip...
WAI-ARIA An introduction to Accessible Rich Internet Applications / JavaScrip...Patrick Lauke
 
Getting touchy - an introduction to touch and pointer events / Frontend NE / ...
Getting touchy - an introduction to touch and pointer events / Frontend NE / ...Getting touchy - an introduction to touch and pointer events / Frontend NE / ...
Getting touchy - an introduction to touch and pointer events / Frontend NE / ...Patrick Lauke
 
Getting touchy - an introduction to touch and pointer events (1 day workshop)...
Getting touchy - an introduction to touch and pointer events (1 day workshop)...Getting touchy - an introduction to touch and pointer events (1 day workshop)...
Getting touchy - an introduction to touch and pointer events (1 day workshop)...Patrick Lauke
 
Getting touchy - an introduction to touch and pointer events / TPAC 2016 / Li...
Getting touchy - an introduction to touch and pointer events / TPAC 2016 / Li...Getting touchy - an introduction to touch and pointer events / TPAC 2016 / Li...
Getting touchy - an introduction to touch and pointer events / TPAC 2016 / Li...Patrick Lauke
 

More from Patrick Lauke (20)

These (still) aren't the SCs you're looking for ... (mis)adventures in WCAG 2...
These (still) aren't the SCs you're looking for ... (mis)adventures in WCAG 2...These (still) aren't the SCs you're looking for ... (mis)adventures in WCAG 2...
These (still) aren't the SCs you're looking for ... (mis)adventures in WCAG 2...
 
Pointer Events Working Group update / TPAC 2023 / Patrick H. Lauke
Pointer Events Working Group update / TPAC 2023 / Patrick H. LaukePointer Events Working Group update / TPAC 2023 / Patrick H. Lauke
Pointer Events Working Group update / TPAC 2023 / Patrick H. Lauke
 
These aren't the SCs you're looking for ... (mis)adventures in WCAG 2.x inter...
These aren't the SCs you're looking for ... (mis)adventures in WCAG 2.x inter...These aren't the SCs you're looking for ... (mis)adventures in WCAG 2.x inter...
These aren't the SCs you're looking for ... (mis)adventures in WCAG 2.x inter...
 
These aren't the SCs you're looking for ... (mis)adventures in WCAG 2.x inter...
These aren't the SCs you're looking for ... (mis)adventures in WCAG 2.x inter...These aren't the SCs you're looking for ... (mis)adventures in WCAG 2.x inter...
These aren't the SCs you're looking for ... (mis)adventures in WCAG 2.x inter...
 
Styling Your Web Pages with Cascading Style Sheets / EDU course / University ...
Styling Your Web Pages with Cascading Style Sheets / EDU course / University ...Styling Your Web Pages with Cascading Style Sheets / EDU course / University ...
Styling Your Web Pages with Cascading Style Sheets / EDU course / University ...
 
Evaluating web sites for accessibility with Firefox / Manchester Digital Acce...
Evaluating web sites for accessibility with Firefox / Manchester Digital Acce...Evaluating web sites for accessibility with Firefox / Manchester Digital Acce...
Evaluating web sites for accessibility with Firefox / Manchester Digital Acce...
 
Managing and educating content editors - experiences and ideas from the trenc...
Managing and educating content editors - experiences and ideas from the trenc...Managing and educating content editors - experiences and ideas from the trenc...
Managing and educating content editors - experiences and ideas from the trenc...
 
Implementing Web Standards across the institution: trials and tribulations of...
Implementing Web Standards across the institution: trials and tribulations of...Implementing Web Standards across the institution: trials and tribulations of...
Implementing Web Standards across the institution: trials and tribulations of...
 
Geolinking content - experiments in connecting virtual and physical places / ...
Geolinking content - experiments in connecting virtual and physical places / ...Geolinking content - experiments in connecting virtual and physical places / ...
Geolinking content - experiments in connecting virtual and physical places / ...
 
All change for WCAG 2.0 - what you need to know about the new accessibility g...
All change for WCAG 2.0 - what you need to know about the new accessibility g...All change for WCAG 2.0 - what you need to know about the new accessibility g...
All change for WCAG 2.0 - what you need to know about the new accessibility g...
 
Web Accessibility - an introduction / Salford Business School briefing / Univ...
Web Accessibility - an introduction / Salford Business School briefing / Univ...Web Accessibility - an introduction / Salford Business School briefing / Univ...
Web Accessibility - an introduction / Salford Business School briefing / Univ...
 
Doing it in style - creating beautiful sites, the web standards way / WebDD /...
Doing it in style - creating beautiful sites, the web standards way / WebDD /...Doing it in style - creating beautiful sites, the web standards way / WebDD /...
Doing it in style - creating beautiful sites, the web standards way / WebDD /...
 
Web standards pragmatism - from validation to the real world / Web Developers...
Web standards pragmatism - from validation to the real world / Web Developers...Web standards pragmatism - from validation to the real world / Web Developers...
Web standards pragmatism - from validation to the real world / Web Developers...
 
Ian Lloyd/Patrick H. Lauke: Accessified - practical accessibility fixes any w...
Ian Lloyd/Patrick H. Lauke: Accessified - practical accessibility fixes any w...Ian Lloyd/Patrick H. Lauke: Accessified - practical accessibility fixes any w...
Ian Lloyd/Patrick H. Lauke: Accessified - practical accessibility fixes any w...
 
The state of the web - www.salford.ac.uk / 2007
The state of the web - www.salford.ac.uk / 2007The state of the web - www.salford.ac.uk / 2007
The state of the web - www.salford.ac.uk / 2007
 
Keyboard accessibility - just because I don't use a mouse doesn't mean I'm se...
Keyboard accessibility - just because I don't use a mouse doesn't mean I'm se...Keyboard accessibility - just because I don't use a mouse doesn't mean I'm se...
Keyboard accessibility - just because I don't use a mouse doesn't mean I'm se...
 
WAI-ARIA An introduction to Accessible Rich Internet Applications / JavaScrip...
WAI-ARIA An introduction to Accessible Rich Internet Applications / JavaScrip...WAI-ARIA An introduction to Accessible Rich Internet Applications / JavaScrip...
WAI-ARIA An introduction to Accessible Rich Internet Applications / JavaScrip...
 
Getting touchy - an introduction to touch and pointer events / Frontend NE / ...
Getting touchy - an introduction to touch and pointer events / Frontend NE / ...Getting touchy - an introduction to touch and pointer events / Frontend NE / ...
Getting touchy - an introduction to touch and pointer events / Frontend NE / ...
 
Getting touchy - an introduction to touch and pointer events (1 day workshop)...
Getting touchy - an introduction to touch and pointer events (1 day workshop)...Getting touchy - an introduction to touch and pointer events (1 day workshop)...
Getting touchy - an introduction to touch and pointer events (1 day workshop)...
 
Getting touchy - an introduction to touch and pointer events / TPAC 2016 / Li...
Getting touchy - an introduction to touch and pointer events / TPAC 2016 / Li...Getting touchy - an introduction to touch and pointer events / TPAC 2016 / Li...
Getting touchy - an introduction to touch and pointer events / TPAC 2016 / Li...
 

Recently uploaded

Human Factors of XR: Using Human Factors to Design XR Systems
Human Factors of XR: Using Human Factors to Design XR SystemsHuman Factors of XR: Using Human Factors to Design XR Systems
Human Factors of XR: Using Human Factors to Design XR SystemsMark Billinghurst
 
Understanding the Laravel MVC Architecture
Understanding the Laravel MVC ArchitectureUnderstanding the Laravel MVC Architecture
Understanding the Laravel MVC ArchitecturePixlogix Infotech
 
"ML in Production",Oleksandr Bagan
"ML in Production",Oleksandr Bagan"ML in Production",Oleksandr Bagan
"ML in Production",Oleksandr BaganFwdays
 
Connect Wave/ connectwave Pitch Deck Presentation
Connect Wave/ connectwave Pitch Deck PresentationConnect Wave/ connectwave Pitch Deck Presentation
Connect Wave/ connectwave Pitch Deck PresentationSlibray Presentation
 
Artificial intelligence in the post-deep learning era
Artificial intelligence in the post-deep learning eraArtificial intelligence in the post-deep learning era
Artificial intelligence in the post-deep learning eraDeakin University
 
Kotlin Multiplatform & Compose Multiplatform - Starter kit for pragmatics
Kotlin Multiplatform & Compose Multiplatform - Starter kit for pragmaticsKotlin Multiplatform & Compose Multiplatform - Starter kit for pragmatics
Kotlin Multiplatform & Compose Multiplatform - Starter kit for pragmaticscarlostorres15106
 
Pigging Solutions Piggable Sweeping Elbows
Pigging Solutions Piggable Sweeping ElbowsPigging Solutions Piggable Sweeping Elbows
Pigging Solutions Piggable Sweeping ElbowsPigging Solutions
 
Benefits Of Flutter Compared To Other Frameworks
Benefits Of Flutter Compared To Other FrameworksBenefits Of Flutter Compared To Other Frameworks
Benefits Of Flutter Compared To Other FrameworksSoftradix Technologies
 
Unleash Your Potential - Namagunga Girls Coding Club
Unleash Your Potential - Namagunga Girls Coding ClubUnleash Your Potential - Namagunga Girls Coding Club
Unleash Your Potential - Namagunga Girls Coding ClubKalema Edgar
 
Gen AI in Business - Global Trends Report 2024.pdf
Gen AI in Business - Global Trends Report 2024.pdfGen AI in Business - Global Trends Report 2024.pdf
Gen AI in Business - Global Trends Report 2024.pdfAddepto
 
Vertex AI Gemini Prompt Engineering Tips
Vertex AI Gemini Prompt Engineering TipsVertex AI Gemini Prompt Engineering Tips
Vertex AI Gemini Prompt Engineering TipsMiki Katsuragi
 
My INSURER PTE LTD - Insurtech Innovation Award 2024
My INSURER PTE LTD - Insurtech Innovation Award 2024My INSURER PTE LTD - Insurtech Innovation Award 2024
My INSURER PTE LTD - Insurtech Innovation Award 2024The Digital Insurer
 
Unraveling Multimodality with Large Language Models.pdf
Unraveling Multimodality with Large Language Models.pdfUnraveling Multimodality with Large Language Models.pdf
Unraveling Multimodality with Large Language Models.pdfAlex Barbosa Coqueiro
 
WordPress Websites for Engineers: Elevate Your Brand
WordPress Websites for Engineers: Elevate Your BrandWordPress Websites for Engineers: Elevate Your Brand
WordPress Websites for Engineers: Elevate Your Brandgvaughan
 
Tampa BSides - Chef's Tour of Microsoft Security Adoption Framework (SAF)
Tampa BSides - Chef's Tour of Microsoft Security Adoption Framework (SAF)Tampa BSides - Chef's Tour of Microsoft Security Adoption Framework (SAF)
Tampa BSides - Chef's Tour of Microsoft Security Adoption Framework (SAF)Mark Simos
 
Tech-Forward - Achieving Business Readiness For Copilot in Microsoft 365
Tech-Forward - Achieving Business Readiness For Copilot in Microsoft 365Tech-Forward - Achieving Business Readiness For Copilot in Microsoft 365
Tech-Forward - Achieving Business Readiness For Copilot in Microsoft 3652toLead Limited
 
CloudStudio User manual (basic edition):
CloudStudio User manual (basic edition):CloudStudio User manual (basic edition):
CloudStudio User manual (basic edition):comworks
 
Build your next Gen AI Breakthrough - April 2024
Build your next Gen AI Breakthrough - April 2024Build your next Gen AI Breakthrough - April 2024
Build your next Gen AI Breakthrough - April 2024Neo4j
 
Beyond Boundaries: Leveraging No-Code Solutions for Industry Innovation
Beyond Boundaries: Leveraging No-Code Solutions for Industry InnovationBeyond Boundaries: Leveraging No-Code Solutions for Industry Innovation
Beyond Boundaries: Leveraging No-Code Solutions for Industry InnovationSafe Software
 

Recently uploaded (20)

Human Factors of XR: Using Human Factors to Design XR Systems
Human Factors of XR: Using Human Factors to Design XR SystemsHuman Factors of XR: Using Human Factors to Design XR Systems
Human Factors of XR: Using Human Factors to Design XR Systems
 
Hot Sexy call girls in Panjabi Bagh 🔝 9953056974 🔝 Delhi escort Service
Hot Sexy call girls in Panjabi Bagh 🔝 9953056974 🔝 Delhi escort ServiceHot Sexy call girls in Panjabi Bagh 🔝 9953056974 🔝 Delhi escort Service
Hot Sexy call girls in Panjabi Bagh 🔝 9953056974 🔝 Delhi escort Service
 
Understanding the Laravel MVC Architecture
Understanding the Laravel MVC ArchitectureUnderstanding the Laravel MVC Architecture
Understanding the Laravel MVC Architecture
 
"ML in Production",Oleksandr Bagan
"ML in Production",Oleksandr Bagan"ML in Production",Oleksandr Bagan
"ML in Production",Oleksandr Bagan
 
Connect Wave/ connectwave Pitch Deck Presentation
Connect Wave/ connectwave Pitch Deck PresentationConnect Wave/ connectwave Pitch Deck Presentation
Connect Wave/ connectwave Pitch Deck Presentation
 
Artificial intelligence in the post-deep learning era
Artificial intelligence in the post-deep learning eraArtificial intelligence in the post-deep learning era
Artificial intelligence in the post-deep learning era
 
Kotlin Multiplatform & Compose Multiplatform - Starter kit for pragmatics
Kotlin Multiplatform & Compose Multiplatform - Starter kit for pragmaticsKotlin Multiplatform & Compose Multiplatform - Starter kit for pragmatics
Kotlin Multiplatform & Compose Multiplatform - Starter kit for pragmatics
 
Pigging Solutions Piggable Sweeping Elbows
Pigging Solutions Piggable Sweeping ElbowsPigging Solutions Piggable Sweeping Elbows
Pigging Solutions Piggable Sweeping Elbows
 
Benefits Of Flutter Compared To Other Frameworks
Benefits Of Flutter Compared To Other FrameworksBenefits Of Flutter Compared To Other Frameworks
Benefits Of Flutter Compared To Other Frameworks
 
Unleash Your Potential - Namagunga Girls Coding Club
Unleash Your Potential - Namagunga Girls Coding ClubUnleash Your Potential - Namagunga Girls Coding Club
Unleash Your Potential - Namagunga Girls Coding Club
 
Gen AI in Business - Global Trends Report 2024.pdf
Gen AI in Business - Global Trends Report 2024.pdfGen AI in Business - Global Trends Report 2024.pdf
Gen AI in Business - Global Trends Report 2024.pdf
 
Vertex AI Gemini Prompt Engineering Tips
Vertex AI Gemini Prompt Engineering TipsVertex AI Gemini Prompt Engineering Tips
Vertex AI Gemini Prompt Engineering Tips
 
My INSURER PTE LTD - Insurtech Innovation Award 2024
My INSURER PTE LTD - Insurtech Innovation Award 2024My INSURER PTE LTD - Insurtech Innovation Award 2024
My INSURER PTE LTD - Insurtech Innovation Award 2024
 
Unraveling Multimodality with Large Language Models.pdf
Unraveling Multimodality with Large Language Models.pdfUnraveling Multimodality with Large Language Models.pdf
Unraveling Multimodality with Large Language Models.pdf
 
WordPress Websites for Engineers: Elevate Your Brand
WordPress Websites for Engineers: Elevate Your BrandWordPress Websites for Engineers: Elevate Your Brand
WordPress Websites for Engineers: Elevate Your Brand
 
Tampa BSides - Chef's Tour of Microsoft Security Adoption Framework (SAF)
Tampa BSides - Chef's Tour of Microsoft Security Adoption Framework (SAF)Tampa BSides - Chef's Tour of Microsoft Security Adoption Framework (SAF)
Tampa BSides - Chef's Tour of Microsoft Security Adoption Framework (SAF)
 
Tech-Forward - Achieving Business Readiness For Copilot in Microsoft 365
Tech-Forward - Achieving Business Readiness For Copilot in Microsoft 365Tech-Forward - Achieving Business Readiness For Copilot in Microsoft 365
Tech-Forward - Achieving Business Readiness For Copilot in Microsoft 365
 
CloudStudio User manual (basic edition):
CloudStudio User manual (basic edition):CloudStudio User manual (basic edition):
CloudStudio User manual (basic edition):
 
Build your next Gen AI Breakthrough - April 2024
Build your next Gen AI Breakthrough - April 2024Build your next Gen AI Breakthrough - April 2024
Build your next Gen AI Breakthrough - April 2024
 
Beyond Boundaries: Leveraging No-Code Solutions for Industry Innovation
Beyond Boundaries: Leveraging No-Code Solutions for Industry InnovationBeyond Boundaries: Leveraging No-Code Solutions for Industry Innovation
Beyond Boundaries: Leveraging No-Code Solutions for Industry Innovation
 

WAI-ARIA An introduction to Accessible Rich Internet Applications / CSS Minsk JS / 22 September 2018

  • 2. what is ARIA and why do we need it ?
  • 3. 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)
  • 6. 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 (where native HTML equivalents are available) and ignore how these controls are exposed to assistive technologies
  • 7. accessibility is a broad subject •   the general concept of accessibility covers a large spectrum of disabilities / user needs •   accessibility does not just mean "blind users with screen readers" •   sighted keyboard users, users with colour blindness / deficiencies, deaf / hard of hearing users, users with cognitive disabilities... •   however, ARIA is (almost) exclusively about how to ensure that web content is correctly conveyed to assistive technologies (screen readers, screen magnifiers with screen reading capability, etc)
  • 9. code examples here are simplified (but will hopefully convey the right concepts)
  • 10. <div onclick="...">Test</div> faked button for a sighted mouse / touchscreen user this is a button... but what about keyboard users?
  • 11. <div tabindex="0" onclick="...">Test</div> faked button with focus now we can at least focus it... but can we activate it?
  • 12. <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?
  • 13. compare <div> to a real <button> faked button versus real <button>
  • 14. "test" versus "test button – to activate press SPACE bar"
  • 15. the problem generic/inappropriate HTML elements, with extra JavaScript/CSS on top...but they're still recognised and exposed as <span> , <div> , etc
  • 16. the interplay of browser and assistive technology
  • 17. Operating systems provide interfaces that expose information about objects and events to assistive technologies (e.g. Microsoft Active Accessibility [MSAA], the Mac OS X Accessibility Protocol [AXAPI], IAccessible2 [IA2])
  • 18. separate from the DOM, browsers have an "accessibility tree" (see chrome://accessibility for an example)
  • 19. Marco Zehe: Why accessibility APIs matter
  • 21. assistive technologies •   NVDA (free) •   Narrator (free) •   JAWS •   ZoomText •   Dragon NaturallySpeaking •   VoiceOver (free) •   TalkBack (free) •   ...
  • 23. 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...
  • 24. Firefox Accessibility Inspector (version 61+) (enable devtools.accessibility.enabled in about:config )
  • 28. James Craig - Using ARIA 1.0 and the WebKit Accessibility Node Inspector
  • 29. Xcode Accessibility Inspector (but for Chrome, remember to turn on accessibility mode in chrome://accessibility)
  • 30. compare <div> to a real <button> faked button versus real <button>
  • 31.
  • 32.
  • 33. if you use custom (not standard HTML) widgets, use ARIA to ensure correct info is exposed
  • 35. W3C - Accessible Rich Internet Applications (WAI-ARIA) 1.1
  • 36. ARIA defines HTML attributes to convey correct role, state, properties and value
  • 37. at a high level, ARIA defines various role and aria-* attributes that can be added to your markup
  • 38. 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
  • 39. Roles are categorized as follows: •    Abstract Roles: never used in markup directly - they serve only for the categorization/definitions •    Widget Roles: interactive controls - simple or composite (made up of various components) •    Document Structure Roles: define 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)
  • 40. each role has "states and properties" (e.g. ARIA 1.1 definition for button ) implicit/inherited or defined via aria-* attributes
  • 41. this is all complex and confusing...
  • 42. as my former colleague Karl Groves succinctly put it, ARIA helps answer the questions: what is this thing and what does it do?
  • 43. 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 benefit: once AT understands meaning/purpose, it can automatically announce specific hints and prompts (e.g. JAWS "... button - to activate, press SPACE bar")
  • 45.
  • 46. 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
  • 47. ARIA roles and attributes: restrictions •   certain role s only make sense as part of a specific 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
  • 48. what ARIA doesn't do... ARIA is not magic : it only changes how assistive technology interprets content. specifically, 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...
  • 49. no ARIA is better than bad ARIA •   ARIA roles/attributes are a "promise" to users / assistive technologies (e.g. "this component is actually a button...") – you must ensure that it then behaves correctly •   if you're not sure how to represent a particular complex widget or control, don't just throw ARIA roles and attributes at your markup – you're more likely to make things worse / more confusing / non- functional for assistive technology users W3C - WAI-ARIA 1.1 Authoring Practices
  • 50. WAI-ARIA spec can be dry/technical - use for reference W3C - WAI-ARIA 1.1 Authoring Practices more digestible.
  • 51. in principle ARIA can be used in all markup languages (depending on browser support )
  • 52. Using ARIA to enhance SVG accessibility
  • 53. ...but we'll just focus on ARIA in HTML
  • 54. W3C - ARIA in HTML
  • 55. W3C - Using ARIA
  • 56. the 5 rules of ARIA use
  • 57. 1. don't use ARIA
  • 58.
  • 59. 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. “
  • 60. 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>
  • 61. 2. don't change native semantics unless you really have to / know what you're doing
  • 62. don't do this: <h1 role="button">heading button</h1> otherwise the heading is no longer a heading (e.g. AT users can't navigate to it quickly) you can do this instead: <h1><span role="button">heading button</span></h1> or, in accordance with the first rule or ARIA: <h1><button>heading button</button></h1> example: heading button
  • 63. 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> or list is no longer a list (e.g. AT won't say "list with X items...") example: list navigation
  • 64. 3. make interactive ARIA controls keyboard accessible
  • 65. 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
  • 66. 4. don't "neutralise" focusable elements
  • 67. don't use role="presentation" or aria-hidden="true" on a visible focusable element. Otherwise, users will navigate/focus onto "nothing". <!-- don't do this... --> <button role="presentation">press me</button> <button aria-hidden="true">press me</button> <span tabindex="0" aria-hidden="true">...</span> example: neutralised elements
  • 68. Chrome DevTools indicates when a node is hidden (directly, or due to an ancestor being hidden)
  • 69. aria-hidden removes nodes from the accessibility tree (as seen here in Firefox's accessibility inspector)
  • 70. 5. interactive elements must have an accessible name
  • 71. <!-- don't do this... --> <span tabindex="0" role="button"> <span class="glyphicon glyphicon-remove"></span> </span>
  • 72. <span tabindex="0" role="button"> <span class="glyphicon glyphicon-remove"> <span class="...">Delete</span> </span> </span> <span tabindex="0" role="button" title="Delete" > <span class="glyphicon glyphicon-remove"></span> </span> refer to WAI-ARIA 1.1 - 5.2.7. Accessible Name Calculation
  • 73. <span tabindex="0" role="button" aria-label="Delete" > <span class="glyphicon glyphicon-remove"></span> </span> <span tabindex="0" role="button" aria-labelledby="..." > <span class="glyphicon glyphicon-remove"></span> </span> ... <span id=" ... " class="...">Delete</span> refer to WAI-ARIA 1.1 - 5.2.7. Accessible Name Calculation
  • 74. Chrome DevTools' accessibility panel can help understand which attributes contribute to an element's name example: accessible name calculation
  • 75. side note: aria-label / aria-labelledby / aria-describedby and arbitrary elements (see developer.paciellogroup.com)
  • 77. ARIA and HTML5 •   ARIA is used when building things that native HTML can't do •   for many years, ARIA was a "bridging technology" to overcome HTML semantic limitations •   HTML5 introduced new elements, element types, attributes that solve some of these situations •   there are still things that HTML can't express, so ARIA is here to stay...
  • 79. W3C HTML Accessibility API Mappings 1.0
  • 81. of course you can (and for many complex widgets, must) still use WAI-ARIA in HTML5
  • 82. side note: you can validate pages with (static) ARIA validator.w3.org
  • 83. common structures and widgets (not an exhaustive list - enough to understand concepts)
  • 84. using ARIA to provide structure
  • 85. <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
  • 86. <div role="list" > <div role="listitem" >...</div> <div role="listitem" >...</div> <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...")
  • 87. <img> is identified as an image by assistive technologies, and you can provide> alternative text. <img src="..." alt="alternative text"> if you're using embedded <svg> , use ARIA to achieve the same: <svg role="img" aria-label="alternative text" > ... </svg> example: embedded SVG image
  • 89. 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" )
  • 91. adapted from HTML5 Doctor - Designing a blog with html5 example: blog structure
  • 92.
  • 93. why define landmarks? •   users of assistive technologies can more easily find areas of your page/app •   AT keyboard controls to navigate to/between landmarks •   overview dialogs listing all landmarks (e.g. NVDA)
  • 96. adapted from HTML5 Doctor - Designing a blog with html5 example: blog structure with HTML5
  • 97.
  • 99. my JavaScript sucks... (but will hopefully convey the right concepts)
  • 100. button
  • 101. <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
  • 102. <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 )
  • 103. 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(); } });
  • 104. 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(); } }); }
  • 106. •   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
  • 107. 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
  • 108. <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
  • 109. <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 simplified CSS toggled button.toggled { ... }
  • 110. 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 and ARIA versus toggle with a changing name/label only
  • 112. <span tabindex="0" class="...">Option</span> <span tabindex="0" class="... checked">Option</span> example: checkbox
  • 113. <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
  • 115. <span tabindex="0" class="...">Yes</span> <span tabindex="0" class="... selected">No</span> <span tabindex="0" class="...">Maybe</span> example: radio button
  • 116. <span tabindex="0" role="radio" aria-checked="false" class="...">Yes</span> <span tabindex="0" role="radio" aria-checked="true" class="... selected">No</span> <span tabindex="0" role="radio" 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)
  • 118. <button ...>More details</button> <div class="show" ...> ... </div> example: disclosure widget
  • 119. <button ... aria-expanded="true" aria-controls="disclosure1" >More details</button> <div class="show" ... id="disclosure1"> ... </div> example: disclosure widget with aria-expanded / aria-controls
  • 121. •   ARIA Practices 1.0 suggested using a tab panel pattern (we'll briefly 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)
  • 122. <button ... aria-expanded="true" aria-controls="accordion1" >Item 1</button> <div class="show" ... id="accordion1"> ... </div> <button ... aria-expanded="false" aria-controls="accordion2" >Item 2</button> <div class="show" ... id="accordion2"> ... </div> <button ... aria-expanded="false" aria-controls="accordion3" >Item 3</button> <div class="show" ... id="accordion3"> ... </div> example: accordion using disclosure widgets
  • 124. <button>Launch...</button> ... <div ... > <div>My custom dialog</div> ... </div> example: modal dialog ...but focus handling is not really correct...
  • 125. •   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...
  • 126. <button>Launch...</button> ... <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...
  • 127. <div id="wrapper"> <button>Launch...</button> </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!
  • 128. 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 polyfill
  • 129. <button>Launch...</button> ... <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...
  • 131. 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
  • 132. 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
  • 133. <span tabindex="-1" role="radio" aria-checked="false" class="...">Yes</span> <span tabindex="0" role="radio" 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
  • 134. 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).
  • 136. making assistive technology aware of content changes
  • 137. <div id="output"></div> var o = document.getElementById("output"); o.innerHTML = "Surprise!"; // show the notification example: notification as result of button press but how can AT users be made aware of the notification / content change?
  • 138. 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> var o = document.getElementById("output"); o.innerHTML = "Surprise!"; // show the notification o.focus(); // move focus to the notification but this is not always possible, as it would interrupt the user's current actions... example: notification via focus() and a more problematic example simulating a long-running function.
  • 139. ARIA live regions •   announce a change on content without moving focus to it •    aria-live : off (default), polite , assertive
  • 140. <div id="output" aria-live="polite" ></div> var o = document.getElementById("output"); o.innerHTML = "Surprise!"; // show the notification 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
  • 141. •   some role s have implicit live region (e.g. role="status" and role="alert" ), as do some markup elements (e.g. <output> )
  • 142. <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
  • 143. ARIA live regions need to be "primed" first – 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 filling 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 Mozilla Developer Network: ARIA Live Regions
  • 144. // 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
  • 145. 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).
  • 146. ARIA has many more complex/composite widgets and structures
  • 148. <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">...</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: Marco Zehe - Advanced ARIA tip #1: Tabs in web apps not appropriate if you're just marking up a site navigation...
  • 149. some shortcomings / problems with ARIA
  • 150. as useful as ARIA is, it is far from perfect ... •   some patterns rooted deeply in native (Windows95 style) 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 define specific 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
  • 152. <div role="menubar" > <div role="menuitem" ...>...</div> <div role="menu" > <div role="menuitem" ...>...</div> <div role="menuitem" ...>...</div> <div role="menuitem" ...>...</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"
  • 153. ARIA 1.1 menu (role) specific child elements only ( menuitem , menuitemcheckbox , menuitemradio )
  • 154. menu with a form control - not a valid ARIA menu...
  • 156. Using ARIA - 2.15 ARIA Design Patterns and Touch Device Support
  • 157. ARIA Practices 1.1 - Horizontal Slider on Android / Chrome / TalkBack (use volume keys...)
  • 158. ARIA Practices 1.1 - Horizontal Slider on iOS / Safari / VoiceOver (swipe up or down...)
  • 159. ARIA Practices 1.1 - Combobox with Listbox Popup on Android / Chrome / TalkBack
  • 160. ARIA Practices 1.1 - Combobox with Listbox Popup on iOS / Safari / VoiceOver
  • 162. •   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 – file 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...
  • 164. AngularJS Developer Guide - Accessibility with ngAria
  • 167. ARIA is not a magic bullet
  • 168. what ARIA is/isn't ... •   ARIA conveys "what is this thing and what does it do?" to assistive technologies •   ARIA does not influence browser behavior itself – you need to manage keyboard handling, state, etc. yourself •   ARIA is vast and complex, depends on browser/AT support, has shortcomings
  • 169. 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 specification for correct syntax, expected attributes, valid values •   test in actual browser/AT