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
Prochain SlideShare
Chargement dans…5
×

WordCamp US: ARIA. Roles, States and Properties

2 281 vues

Publié le

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

Publié dans : Internet
0 commentaire
8 j’aime
Statistiques
Remarques
  • Soyez le premier à commenter

Aucun téléchargement
Vues
Nombre de vues
2 281
Sur SlideShare
0
Issues des intégrations
0
Intégrations
160
Actions
Partages
0
Téléchargements
12
Commentaires
0
J’aime
8
Intégrations 0
Aucune incorporation

Aucune remarque pour cette diapositive

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

×