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.
Developer’s guide to
accessibility mechanics
Fluent 2016
Accessibility mechanics
@LeonieWatson tink.uk
Platform control
• Role is "checkbox"
• Name is "Bold"
• State is "Focused Checked Focusable"
@LeonieWatson tink.uk 3
Web control
• Role is "checkbox"
• Name is "Bold"
• State is "Focused Checked Focusable"
<label>
<input type="checkbox" ch...
Platform accessibility APIs
• Windows: MSAA UIAutomation IAccessible2
• Mac OS: NSAccessibility Protocol
• Linux: IAccessi...
Heading semantics
Landmark semantics
Dom tree
Accessibility tree
Neutral semantics<div> and <span> are
semantically neutral
• <div> and <span>
@LeonieWatson tink.uk
Link design pattern
Ljwatson.github.io/design-patterns/link1/link.html
@LeonieWatson tink.uk
Link demo
@LeonieWatson tink.uk
Link keyboard demo
@LeonieWatson tink.uk
HTML
<span id="link" data-link="http://tink.uk">
Tink UK
</span>
@LeonieWatson tink.uk
Add tabindex attribute
<span id="link" data-link=http://tink.uk >
Tink UK
</span>
@LeonieWatson tink.uk
Add focus styles
span:hover, span:focus, span:active {
color:#000;
background-color: #fc0;
cursor: pointer;
}
@LeonieWatso...
Add role attribute
<span id="link" data-link=http://tink.uk tabindex="0" >
Tink UK
</span>
@LeonieWatson tink.uk
Add event listeners
link.addEventListener("click", fetchResource);
link.addEventListener("keydown", fetchResource);
@Leoni...
Add functionality
var fetchResource = function (e) {
e.preventDefault();
window.location.href = e.target.dataset.link;
};
...
Add keyboard functionality
var fetchResource = function (e) {
if (e.type === "keydown" && e.keyCode !== 13) {
return false...
Link screen reader demo
@LeonieWatson tink.uk
ToggleTip design pattern
Ljwatson.github.io/design-patterns/toggletip2/toggletip.html
@LeonieWatson tink.uk
ToggleTip demo
@LeonieWatson tink.uk
ToggleTip keyboard demo
@LeonieWatson tink.uk
HTML
<span id="button">Tequila</span>
<div id="tip">
<span id="content"></span>
</div>
@LeonieWatson tink.uk
Add tabindex attribute
<span id="button" >Tequila</span>
<div id="tip">
<span id="content"></span>
</div>
@LeonieWatson ti...
Add focus styles
span[id="button"]:hover, span[id="button"]:focus {
background-color: #fc0;
color: #555;
}
@LeonieWatson t...
Add role attributes
<span id="button" tabindex="0" >Tequila</span>
<div id="tip" >
<span id="content" ></span>
</div>
@Leo...
Add aria-expanded attribute
<span id="button" tabindex="0" role="button"
>Tequila</span>
<div id="tip" role="complementary...
Add aria-describedby attribute
<span id="button" tabindex="0" role="button"
aria-expanded="false" >Tequila</span>
<div id=...
Add hidden attribute
<span id="button" tabindex="0" role="button"
aria-expanded="false" aria-describedby="tip">Tequila</sp...
Add aria-live attribute
<span id="button" tabindex="0" role="button"
aria-expanded="false" aria-describedby="tip">Tequila<...
Add event listeners
button.addEventListener('click', toggleTip, false);
button.addEventListener('keydown', function(e) {
i...
Add more keyboard interaction
document.addEventListener('keydown', function(e) {
if (e.keyCode == 27) {
toggleTip();
}
});...
If toggletip is hidden
button.setAttribute('aria-expanded', 'true');
content.innerHTML = "Makes me happy!";
tip.removeAttr...
If toggletip is not hidden
button.setAttribute('aria-expanded', 'false');
content.innerHTML = '';
tip.setAttribute('hidden...
ToggleTip screen reader demo
@LeonieWatson tink.uk
ToggleTip screen reader demo
@LeonieWatson tink.uk
Tab panels design pattern
Ljwatson.github.io/design-patterns/tabpanels1/tabpanel.html
@LeonieWatson tink.uk
HTML
<ul>
<li>
<a href="#panel1" id="tab1">Blanco</a>
</li>
<li>
<a href="#panel2" id="tab2">Reposado</a>
</li>
</ul>
@Leo...
More HTML
<div id="panel1">Blanco tequila…</div>
<div id="panel2">Reposado tequila…</div>
@LeonieWatson tink.uk
HTML screen reader demo
@LeonieWatson tink.uk
Add role attributes
<ul >
<li >
<a href="#panel1" id="tab1 >Blanco</a>
</li>
<li >
<a href="#panel2" id="tab2" >Reposado</...
Add another role attribute
<div id="panel1" >Blanco tequila…</div>
<div id="panel2" >Reposado tequila…</div>
@LeonieWatson...
Add aria-controls attribute
<ul role="tablist">
<li role="presentation">
<a href="#panel1" id="tab1 role="tab"
>Blanco</a>...
Add aria-selected attribute
<ul role="tablist">
<li role="presentation">
<a href="#panel1" id="tab1" role=tab" aria-contro...
Add tabindex attribute
<ul role="tablist">
<li role="presentation">
<a href="#panel1" id="tab1" role=tab" aria-controls="p...
Add hidden attribute
<div id="panel1" role="tabpanel">Blanco tequila…</div>
<div id="panel2" role="tabpanel" >Reposado teq...
Add aria-labelledby attribute
<div id="panel1" role="tabpanel" >
Blanco tequila…
</div>
<div id="panel2" role="tabpanel" h...
Add keyboard interaction
Listen for keydown, capture keycodes:
Left 37
Right 38
Up 39
Down 40
@LeonieWatson tink.uk
Tab panels screen reader demo
@LeonieWatson tink.uk
Quick & dirty accessibility
mechanics
Use the right HTML (let the browser do the work)
Provide focus and keyboard support
...
Thank you
Ljwatson.github.io/design-patterns/
@LeonieWatson tink.uk
Upcoming SlideShare
Loading in …5
×

Developer's guide to accessibility mechanics (Fluent 2016)

7,578 views

Published on

Understanding accessibility mechanics is an important part of good interface design. This developer’s guide to accessibility mechanics,
explains the relationship between code, the browser, and assistive technologies and demonstrates how to create accessible custom widgets with HTML,
CSS, ARIA, and JavaScript.

Published in: Technology

Developer's guide to accessibility mechanics (Fluent 2016)

  1. 1. Developer’s guide to accessibility mechanics Fluent 2016
  2. 2. Accessibility mechanics @LeonieWatson tink.uk
  3. 3. Platform control • Role is "checkbox" • Name is "Bold" • State is "Focused Checked Focusable" @LeonieWatson tink.uk 3
  4. 4. Web control • Role is "checkbox" • Name is "Bold" • State is "Focused Checked Focusable" <label> <input type="checkbox" checked>Bold </label> @LeonieWatson tink.uk 4
  5. 5. Platform accessibility APIs • Windows: MSAA UIAutomation IAccessible2 • Mac OS: NSAccessibility Protocol • Linux: IAccessible2 ATK/AT-ASPI • iOS: UIAccessibility • Android: Accessibility Framework @LeonieWatson tink.uk 5
  6. 6. Heading semantics
  7. 7. Landmark semantics
  8. 8. Dom tree
  9. 9. Accessibility tree
  10. 10. Neutral semantics<div> and <span> are semantically neutral • <div> and <span> @LeonieWatson tink.uk
  11. 11. Link design pattern Ljwatson.github.io/design-patterns/link1/link.html @LeonieWatson tink.uk
  12. 12. Link demo @LeonieWatson tink.uk
  13. 13. Link keyboard demo @LeonieWatson tink.uk
  14. 14. HTML <span id="link" data-link="http://tink.uk"> Tink UK </span> @LeonieWatson tink.uk
  15. 15. Add tabindex attribute <span id="link" data-link=http://tink.uk > Tink UK </span> @LeonieWatson tink.uk
  16. 16. Add focus styles span:hover, span:focus, span:active { color:#000; background-color: #fc0; cursor: pointer; } @LeonieWatson tink.uk
  17. 17. Add role attribute <span id="link" data-link=http://tink.uk tabindex="0" > Tink UK </span> @LeonieWatson tink.uk
  18. 18. Add event listeners link.addEventListener("click", fetchResource); link.addEventListener("keydown", fetchResource); @LeonieWatson tink.uk
  19. 19. Add functionality var fetchResource = function (e) { e.preventDefault(); window.location.href = e.target.dataset.link; }; @LeonieWatson tink.uk
  20. 20. Add keyboard functionality var fetchResource = function (e) { if (e.type === "keydown" && e.keyCode !== 13) { return false; } e.preventDefault(); window.location.href = e.target.dataset.link; }; @LeonieWatson tink.uk
  21. 21. Link screen reader demo @LeonieWatson tink.uk
  22. 22. ToggleTip design pattern Ljwatson.github.io/design-patterns/toggletip2/toggletip.html @LeonieWatson tink.uk
  23. 23. ToggleTip demo @LeonieWatson tink.uk
  24. 24. ToggleTip keyboard demo @LeonieWatson tink.uk
  25. 25. HTML <span id="button">Tequila</span> <div id="tip"> <span id="content"></span> </div> @LeonieWatson tink.uk
  26. 26. Add tabindex attribute <span id="button" >Tequila</span> <div id="tip"> <span id="content"></span> </div> @LeonieWatson tink.uk
  27. 27. Add focus styles span[id="button"]:hover, span[id="button"]:focus { background-color: #fc0; color: #555; } @LeonieWatson tink.uk
  28. 28. Add role attributes <span id="button" tabindex="0" >Tequila</span> <div id="tip" > <span id="content" ></span> </div> @LeonieWatson tink.uk
  29. 29. Add aria-expanded attribute <span id="button" tabindex="0" role="button" >Tequila</span> <div id="tip" role="complementary"> <span id="content" role="tooltip"></span> </div> @LeonieWatson tink.uk
  30. 30. Add aria-describedby attribute <span id="button" tabindex="0" role="button" aria-expanded="false" >Tequila</span> <div id="tip" role="complementary"> <span id="content" role="tooltip"></span> </div> @LeonieWatson tink.uk
  31. 31. Add hidden attribute <span id="button" tabindex="0" role="button" aria-expanded="false" aria-describedby="tip">Tequila</span> <div id="tip" role="complementary" > <span id="content" role="tooltip"></span> </div> @LeonieWatson tink.uk
  32. 32. Add aria-live attribute <span id="button" tabindex="0" role="button" aria-expanded="false" aria-describedby="tip">Tequila</span> <div id="tip" role="complementary" hidden> <span id="content" role="tooltip" ></span> </div> @LeonieWatson tink.uk
  33. 33. Add event listeners button.addEventListener('click', toggleTip, false); button.addEventListener('keydown', function(e) { if (e.keyCode == 13 || e.keycode == 32) { toggleTip(); } }); @LeonieWatson tink.uk
  34. 34. Add more keyboard interaction document.addEventListener('keydown', function(e) { if (e.keyCode == 27) { toggleTip(); } }); @LeonieWatson tink.uk
  35. 35. If toggletip is hidden button.setAttribute('aria-expanded', 'true'); content.innerHTML = "Makes me happy!"; tip.removeAttribute('hidden'); @LeonieWatson tink.uk
  36. 36. If toggletip is not hidden button.setAttribute('aria-expanded', 'false'); content.innerHTML = ''; tip.setAttribute('hidden', true); @LeonieWatson tink.uk
  37. 37. ToggleTip screen reader demo @LeonieWatson tink.uk
  38. 38. ToggleTip screen reader demo @LeonieWatson tink.uk
  39. 39. Tab panels design pattern Ljwatson.github.io/design-patterns/tabpanels1/tabpanel.html @LeonieWatson tink.uk
  40. 40. HTML <ul> <li> <a href="#panel1" id="tab1">Blanco</a> </li> <li> <a href="#panel2" id="tab2">Reposado</a> </li> </ul> @LeonieWatson tink.uk
  41. 41. More HTML <div id="panel1">Blanco tequila…</div> <div id="panel2">Reposado tequila…</div> @LeonieWatson tink.uk
  42. 42. HTML screen reader demo @LeonieWatson tink.uk
  43. 43. Add role attributes <ul > <li > <a href="#panel1" id="tab1 >Blanco</a> </li> <li > <a href="#panel2" id="tab2" >Reposado</a> </li> </ul> @LeonieWatson tink.uk
  44. 44. Add another role attribute <div id="panel1" >Blanco tequila…</div> <div id="panel2" >Reposado tequila…</div> @LeonieWatson tink.uk
  45. 45. Add aria-controls attribute <ul role="tablist"> <li role="presentation"> <a href="#panel1" id="tab1 role="tab" >Blanco</a> </li> </ul> <div id="panel1" role="tabpanel">Blanco tequila…</div> @LeonieWatson tink.uk
  46. 46. Add aria-selected attribute <ul role="tablist"> <li role="presentation"> <a href="#panel1" id="tab1" role=tab" aria-controls="panel1“ >Blanco</a> </li> <li role="presentation"> <a href="#panel2" id="tab2" role="tab" aria-controls="panel2“ >Reposado</a> </li> </ul> @LeonieWatson tink.uk
  47. 47. Add tabindex attribute <ul role="tablist"> <li role="presentation"> <a href="#panel1" id="tab1" role=tab" aria-controls="panel1“ aria-selected="true" >Blanco</a> </li> <li role="presentation"> <a href="#panel2" id="tab2" role="tab" aria-controls="panel2“ aria-selected="false" >Reposado</a> </li> </ul> @LeonieWatson tink.uk
  48. 48. Add hidden attribute <div id="panel1" role="tabpanel">Blanco tequila…</div> <div id="panel2" role="tabpanel" >Reposado tequila…</div> @LeonieWatson tink.uk
  49. 49. Add aria-labelledby attribute <div id="panel1" role="tabpanel" > Blanco tequila… </div> <div id="panel2" role="tabpanel" hidden> Reposado tequila… </div> @LeonieWatson tink.uk
  50. 50. Add keyboard interaction Listen for keydown, capture keycodes: Left 37 Right 38 Up 39 Down 40 @LeonieWatson tink.uk
  51. 51. Tab panels screen reader demo @LeonieWatson tink.uk
  52. 52. Quick & dirty accessibility mechanics Use the right HTML (let the browser do the work) Provide focus and keyboard support Provide accessible names and descriptions Communicate state @LeonieWatson tink.uk
  53. 53. Thank you Ljwatson.github.io/design-patterns/ @LeonieWatson tink.uk

×