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.
Making custom widgets 
accessible with ARIA 
Epic FEL 
LJWatson.co.uk @LeonieWatson 1
WEB ACCESSIBILITY STACK 
LJWatson.co.uk @LeonieWatson 2
Stack anatomy 
• Assistive technology 
• ARIA 
• Accessibility API 
• Browser/DOM 
LJWatson.co.uk @LeonieWatson 3
ACCESSIBLE RICH INTERNET 
APPLICATIONS (ARIA) 
LJWatson.co.uk @LeonieWatson 4
W3C specification 
• ARIA 1.0 (2014) 
http://www.w3.org/TR/wai-aria/ 
• ARIA 1.1 (Working Draft) 
http://www.w3.org/TR/wai...
Roles 
• More than 30 ARIA roles 
• Including alert, dialog, checkbox, menubar, 
progressbar, slider, tab and tree 
LJWats...
Native roles 
• Most HTML elements have implicit roles 
<a href="foo.html">Foo</a> 
LJWatson.co.uk @LeonieWatson 7
ARIA roles 
• Explicit roles can be applied to semantically 
neutral HTML elements 
<span onclick="foo();" role="link">Foo...
States 
• 9 ARIA states. 
• Including aria-busy, aria-checked, aria-disabled, 
aria-hidden, aria-invalid and aria-selected...
Native states 
• The state of some interactive elements can be 
expressed natively 
<input type="checkbox" checked> 
LJWat...
ARIA states 
• ARIA states can be applied to custom controls 
<span role="checkbox" aria-checked="true">…</span> 
LJWatson...
Properties 
• More than 20 ARIA properties 
• Including aria-activedescendent, aria-controls, 
aria-describedby, aria-labe...
Native properties 
• Most HTML elements have native properties 
(like an accessible name) 
<img src="foo.png" alt="Foo"> 
...
ARIA properties 
• ARIA properties can be applied to HTML 
elements 
<nav aria-label="Website">…</nav> 
LJWatson.co.uk @Le...
USING ARIA 
LJWatson.co.uk @LeonieWatson 15
Custom HTML 
• Little information is exposed through the 
accessibility API 
<span onclick="foo();">Foo</span> 
LJWatson.c...
Adding focus 
• Use tabindex to make the control keyboard 
focusable 
<span onclick="foo();" 
tabindex="0">Foo</span> 
LJW...
Adding a role 
• Add an explicit role to indicate the control’s 
purpose 
<span onclick="foo();" 
tabindex=“0“ role="butto...
Adding keyboard support 
• ARIA doesn’t add functionality 
• Use JavaScript to provide behaviour and 
keyboard support 
LJ...
NAVIGATION DESIGN PATTERN 
LJWatson.co.uk @LeonieWatson 20
HTML + bad ARIA 
<nav> 
<ul role="navigation"> 
<li><a href="home.html">Home</a></li> 
... 
</ul> 
</nav> 
LJWatson.co.uk ...
HTML + good ARIA 
<nav role="navigation"> 
<ul> 
<li><a href="home.html">Home</a></li> 
... 
</ul> 
</nav> 
LJWatson.co.uk...
DYNAMIC UPDATE DESIGN PATTERN 
LJWatson.co.uk @LeonieWatson 23
HTML 
<div> 
<h1>Tequila</h1> 
<button>Add to basket</button> 
</div> 
<div> 
<h2>Basket summary</h2> 
<p> 
Your basket co...
HTML + ARIA 
<div> 
<h2>Basket summary</h2> 
<div aria-live="assertive" aria-atomic="true"<p> 
Your basket contains <span ...
TAB WIDGET DESIGN PATTERN 
LJWatson.co.uk @LeonieWatson 26
HTML 
<ul id="tabs"> 
<li><a href="#panel1">Tab 1</a></li> 
<li><a href="#panel2">Tab 2</a></li> 
</ul> 
<div id="panel1“>...
HTML + ARIA roles 
<ul id="tabs" role="tablist"> 
<li role="presentation"> 
<a href="#panel1“ role="tab">Tab 1</a> 
</li> ...
HTML + more ARIA roles 
<div id="panel1" role="tabpanel">…</div> 
<div id="panel2" role="tabpanel">…</div> 
LJWatson.co.uk...
HTML + ARIA states 
<ul id="tabs" role="tablist"> 
<li role="presentation"> 
<a href="#panel1" role="tab" 
aria-selected="...
HTML + ARIA properties 
<li role="presentation"> 
<a href="#panel1" role="tab" 
aria-selected="true" 
aria-controls="panel...
HTML + more ARIA properties 
<div id="panel1" role="tabpanel" 
aria-labelledby="tab1">… 
</div> 
<div id="panel2" role="ta...
Tab widget in action 
LJWatson.co.uk @LeonieWatson 33
Resources 
• WAI-ARIA 1.0 Authoring Practices: 
http://tinyurl.com/pycwv8b 
• Using WAI-ARIA in HTML: 
http://tinyurl.com/...
THANK YOU! 
LJWatson.co.uk @LeonieWatson 35
Upcoming SlideShare
Loading in …5
×

Making custom widgets accessible with ARIA (Epic FEL2014)

1,375 views

Published on

Repurposing HTML elements into custom widgets is common practice on the web, but making your widgets cross-platform and cross-device is another matter.
HTML, CSS and JavaScript is only part of the story.

Find out how ARIA (Accessible Rich Internet Applications) and enhanced scripting can make your widgets usable by more people. Learn about the web accessibility
stack, and the relationship between the DOM, browser accessibility APIs and assistive technologies like screen readers.

Published in: Technology
  • Be the first to comment

Making custom widgets accessible with ARIA (Epic FEL2014)

  1. 1. Making custom widgets accessible with ARIA Epic FEL LJWatson.co.uk @LeonieWatson 1
  2. 2. WEB ACCESSIBILITY STACK LJWatson.co.uk @LeonieWatson 2
  3. 3. Stack anatomy • Assistive technology • ARIA • Accessibility API • Browser/DOM LJWatson.co.uk @LeonieWatson 3
  4. 4. ACCESSIBLE RICH INTERNET APPLICATIONS (ARIA) LJWatson.co.uk @LeonieWatson 4
  5. 5. 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 5
  6. 6. Roles • More than 30 ARIA roles • Including alert, dialog, checkbox, menubar, progressbar, slider, tab and tree LJWatson.co.uk @LeonieWatson 6
  7. 7. Native roles • Most HTML elements have implicit roles <a href="foo.html">Foo</a> LJWatson.co.uk @LeonieWatson 7
  8. 8. ARIA roles • Explicit roles can be applied to semantically neutral HTML elements <span onclick="foo();" role="link">Foo</span> LJWatson.co.uk @LeonieWatson 8
  9. 9. States • 9 ARIA states. • Including aria-busy, aria-checked, aria-disabled, aria-hidden, aria-invalid and aria-selected LJWatson.co.uk @LeonieWatson 9
  10. 10. Native states • The state of some interactive elements can be expressed natively <input type="checkbox" checked> LJWatson.co.uk @ 10
  11. 11. ARIA states • ARIA states can be applied to custom controls <span role="checkbox" aria-checked="true">…</span> LJWatson.co.uk @LeonieWatson 11
  12. 12. Properties • More than 20 ARIA properties • Including aria-activedescendent, aria-controls, aria-describedby, aria-label, aria-live and aria-required LJWatson.co.uk @LeonieWatson 12
  13. 13. Native properties • Most HTML elements have native properties (like an accessible name) <img src="foo.png" alt="Foo"> LJWatson.co.uk @LeonieWatson 13
  14. 14. ARIA properties • ARIA properties can be applied to HTML elements <nav aria-label="Website">…</nav> LJWatson.co.uk @LeonieWatson 14
  15. 15. USING ARIA LJWatson.co.uk @LeonieWatson 15
  16. 16. Custom HTML • Little information is exposed through the accessibility API <span onclick="foo();">Foo</span> LJWatson.co.uk @LeonieWatson 16
  17. 17. Adding focus • Use tabindex to make the control keyboard focusable <span onclick="foo();" tabindex="0">Foo</span> LJWatson.co.uk @LeonieWatson 17
  18. 18. Adding a role • Add an explicit role to indicate the control’s purpose <span onclick="foo();" tabindex=“0“ role="button">Foo</span> LJWatson.co.uk @LeonieWatson 18
  19. 19. Adding keyboard support • ARIA doesn’t add functionality • Use JavaScript to provide behaviour and keyboard support LJWatson.co.uk @LeonieWatson 19
  20. 20. NAVIGATION DESIGN PATTERN LJWatson.co.uk @LeonieWatson 20
  21. 21. HTML + bad ARIA <nav> <ul role="navigation"> <li><a href="home.html">Home</a></li> ... </ul> </nav> LJWatson.co.uk @LeonieWatson 21
  22. 22. HTML + good ARIA <nav role="navigation"> <ul> <li><a href="home.html">Home</a></li> ... </ul> </nav> LJWatson.co.uk @LeonieWatson 22
  23. 23. DYNAMIC UPDATE DESIGN PATTERN LJWatson.co.uk @LeonieWatson 23
  24. 24. HTML <div> <h1>Tequila</h1> <button>Add to basket</button> </div> <div> <h2>Basket summary</h2> <p> Your basket contains <span id="quantity">0</span> items.</p> </div> LJWatson.co.uk @LeonieWatson 24
  25. 25. HTML + ARIA <div> <h2>Basket summary</h2> <div aria-live="assertive" aria-atomic="true"<p> Your basket contains <span id="quantity">0</span> items.</p> </div> LJWatson.co.uk @LeonieWatson 25
  26. 26. TAB WIDGET DESIGN PATTERN LJWatson.co.uk @LeonieWatson 26
  27. 27. HTML <ul id="tabs"> <li><a href="#panel1">Tab 1</a></li> <li><a href="#panel2">Tab 2</a></li> </ul> <div id="panel1“>…</div> <div id="panel2">…</div> LJWatson.co.uk @LeonieWatson 27
  28. 28. HTML + ARIA roles <ul id="tabs" role="tablist"> <li role="presentation"> <a href="#panel1“ role="tab">Tab 1</a> </li> <li role="presentation"> <a href="#panel2" role="tab">Tab 2</a> </li> </ul> LJWatson.co.uk @LeonieWatson 28
  29. 29. HTML + more ARIA roles <div id="panel1" role="tabpanel">…</div> <div id="panel2" role="tabpanel">…</div> LJWatson.co.uk @LeonieWatson 29
  30. 30. HTML + ARIA states <ul id="tabs" role="tablist"> <li role="presentation"> <a href="#panel1" role="tab" aria-selected="true">Tab 1</a> </li> <li role="presentation"> <a href="#panel2" role="tab" aria-selected="false">Tab 2</a> </li> </ul> LJWatson.co.uk @LeonieWatson 30
  31. 31. HTML + ARIA properties <li role="presentation"> <a href="#panel1" role="tab" aria-selected="true" aria-controls="panel1">Tab 1</a> </li> <li role="presentation"> <a href="#panel2" role="tab" aria-selected="false" aria-controls="panel2">Tab 2</a> </li> LJWatson.co.uk @LeonieWatson 31
  32. 32. HTML + more ARIA properties <div id="panel1" role="tabpanel" aria-labelledby="tab1">… </div> <div id="panel2" role="tabpanel" aria-labelledby="tab2">… </div> LJWatson.co.uk @LeonieWatson 32
  33. 33. Tab widget in action LJWatson.co.uk @LeonieWatson 33
  34. 34. Resources • WAI-ARIA 1.0 Authoring Practices: http://tinyurl.com/pycwv8b • Using WAI-ARIA in HTML: http://tinyurl.com/a5ln8k44 • HTML to Platform Accessibility API Mapping: http://tinyurl.com/nm8jacq • TPG blog: http://tinyurl.com/o94e7dh LJWatson.co.uk @LeonieWatson 34
  35. 35. THANK YOU! LJWatson.co.uk @LeonieWatson 35

×