ARIA Serious‽
A presentation at #technica11y by Eric Eggert
ARIA Serious?!
Eric Eggert · #technica11y · October 2019
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.
Important Note:
This presentation contains ARIA examples that are preventing websites and applications from being accessible. Don’t just copy & paste code.
WAI-ARIA: Accessible Rich Internet Applications
WAI = Web Accessibility Initiative
Internet Applications
➡ Emphasis on Internet Applications
Internet Applications
ARIA ≠ or ARIA is neither witchcraft nor sorcery !
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
Rules of ARIA 1 1 Using ARIA
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.
Do not change native semantics, unless you really have to.
Bad Example: <h1 role=”button”>heading button!</h1> Good Example: <h1><button>heading button!</button>!</h1>
Nicolas Steenhout on Twitter
All interactive ARIA controls must be usable with the keyboard.
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.
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
DEMO
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”
All interactive elements must have an accessible name.
ARIA Components
Some Roles <div role=”main”> !!!<!— better: <main> !!—> <form role=”search”> <div role=”tooltip”> <output role=”alert”> Some of these roles are “landmarks”
Some Properties and States <input aria-required=”true”> <input aria-labelledby=”label” aria-describedby=”errormsg”> <button aria-pressed=”false”> <div aria-hidden=”true”>
Live Regions <div aria-live=”off”> <div aria-live=”polite”> <div aria-live=”assertive”>
ARIA Support
Heydon Pickering: aria-controls is From 2016
Léonie Watson on Twitter, October 2, 2019
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
WAI ARIA is really Complicated!
Makes it also complicated for Web Developers!
Exhibit 1 – Bad! <a id=”airline-logo” href=”…” class=”logo” aria-label=”Airline Name”> “</a>
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>
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>
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>
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>
Exhibit 3 – Bad! <th tabindex=”0” role=”button” aria-label=”Sort column” >Name”</th>
Exhibit 3a – Bad!
Exhibit 4 – Bad! 2 <span aria-hidden=”true” role=”img” class=”icon”> “</span> 2 Actually not harmful, but really, what is the point?!
Exhibit 5 – Really Bad! <body aria-hidden=”true”>
Exhibit 6 – Bad! <a href=”…” target=”_blank” title=”Click here to view the video.” tabindex=”-1” role=”button” aria-label=”External link” >”</a>
Conclusion ✅ ⚠ Landmarks States & Properties (Widget) Roles — Mind the Keyboard
Workshop in Berlin in November
Eric Eggert yatil.net / @yatil everywhere
