Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.
ARIA
Roles, States, and Properties
#wparia @joedolson
Accessible
Rich
Internet
Applications
Roles, States and Properties
● ARIA uses special HTML attributes
● Roles define what function an element serves
● States d...
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"...
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...
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"
>
Men...
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...
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/W...
Questions? I'm here all day.
Joe Dolson
https://www.joedolson.com
Twitter: @joedolson
Upcoming SlideShare
Loading in …5
×

WordCamp US: ARIA. Roles, States and Properties

2,579 views

Published on

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

Published in: Internet

WordCamp US: ARIA. Roles, States and Properties

  1. 1. ARIA Roles, States, and Properties #wparia @joedolson
  2. 2. Accessible Rich Internet Applications
  3. 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. 4. The Role: What am I?
  5. 5. Implicit vs. Explicit
  6. 6. <h1> What am I? </h1>
  7. 7. <div role="tabpanel"> What am I? </div>
  8. 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. 9. Use 'em if you got 'em. There’s an element for that...
  10. 10. <div role="checkbox"> What am I? </div>
  11. 11. The State: What am I doing now?
  12. 12. <button id="menu-toggle"> Toggle Menu </button>
  13. 13. <button id="menu-toggle" aria-expanded="true" > Toggle Menu </button>
  14. 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. 15. The Properties: Who am I related to? What do you need to know about me?
  16. 16. <button id="menu-toggle" aria-expanded="true" > Toggle Menu </button>
  17. 17. <button id="menu-toggle" aria-expanded="true" aria-controls="menu-main-menu" > Menu </button>
  18. 18. <button id="menu-toggle" aria-expanded="true" aria-controls="menu-main-menu" aria-label="Close Main Navigation Menu" > Menu </button>
  19. 19. What do you need to know about me? ● aria-label ● aria-live ● aria-atomic ● aria-required
  20. 20. Who am I related to? ● aria-controls ● aria-describedby ● aria-labelledby ● aria-owns
  21. 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. 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. 23. Questions? I'm here all day. Joe Dolson https://www.joedolson.com Twitter: @joedolson

×