The proper slides can be found here: http://slides.com/yatil/2017-id24/

1. ARIA Serious?
Eric Eggert · #ID24 2017 ·
https://slides.com/yatil/2017-id24/live

2. Eric Eggert
Web Accessibility Specialist @
Knowbility (Assessments, Teaching)
50% W3C Fellow → WAI/EOWG

3. DISCLAIMER:
This presentation contains
ARIA examples that are
preventing websites and
applications from being
accessible.
Don’t copy & paste.

4. WAI-ARIA:
Accessible Rich
Internet Applications

5. Internet
Applications

6. To ARIA or not to ARIA?
5 Rules of ARIA (according to )Notes on Using ARIA in HTML

7. First Rule of ARIA use
If you can use a native HTML5 element 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.

8. Second Rule of ARIA use
Do not change native semantics, unless you really have to .

9. Example
<h1 role="button">heading button</h1>
<h1><button>heading button</button></h1>
(Bad!)
(Good!)

10. Third Rule of ARIA use
All interactive ARIA controls must be usable with the keyboard.

11. Example
“ If using role=button the element must be able to receive focus and a
user must be able to activate the action associated with the element
using both the enter (on WIN OS) or return (MAC OS) and the space
key.

12. Fourth Rule of ARIA use
Do not use role="presentation" or aria-hidden="true" on a
visible focusable element.

13. Fifth Rule of ARIA use
All interactive elements must have an accessible name.

14. ARIA support

15. Heydon Pickering:
aria-controls is 💩💩
Blog Post

16. aria-controls example
<button
aria-expanded="false"
aria-controls="expandable">
open / close
</button>
<div id="expandable" hidden>
content of the expandable region
</div>

17. aria-controls example
<button
aria-expanded="false"
aria-controls="expandable">
open / close
</button>
<div>
<!-- a load of other markup,
including interactive
elements in focus order -->
</div>
<div id="expandable" hidden>
content of the expandable region
</div>

18. Support
✅ JAWS
Every other Screen Reader
Every other assistive technology

19. JAWS
“ When you focus an element with the attribute included, JAWS will
announce, “press the JAWS key plus Alt and M to move to the
controlled element.” Verbose and clumsy.
Then again, I’m not sure how else you’d go about supporting it.
But, that’s not the only problem. How in the hell do I move back? And,
even if I could, how would that be communicated and how long should
the option to move back remain active? No wonder the other screen
reader vendors are giving this a wide berth.

20. But there is more!

21. But there is more!
<button
aria-controls="elem1 elem2 elem3 elem4"
>
open / close
</button>

22. What to do?
“Same-page links to move users from one part of the
interface to another
Landmark roles to encapsulate major areas of the interface’s
functionality
Expandable areas that come immediately after their aria-
expanded controllers in the source (and in focus order)

23. roletype
aria-atomic
aria-busy
aria-controls
aria-describedat
aria-describedby
aria-disabled
aria-dropeffect
aria-flowto
aria-grabbed
aria-haspopup
aria-hidden
aria-invalid
aria-label
aria-labelledby
aria-live
aria-owns
aria-relevant
structurewidget window
aria-expanded
composite
aria-activedescendant
range
aria-valuemax
aria-valuemin
aria-valuenow
aria-valuetext
input command section
aria-expanded
separator
aria-expanded
aria-orientation
presentation
none
document
aria-expanded
sectionhead
aria-expanded
dialog
progressbar spinbutton
aria-valuemax
aria-valuemin
aria-valuenow
aria-required
slider
aria-valuemax
aria-valuemin
aria-valuenow
aria-orientation
scrollbar
aria-controls
aria-orientation
aria-valuemax
aria-valuemin
aria-valuenow
textbox
aria-activedescendant
aria-autocomplete
aria-multiline
aria-readonly
aria-required
option
aria-selected
aria-checked
aria-posinset
aria-setsize
checkbox
aria-checked
menuitem button
aria-expanded
aria-pressed
link
aria-expanded
listitem
aria-level
aria-posinset
aria-setsize
group
aria-activedescendant
tooltip img marquee definition note math region articlegridcell
aria-readonly
aria-required
aria-selected
heading
aria-level
tab
aria-posinset
aria-selected
aria-setsize
radio
aria-checked
aria-posinset
aria-setsize
menuitemcheckbox treeitem select
aria-orientation
row
aria-level
aria-selected
rowgroup
toolbar
aria-orientation
grid
aria-level
aria-multiselectable
aria-readonly
list landmark tabpanel log status alert rowheader
aria-sort
columnheader
aria-sort
menuitemradio radiogroup
aria-required
combobox
aria-expanded
aria-autocomplete
aria-required
tree
aria-multiselectable
aria-required
menu listbox
aria-multiselectable
aria-required
directory application banner complementary contentinfo form main navigation search timer alertdialog
treegrid menubar tablist
aria-level
aria-multiselectable
aria-orientation
text
WAI ARIA is
Complicated!
really

24. Also complicated for web
developers!

25. Exhibit 1 – Bad!
<a id="airline-logo" href="…"
class="logo"
aria-label="Airline Name">
&nbsp;
</a>

26. Exhibit 1 – Good!
<a id="logo" href="…">
<img src="…" alt="Airline Name">
</a>
<a id="logo" href="…">
<svg>
<title>Airline Name</title>
…
</svg>
</a>

27. Exhibit 2 – Bad!
<div class="nav">
<a href="javascript:void(0);"
class="navInactive"
role="button">
<span class="hiddenText">Slide 1</span>
</a>
<a href="javascript:void(0);"
class="navActive"
role="button">
<span class="hiddenText">Slide 2</span>
</a>
<a href="javascript:void(0);"
class="navInactive"
role="button">
<span class="hiddenText">Slide 3</span>
</a>
</div>

28. Exhibit 2 – Good!
<nav>
<button
aria-selected="false"
aria-label="Slide 1">
&nbsp;
</button>
<button
aria-selected="true"
aria-label="Slide 2">
&nbsp;
</button>
<button
aria-selected="false"
aria-label="Slide 4">
&nbsp;
</button>
</nav>
<nav>
<button
aria-selected="false">
<img src="…" alt="Slide 1">
</button>
<button
aria-selected="true">
<img src="…" alt="Slide 2">
</button>
<button
aria-selected="false">
<img src="…" alt="Slide 3">
</button>
</nav>

29. Exhibit 3 – Bad!
<th
tabindex="0"
role="button"
aria-label="Sort column"
>Name</th>

30. Exhibit 4 – Bad!*
<span
aria-hidden="true"
role="img"
class="icon">
</span>
*Actually not that bad,
but really, what is the point?!

31. Exhibit 5 – Really Bad!
<body aria-hidden="true">

32. Exhibit 6 – Bad!
<a
href="…"
target="_blank"
title="Click here to
view the video."
tabindex="-1"
role="button"
aria-label="External link"
></a>

33. The Components of ARIA

34. The Components of ARIA
Roles
States and Properties
Managing Focus

35. The Components of ARIA
Roles
States and Properties
Managing Focus
or rather: Keyboard Interaction

38. Thank You
Eric Eggert
Knowbility, yatil.net, @yatil
https://slides.com/yatil/2017-id24