ARIARoles, States, and Properties

#wparia @joedolson

AccessibleRichInternetApplications

Roles, States and Properties

●ARIA uses special HTML attributes

●Roles define what function an element serves

●States defines how you interact with an element

●Properties give an element characteristics and relationships.

●Use ARIA with CSS and JS

The Role:What am I?

Implicit vs. Explicit

<h1>

What am I?</h1>

<div role="tabpanel">

What am I?</div>

Supplement, don’t replace.

● Redundant: <h1 role="heading" aria-level="1">

● Replacement: <p role="heading" aria-level="1">

● Modifier: <h1 role="heading" aria-level="2">

Use 'em if you got 'em.There’s an element for that...

<div role="checkbox">

What am I?</div>

The State:What am I doing now?

<button id="menu-toggle">Toggle Menu</button>

<button id="menu-toggle"aria-expanded="true"

>Toggle Menu</button>

Wanna style that?

JS:

$( this ).attr( 'aria-expanded', 'true' ).addClass( 'open' );

CSS:

.open {/* style me, baby */}

JS:

$( this ).attr( 'aria-expanded', 'true' );

CSS:

#menu-toggle[aria-expanded='true'] {/* style me, baby */

}

The Properties:Who am I related to?What do you need to know about me?

<button id="menu-toggle"aria-expanded="true"

>Toggle Menu</button>

<button id="menu-toggle"aria-expanded="true"aria-controls="menu-main-menu"

>Menu</button>

<button id="menu-toggle"aria-expanded="true"aria-controls="menu-main-menu"aria-label="Close Main Navigation Menu"

>Menu</button>

What do you need to know about me?

●aria-label

●aria-live

●aria-atomic

●aria-required

Who am I related to?

●aria-controls

●aria-describedby

●aria-labelledby

●aria-owns

ARIA: In Summary

●If you can use a native element, use it.

●For non-native HTML controls, add your own keyboard handlers.

●Make the current state of any interactive element explicit.

●Make relationships between control and controlled explicit.

●Provide a clear accessible name for all controls.

Resources

5 Rules of ARIA use: http://www.w3.org/TR/aria-in-html/#first-rule-of-aria-use

W3C Overview: http://www.w3.org/WAI/intro/aria

Implicit Roles: http://html5doctor.com/on-html-belts-and-aria-braces/

What is WAI ARIA? https://www.marcozehe.de/2014/03/27/what-is-wai-aria-what-does-it-do-for-me-and-what-not/

Questions? I'm here all day.

Joe Dolsonhttps://www.joedolson.com

Twitter: @joedolson