1.
ARIA
Roles, States, and Properties
#wparia @joedolson

2.
Accessible
Rich
Internet
Applications

3.
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

4.
The Role:
What am I?

5.
Implicit
vs.
Explicit

6.
<h1>
What am I?
</h1>

7.
<div role="tabpanel">
What am I?
</div>

8.
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">

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

10.
<div role="checkbox">
What am I?
</div>

11.
The State:
What am I doing now?

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

13.
<button
id="menu-toggle"
aria-expanded="true"
>
Toggle Menu
</button>

14.
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 */
}

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

16.
<button
id="menu-toggle"
aria-expanded="true"
>
Toggle Menu
</button>

17.
<button
id="menu-toggle"
aria-expanded="true"
aria-controls="menu-main-menu"
>
Menu
</button>

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

19.
What do you need to know about me?
● aria-label
● aria-live
● aria-atomic
● aria-required

20.
Who am I related to?
● aria-controls
● aria-describedby
● aria-labelledby
● aria-owns

21.
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.

22.
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/

23.
Questions? I'm here all day.
Joe Dolson
https://www.joedolson.com
Twitter: @joedolson