Developing Complex Widgets for Accessibility

Eric Eggert – OsloMet – 4&5 December 2018

Β 

https://slides.com/yatil/2018-oslomet2

WAI-ARIA:

Accessible Rich

Internet Applications

Internet Applications

Three Components:

  • Landmark Roles
  • States & Properties
  • Widgets

Page Regions

Button pressed?

Section Expanded?

Labels/Live Regions*

Application menu?

Expand/Collapse?

Dialog?

Landmarks

  • banner <header>
  • complementary <aside>
  • contentinfo <footer>
  • form <form>
  • main <main>
  • navigation <nav>
  • region <section>
  • search

Live Regions

Roles:

  • alert
  • log
  • marquee
  • status
  • timer

Attributes:

  • aria-atomic
  • aria-busy
  • aria-live
  • aria-relevant

Widget Attributes

  • aria-autocomplete
  • aria-checked
  • aria-disabled
  • aria-errormessage
  • aria-expanded
  • aria-haspopup
  • aria-hidden
  • aria-invalid
  • aria-label
  • aria-level
  • aria-modal
  • aria-multiline
  • aria-multiselectable
  • aria-orientation
  • aria-placeholder
  • aria-pressed
  • aria-readonly
  • aria-required
  • aria-selected
  • aria-sort
  • aria-valuemax
  • aria-valuemin
  • aria-valuenow
  • aria-valuetext

ARIA β‰  πŸ§™β€β™‚οΈ

No
aria-make-accessible="true"

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

<!-- (BAD) -->
<h1 role="button">heading button</h1>
<!-- (GOOD!) -->
<h1><button>heading button</button></h1>

Example​

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.

WAI ARIA is really Complicated!

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 3a – Bad!

Exhibit 4 – Bad!*

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

*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>

End for Today!

Made with Slides.com