ARIA (Accessible Rich Internet Applications) uses special HTML attributes to define roles, states, and properties that provide accessibility information about elements. Roles define an element's function, states define its interactive status, and properties provide context about its relationships and characteristics. ARIA should supplement, not replace, standard HTML elements. Elements' current states and relationships to other elements need to be made explicit to ensure accessibility.

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