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.
Quick & dirty introduction to 
ARIA 
FEL, August 2014 
LJWatson.co.uk @LeonieWatson 1
ACCESSIBLE RICH INTERNET 
APPLICATIONS (ARIA) 
LJWatson.co.uk @LeonieWatson 2
W3C specification 
• ARIA 1.0 (2014) 
http://www.w3.org/TR/wai-aria/ 
• ARIA 1.1 (Working Draft) 
http://www.w3.org/TR/wai...
Set of attributes 
• Added to markup languages 
• Communicate accessibility information 
LJWatson.co.uk @LeonieWatson 4
WEB ACCESSIBILITY STACK 
LJWatson.co.uk @LeonieWatson 5
Web accessibility stack v1 
• Assistive technology 
• Browser DOM 
LJWatson.co.uk @LeonieWatson 6
Web accessibility stack v2 
• Assistive technology 
• Accessibility API 
• Browser DOM 
LJWatson.co.uk @LeonieWatson 7
Web accessibility stack v3 
• Assistive technology 
• ARIA 
• Accessibility API 
• Browser DOM 
LJWatson.co.uk @LeonieWats...
USING ARIA 
LJWatson.co.uk @LeonieWatson 9
ARIA roles 
• More than 30 ARIA roles 
• Including alert, dialog, checkbox, 
menubar,progressbar, slider, tab and tree 
LJ...
Native HTML elements 
• Most HTML elements have roles 
<a href=“foo.html”>Website</a> 
LJWatson.co.uk @LeonieWatson 11
Neutral HTML elements 
• Some HTML elements are semantically neutral 
<div>…</div> 
<span>…</span> 
LJWatson.co.uk @Leonie...
HTML4 structure 
<div id="header"> 
… 
</div> 
<div id="main"> 
… 
</div> 
<div id="footer"> 
… 
</div> 
LJWatson.co.uk @L...
HTML4 + ARIA landmark roles 
<div role="banner"> 
… 
</div> 
<div role="main"> 
… 
</div> 
<div role="contentinfo"> 
… 
</...
HTML5 structure 
<header> 
… 
</header> 
<main> 
… 
</main> 
<footer> 
… 
</footer> 
LJWatson.co.uk @LeonieWatson 15
ARIA states 
• 9 ARIA states. 
• Including aria-busy, aria-checked, aria-disabled, 
aria-hidden, aria-invalid and aria-sel...
HTML5 details/summary 
<details> 
<summary>Favourite Pink Floyd</summary> 
… 
</details> 
LJWatson.co.uk @LeonieWatson 17
HTML5 + ARIA roles 
<details role="group"> 
<summary role=“button"> 
Favourite Pink Floyd 
</summary> 
… 
</details> 
LJWa...
HTML5 + ARIA states 
<details role="group"> 
<summary role=“button“ aria-expanded="true“ 
tabindex=“0”> 
Favourite Pink Fl...
ARIA properties 
• More than 20 ARIA properties 
• Including aria-activedescendent, aria-controls, 
aria-describedby, aria...
HTML5 nav elements 
<nav><ul>…</ul></nav> 
… 
<nav><ul>…</ul></nav> 
LJWatson.co.uk @LeonieWatson 21
HTML5 + ARIA propertey 
<nav aria-label=“Main”><ul>…</ul></nav> 
… 
<nav aria-labelledby=“page”> 
<h2 id=“page”>Page links...
HTML5 password input 
<label for=“pwd”>Password: 
<input type=“password” id=“pwd”> 
</label> 
<span>Passwords must…</span>...
HTML5 + ARIA propertey 
<label for=“pwd”>Password: 
<input type=“password” id=“pwd” aria-describedby=“ 
pwdHint”> 
</label...
ARIA recap 
• Roles 
• States 
• Properties 
LJWatson.co.uk @LeonieWatson 25
Thank you! 
LJWatson.co.uk @LeonieWatson 26
Upcoming SlideShare
Loading in …5
×

A quick & dirty introduction to ARIA (FEL meetup 2014)

2,555 views

Published on

An introduction to Accessible Rich Internet Applications (ARIA), using code examples to demonstrate ARIA roles, states and properties.

Published in: Technology
  • Be the first to comment

A quick & dirty introduction to ARIA (FEL meetup 2014)

  1. 1. Quick & dirty introduction to ARIA FEL, August 2014 LJWatson.co.uk @LeonieWatson 1
  2. 2. ACCESSIBLE RICH INTERNET APPLICATIONS (ARIA) LJWatson.co.uk @LeonieWatson 2
  3. 3. W3C specification • ARIA 1.0 (2014) http://www.w3.org/TR/wai-aria/ • ARIA 1.1 (Working Draft) http://www.w3.org/TR/wai-aria-1.1/ LJWatson.co.uk @LeonieWatson 3
  4. 4. Set of attributes • Added to markup languages • Communicate accessibility information LJWatson.co.uk @LeonieWatson 4
  5. 5. WEB ACCESSIBILITY STACK LJWatson.co.uk @LeonieWatson 5
  6. 6. Web accessibility stack v1 • Assistive technology • Browser DOM LJWatson.co.uk @LeonieWatson 6
  7. 7. Web accessibility stack v2 • Assistive technology • Accessibility API • Browser DOM LJWatson.co.uk @LeonieWatson 7
  8. 8. Web accessibility stack v3 • Assistive technology • ARIA • Accessibility API • Browser DOM LJWatson.co.uk @LeonieWatson 8
  9. 9. USING ARIA LJWatson.co.uk @LeonieWatson 9
  10. 10. ARIA roles • More than 30 ARIA roles • Including alert, dialog, checkbox, menubar,progressbar, slider, tab and tree LJWatson.co.uk @LeonieWatson 10
  11. 11. Native HTML elements • Most HTML elements have roles <a href=“foo.html”>Website</a> LJWatson.co.uk @LeonieWatson 11
  12. 12. Neutral HTML elements • Some HTML elements are semantically neutral <div>…</div> <span>…</span> LJWatson.co.uk @LeonieWatson 12
  13. 13. HTML4 structure <div id="header"> … </div> <div id="main"> … </div> <div id="footer"> … </div> LJWatson.co.uk @LeonieWatson 13
  14. 14. HTML4 + ARIA landmark roles <div role="banner"> … </div> <div role="main"> … </div> <div role="contentinfo"> … </div> LJWatson.co.uk @LeonieWatson 14
  15. 15. HTML5 structure <header> … </header> <main> … </main> <footer> … </footer> LJWatson.co.uk @LeonieWatson 15
  16. 16. ARIA states • 9 ARIA states. • Including aria-busy, aria-checked, aria-disabled, aria-hidden, aria-invalid and aria-selected LJWatson.co.uk @LeonieWatson 16
  17. 17. HTML5 details/summary <details> <summary>Favourite Pink Floyd</summary> … </details> LJWatson.co.uk @LeonieWatson 17
  18. 18. HTML5 + ARIA roles <details role="group"> <summary role=“button"> Favourite Pink Floyd </summary> … </details> LJWatson.co.uk @LeonieWatson 18
  19. 19. HTML5 + ARIA states <details role="group"> <summary role=“button“ aria-expanded="true“ tabindex=“0”> Favourite Pink Floyd </summary> … </details> LJWatson.co.uk @LeonieWatson 19
  20. 20. ARIA properties • More than 20 ARIA properties • Including aria-activedescendent, aria-controls, aria-describedby, aria-label, aria-live and aria-required LJWatson.co.uk @LeonieWatson 20
  21. 21. HTML5 nav elements <nav><ul>…</ul></nav> … <nav><ul>…</ul></nav> LJWatson.co.uk @LeonieWatson 21
  22. 22. HTML5 + ARIA propertey <nav aria-label=“Main”><ul>…</ul></nav> … <nav aria-labelledby=“page”> <h2 id=“page”>Page links</h2> <ul>…</ul> </nav> LJWatson.co.uk @LeonieWatson 22
  23. 23. HTML5 password input <label for=“pwd”>Password: <input type=“password” id=“pwd”> </label> <span>Passwords must…</span> LJWatson.co.uk @LeonieWatson 23
  24. 24. HTML5 + ARIA propertey <label for=“pwd”>Password: <input type=“password” id=“pwd” aria-describedby=“ pwdHint”> </label> <span id=“pwdHint”>Passwords must…</span> LJWatson.co.uk @LeonieWatson 24
  25. 25. ARIA recap • Roles • States • Properties LJWatson.co.uk @LeonieWatson 25
  26. 26. Thank you! LJWatson.co.uk @LeonieWatson 26

×