ARIA Serious @ ICCHP

„Smiling Baby“

<img src="…" 
     alt="Smiling Baby">

Informative

<img src="…" 
     alt="">

Decorative

<img src="…" 
     alt="To our baby 
          accessories">

Functional

<img src="…" 
     aria-label="Smiling Baby">

ARIA

Noooooooo!!!!

Important Note:


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

 

 

Don’t copy & paste mindlessly.

WAI-ARIA:

Accessible Rich

Internet Applications

Internet Applications

ARIA ≠ 🧙‍♀️

aria-make-accessible="true"

… does not exist!

To ARIA or not to ARIA?

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

Five Rules of ARIA

  1. If you can use a native HTML5 element or attribute with the semantics and behaviour you require (…) then do so.
  2. 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>

Five Rules of ARIA

  1. If you can use a native HTML5 element or attribute with the semantics and behaviour you require (…) then do so.
  2. Do not change native semantics, unless you really have to .
  3. All interactive ARIA controls must be usable with the keyboard.
  4. Do not use role="presentation" or aria-hidden="true" on a visible focusable element.
  5. All interactive elements must have an accessible name.

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.

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="…" 
   aria-labelledby="logo-title">
   <svg>
     <title id="logo-title">Airline Name</title>
     …
   </svg>
</a>

Exhibit 2 – Really Bad!

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

Exhibit 2 – Better!

<th>
  Name 
  <button aria-label=
           "Sort column">
     🔼🔽
  </button>
</th>

Exhibit 3 – 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">

WAI ARIA is really Complicated!

Conclusion

✅ Landmarks
✅ States & Properties
⚠️ (Widget) Roles — 

Mind the Keyboard

Thank You!

Eric Eggert, Knowbility & W3C/WAI

 

@yatil

 

yatil.net

Made with Slides.com