ARIA Serious?

Eric Eggert · #ID24 2017 ·

https://slides.com/yatil/2017-id24/live

Eric Eggert

Web Accessibility Specialist @

Knowbility (Assessments, Teaching)

50% W3C Fellow → WAI/EOWG

DISCLAIMER:
This presentation contains ARIA examples that are preventing websites and applications from being accessible.

Don’t copy & paste.

WAI-ARIA:

Accessible Rich

Internet Applications

Internet Applications

To ARIA or not to ARIA?

5 Rules of ARIA (according to Notes on Using ARIA in HTML)

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.

Second Rule of ARIA use

Do not change native semantics, unless you really have to .

Example

<h1 role="button">heading button</h1>

<h1><button>heading button</button></h1>

(Bad!)
(Good!)

Third Rule of ARIA use

All interactive ARIA controls must be usable with the keyboard.

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.

Fourth Rule of ARIA use

Do not use role="presentation" or aria-hidden="true" on a visible focusable element.

Fifth Rule of ARIA use

All interactive elements must have an accessible name.

ARIA support

Heydon Pickering:

aria-controls is 💩

Blog Post

aria-controls example

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

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>

Support

  • ✅ JAWS
  • ╳ Every other Screen Reader
  • ╳ Every other assistive technology

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.

But there is more!

But there is more!

 
<button
    aria-controls="elem1 elem2 elem3 elem4"
    >
    open / close
</button>

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)

WAI ARIA is really Complicated!

Also complicated for web developers!

Exhibit 1 – Bad!

 
<a id="airline-logo" href="…"
   class="logo"
   aria-label="Airline Name">
   &nbsp;
</a>

Exhibit 1 – Good!

<a id="logo" href="…">
   <img src="…" alt="Airline Name">
</a>
<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 – 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>

Exhibit 3 – Bad!

<th 
   tabindex="0" 
   role="button" 
   aria-label="Sort column"
>Name</th>

Exhibit 4 – Bad!*

<span 
  aria-hidden="true" 
  role="img" 
  class="icon">
</span>

*Actually not that bad,

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>

The Components of ARIA

The Components of ARIA

  • Roles
  • States and Properties
  • Managing Focus

The Components of ARIA

  • Roles
  • States and Properties
  • Managing Focus
    or rather: Keyboard Interaction

Thank You

Eric Eggert

Knowbility, yatil.net, @yatil

 

https://slides.com/yatil/2017-id24