ARIA Serious?!
Eric Eggert · #technica11y · October 2019
Slide 1
Slide 2
Eric Eggert
Eric Eggert is a Web Developer and Teacher who works with Knowbility and the W3C on improving the Web for People with Disabilities, and everyone else. My name is Eric Eggert and I work with Knowbility and the W3C to improve the Web for People with Disabilities. I work with Knowbility and they donate 50% of my work time to W3C in a fellowship for which Iʼm very grateful.
Slide 3
Important Note:
This presentation contains ARIA examples that are preventing websites and applications from being accessible. Don’t just copy & paste code.
Slide 4
WAI-ARIA: Accessible Rich Internet Applications
WAI = Web Accessibility Initiative
Slide 5
Internet Applications
➡ Emphasis on Internet Applications
Slide 6
Internet Applications
Slide 7
ARIA ≠ or ARIA is neither witchcraft nor sorcery !
Slide 8
No aria-make-accessible=”true” Although some people seem to think there is In reality we have to understand the ARIA principles fully and then deploy it where needed
Slide 9
Rules of ARIA 1 1 Using ARIA
Slide 10
If you can use a native HTML element or attribute with the semantics and behavior 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.
Slide 11
Do not change native semantics, unless you really have to.
Slide 12
Bad Example: <h1 role=”button”>heading button!</h1> Good Example: <h1><button>heading button!</button>!</h1>
Slide 13
Nicolas Steenhout on Twitter
Slide 14
All interactive ARIA controls must be usable with the keyboard.
Slide 15
If you create a widget that a user can click or tap or drag or drop or slide or scroll, a user must also be able to navigate to the widget and perform an equivalent action using the keyboard. All interactive widgets must be scripted to respond to standard keystrokes or keystroke combinations where applicable.
Slide 16
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. — ARIA Practices Guide
Slide 17
DEMO
Slide 18
Slide 19
Do not use role=”presentation” or aria-hidden=”true” on a i focusable element. Using either of these on a focusable element will result in some users focusing on ‘nothing’. i which is equivalent to role=”none”
Slide 20
All interactive elements must have an accessible name.
Slide 21
ARIA Components
Slide 22
Some Roles <div role=”main”> !!!<!— better: <main> !!—> <form role=”search”> <div role=”tooltip”> <output role=”alert”> Some of these roles are “landmarks”
Slide 23
Some Properties and States <input aria-required=”true”> <input aria-labelledby=”label” aria-describedby=”errormsg”> <button aria-pressed=”false”> <div aria-hidden=”true”>
Slide 24
Live Regions <div aria-live=”off”> <div aria-live=”polite”> <div aria-live=”assertive”>
Slide 25
ARIA Support
Slide 26
Heydon Pickering: aria-controls is From 2016
Slide 27
Léonie Watson on Twitter, October 2, 2019
Slide 28
roletype widget composite range aria-activedescendant aria-valuemax aria-valuemin aria-valuenow aria-valuetext progressbar none 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 input command structure window aria-expanded section rowgroup separator aria-expanded spinbutton slider scrollbar textbox option checkbox aria-valuemax aria-valuemin aria-valuenow aria-required aria-valuemax aria-valuemin aria-valuenow aria-orientation aria-controls aria-orientation aria-valuemax aria-valuemin aria-valuenow aria-activedescendant aria-autocomplete aria-multiline aria-readonly aria-required aria-selected aria-checked aria-posinset aria-setsize aria-checked radio menuitem menuitemcheckbox button link gridcell listitem group aria-expanded aria-pressed aria-expanded aria-readonly aria-required aria-selected aria-level aria-posinset aria-setsize aria-activedescendant treeitem aria-checked aria-posinset aria-setsize menuitemradio tooltip select row toolbar grid aria-orientation aria-level aria-selected aria-orientation aria-level aria-multiselectable aria-readonly radiogroup combobox tree aria-required aria-expanded aria-autocomplete aria-required aria-multiselectable aria-required treegrid presentation text aria-expanded aria-orientation menu listbox aria-multiselectable aria-required menubar tablist aria-level aria-multiselectable aria-orientation directory img marquee list application definition landmark banner complementary note document sectionhead aria-expanded aria-expanded math region tabpanel contentinfo log form article status main heading tab aria-level aria-posinset aria-selected aria-setsize alert navigation dialog rowheader columnheader aria-sort aria-sort search timer alertdialog
Slide 29
WAI ARIA is really Complicated!
Slide 30
Makes it also complicated for Web Developers!
Slide 31
Exhibit 1 – Bad! <a id=”airline-logo” href=”…” class=”logo” aria-label=”Airline Name”> “</a>
Slide 32
Exhibit 1 – Better! <a id=”logo” href=”…”> <img src=”…” alt=”Airline Name”> !</a> or: <a id=”logo” href=”…”> <svg> <title>Airline Name!</title> … !</svg> !</a>
Slide 33
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>
Slide 34
Exhibit 2 – Better! <nav> <button aria-pressed=”false” aria-label=”Slide 1”> “</button> <button aria-pressed=”true” aria-label=”Slide 2”> “</button> <button aria-pressed=”false” aria-label=”Slide 3”> “</button> “</nav>
Slide 35
Exhibit 2 – Even Better! <nav> <button aria-pressed=”false”> <img src=”…” alt=”Slide 1”> “</button> <button aria-pressed=”true”> <img src=”…” alt=”Slide 2”> “</button> <button aria-pressed=”false”> <img src=”…” alt=”Slide 3”> “</button> “</nav>
Slide 36
Exhibit 3 – Bad! <th tabindex=”0” role=”button” aria-label=”Sort column” >Name”</th>
Slide 37
Exhibit 3a – Bad!
Slide 38
Exhibit 4 – Bad! 2 <span aria-hidden=”true” role=”img” class=”icon”> “</span> 2 Actually not harmful, but really, what is the point?!
Slide 39
Exhibit 5 – Really Bad! <body aria-hidden=”true”>
Slide 40
Exhibit 6 – Bad! <a href=”…” target=”_blank” title=”Click here to view the video.” tabindex=”-1” role=”button” aria-label=”External link” >”</a>
Slide 41
Slide 42
Slide 43
Slide 44
Slide 45
Conclusion ✅ ⚠ Landmarks States & Properties (Widget) Roles — Mind the Keyboard
Slide 46
Workshop in Berlin in November
Slide 47
Eric Eggert yatil.net / @yatil everywhere
