An introduction to the core concepts of ARIA for HTML: what it's intended to do and how it does it.

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