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.
Accessibility mechanics, APIs &
ARIA
FrontEnd conf, Zurich
@LeonieWatson tink.uk 1
HTML anatomy
@LeonieWatson tink.uk 2
Roles
• Most HTML elements have default implicit
roles
@LeonieWatson tink.uk 3
<img> element
• Has an implicit role of "graphic" or "image"
<img src="bottle.png" alt="Chamuco's tequila">
@LeonieWatson ...
<main> element
• Has an implicit landmark role of "main"
<main>…</main>
@LeonieWatson tink.uk 5
<span> & <div> elements
• Have weak roles, so are "semantically neutral"
<div>This is text</div>
<span>So is this</span>
@...
Name
• Many HTML elements can have an accessible
name
@LeonieWatson tink.uk 7
<a> element
• Has accessible name of “tink.uk"
<a href=http://tink.uk>tink.uk</a>
@LeonieWatson tink.uk 8
<img> element
• Has accessible name of "Chamuco's tequila"
<img src="bottle.png" alt="Chamuco's tequila">
@LeonieWatson ti...
<input> element
• Has accessible name of "Yes"
<label>
<input type="radio" name="choice">Yes
</label>
@LeonieWatson tink.u...
States
• Some elements have different states
@LeonieWatson tink.uk 11
<input> element
• Has a state of "checked"
<label>
<input type="checkbox" checked>Agree
</label>
@LeonieWatson tink.uk 12
<select> element
• Has a state of "required"
<label>Colour*
<select required>…</select>
</label>
@LeonieWatson tink.uk 13
Focus
• All interactive HTML elements have focus and
keyboard support built-in
@LeonieWatson tink.uk 14
<a> element
• Can be focused on, and activated with the
enter key
<a href=http://tink.uk>tink.uk</a>
@LeonieWatson tink.uk...
<button> element
• Can take keyboard focus, and be activated
with the enter or space keys
@LeonieWatson tink.uk 16
Accessibility APIs
• Expose semantic information to Assistive
Technologies (AT)
@LeonieWatson tink.uk 17
Platform accessibility APIs
• Windows: MSAA UIAutomation IAccessible2
• Mac OS: NSAccessibility Protocol
• Linux: IAccessi...
Platform control
• Role is "checkbox"
• Name is "Bold"
• State is "Focused Checked Focusable"
@LeonieWatson tink.uk 19
Web control
• Role is "checkbox"
• Name is "Bold"
• State is "Focused Checked Focusable"
<label>
<input type="checkbox" ch...
HTML accessibility API mappings
• Mappings between HTML elements and
attributes and the platform accessibility APIs
• http...
Dom tree
@LeonieWatson tink.uk 22
Accessibility tree
@LeonieWatson tink.uk 23
Accessibility API access
• Accessibility APIs can't be accessed directly
with JavaScript
@LeonieWatson tink.uk 24
ARIA
• ARIA 1.0 (W3C Recommendation)
• ARIA 1.1 (W3C Working draft)
@LeonieWatson tink.uk 25
Roles
• 30+ roles including:
– dialog
– slider
– toolbar
– tree
– tablist
@LeonieWatson tink.uk 26
alert role
• Important time-sensitive notifications
<section>
<div role="alert">Email deleted</div>
</section>
@LeonieWats...
note role
Note relevant to the main content
<div role="note">
Loves cooking, dancing, and drinking tequila
(although not n...
States
• 9 states including:
– aria-checked
– aria-pressed
– aria-hidden
– aria-invalid
@LeonieWatson tink.uk 29
Aria-pressed state
• Indicates whether a button is pressed
<button aria-pressed="true">Mute</button>
@LeonieWatson tink.uk...
Aria-invalid state
• Indicates when a form field is invalid
<label>Email
<input type="email" aria-invalid="true">
</label>...
Properties
• 20+ properties including:
– aria-controls
– aria-describedby
– aria-label
– Aria-level
@LeonieWatson tink.uk ...
Aria-label property
• Provides an accessible name
<nav aria-label="Website">…</nav>
@LeonieWatson tink.uk 33
Aria-describedby property
• Provides an accessible description
<label>Date of birth
<input type="text" aria-describedby="f...
Aria-haspopup property
• Indicates that a popup menu is available
<button aria-haspopup="true">Menu</button>
@LeonieWatson...
Slider example
<span id="sLabel">Volume</span>
<button role="slider"
aria-labelledby="sLabel“
aria-valuemin="0“
aria-value...
ARIA constraints
• Doesn't change the DOM, only the
accessibility tree
• Is only available to assistive technologies
• Doe...
Visual ARIA
• Bookmarklet tool for visualising ARIA in action
• http://whatsock.com/training/matrices/visual
-aria.htm
@Le...
Vibration API
• Vibration API (W3C Recommendation)
@LeonieWatson tink.uk 39
if ("vibrate" in navigator)
{
//Make things vibrate.
}
@LeonieWatson tink.uk 40
Detect API support
Single vibration
navigator.vibrate(500);
navigator.vibrate([500]);
@LeonieWatson tink.uk 41
Repeated vibrations
navigator.vibrate([500, 500, 500]);
@LeonieWatson tink.uk 42
Vibration API example
if ("vibrate" in navigator)
{
var vibrateOnce = function (e)
{
window.navigator.vibrate(500);
};
doc...
Web Speech API
• Web Speech API (Community specification)
@LeonieWatson tink.uk 44
SpeechRecognition interface
• Handles speech input for voice-controlled
applications
@LeonieWatson tink.uk 45
SpeechSynthesis interface
• Handles speech output for self-voicing
applications
@LeonieWatson tink.uk 46
Detect interface support
if (window.SpeechSynthesisUtterance === undefined)
{
// Make things talk.
}
@LeonieWatson tink.uk...
Simple speech
var utterance = new SpeechSynthesisUtterance("Tequila!");
window.speechSynthesis.speak(utterance);
@LeonieWa...
Choose voice
var voices = speechSynthesis.getVoices();
utterance.voice = voices[3];
@LeonieWatson tink.uk 49
Change voice characteristics
utterance.rate(2);
utterance.volume(1);
utterance.pitch(2);
@LeonieWatson tink.uk 50
Thank you!
@LeonieWatson tink.uk 51
Upcoming SlideShare
Loading in …5
×

Accessibility mechanics, APIs & ARIA (2015)

1,197 views

Published on

Understanding accessibility mechanics is a critical thing for developers working on the web platform. Find out how to use ARIA to manipulate the browser’s
accessibility tree, why accessibility APIs are important, and how to use the Vibration API and Web Speech API for progressive user experience.

Published in: Technology

Accessibility mechanics, APIs & ARIA (2015)

  1. 1. Accessibility mechanics, APIs & ARIA FrontEnd conf, Zurich @LeonieWatson tink.uk 1
  2. 2. HTML anatomy @LeonieWatson tink.uk 2
  3. 3. Roles • Most HTML elements have default implicit roles @LeonieWatson tink.uk 3
  4. 4. <img> element • Has an implicit role of "graphic" or "image" <img src="bottle.png" alt="Chamuco's tequila"> @LeonieWatson tink.uk 4
  5. 5. <main> element • Has an implicit landmark role of "main" <main>…</main> @LeonieWatson tink.uk 5
  6. 6. <span> & <div> elements • Have weak roles, so are "semantically neutral" <div>This is text</div> <span>So is this</span> @LeonieWatson tink.uk 6
  7. 7. Name • Many HTML elements can have an accessible name @LeonieWatson tink.uk 7
  8. 8. <a> element • Has accessible name of “tink.uk" <a href=http://tink.uk>tink.uk</a> @LeonieWatson tink.uk 8
  9. 9. <img> element • Has accessible name of "Chamuco's tequila" <img src="bottle.png" alt="Chamuco's tequila"> @LeonieWatson tink.uk 9
  10. 10. <input> element • Has accessible name of "Yes" <label> <input type="radio" name="choice">Yes </label> @LeonieWatson tink.uk 10
  11. 11. States • Some elements have different states @LeonieWatson tink.uk 11
  12. 12. <input> element • Has a state of "checked" <label> <input type="checkbox" checked>Agree </label> @LeonieWatson tink.uk 12
  13. 13. <select> element • Has a state of "required" <label>Colour* <select required>…</select> </label> @LeonieWatson tink.uk 13
  14. 14. Focus • All interactive HTML elements have focus and keyboard support built-in @LeonieWatson tink.uk 14
  15. 15. <a> element • Can be focused on, and activated with the enter key <a href=http://tink.uk>tink.uk</a> @LeonieWatson tink.uk 15
  16. 16. <button> element • Can take keyboard focus, and be activated with the enter or space keys @LeonieWatson tink.uk 16
  17. 17. Accessibility APIs • Expose semantic information to Assistive Technologies (AT) @LeonieWatson tink.uk 17
  18. 18. Platform accessibility APIs • Windows: MSAA UIAutomation IAccessible2 • Mac OS: NSAccessibility Protocol • Linux: IAccessible2 ATK/AT-ASPI • iOS: UIAccessibility • Android: Accessibility Framework @LeonieWatson tink.uk 18
  19. 19. Platform control • Role is "checkbox" • Name is "Bold" • State is "Focused Checked Focusable" @LeonieWatson tink.uk 19
  20. 20. Web control • Role is "checkbox" • Name is "Bold" • State is "Focused Checked Focusable" <label> <input type="checkbox" checked>Bold </label> @LeonieWatson tink.uk 20
  21. 21. HTML accessibility API mappings • Mappings between HTML elements and attributes and the platform accessibility APIs • http://www.w3.org/TR/html-aam-1.0/ @LeonieWatson tink.uk 21
  22. 22. Dom tree @LeonieWatson tink.uk 22
  23. 23. Accessibility tree @LeonieWatson tink.uk 23
  24. 24. Accessibility API access • Accessibility APIs can't be accessed directly with JavaScript @LeonieWatson tink.uk 24
  25. 25. ARIA • ARIA 1.0 (W3C Recommendation) • ARIA 1.1 (W3C Working draft) @LeonieWatson tink.uk 25
  26. 26. Roles • 30+ roles including: – dialog – slider – toolbar – tree – tablist @LeonieWatson tink.uk 26
  27. 27. alert role • Important time-sensitive notifications <section> <div role="alert">Email deleted</div> </section> @LeonieWatson tink.uk 27
  28. 28. note role Note relevant to the main content <div role="note"> Loves cooking, dancing, and drinking tequila (although not necessarily in that order). </div> @LeonieWatson tink.uk 28
  29. 29. States • 9 states including: – aria-checked – aria-pressed – aria-hidden – aria-invalid @LeonieWatson tink.uk 29
  30. 30. Aria-pressed state • Indicates whether a button is pressed <button aria-pressed="true">Mute</button> @LeonieWatson tink.uk 30
  31. 31. Aria-invalid state • Indicates when a form field is invalid <label>Email <input type="email" aria-invalid="true"> </label> @LeonieWatson tink.uk 31
  32. 32. Properties • 20+ properties including: – aria-controls – aria-describedby – aria-label – Aria-level @LeonieWatson tink.uk 32
  33. 33. Aria-label property • Provides an accessible name <nav aria-label="Website">…</nav> @LeonieWatson tink.uk 33
  34. 34. Aria-describedby property • Provides an accessible description <label>Date of birth <input type="text" aria-describedby="format"> </label> <p id="format">Date must be DD/MM/YYYY</p> @LeonieWatson tink.uk 34
  35. 35. Aria-haspopup property • Indicates that a popup menu is available <button aria-haspopup="true">Menu</button> @LeonieWatson tink.uk 35
  36. 36. Slider example <span id="sLabel">Volume</span> <button role="slider" aria-labelledby="sLabel“ aria-valuemin="0“ aria-valuemax="100“ aria-valuenow="0“ aria-valuetext="0%"> </button> @LeonieWatson tink.uk 36
  37. 37. ARIA constraints • Doesn't change the DOM, only the accessibility tree • Is only available to assistive technologies • Doesn't provide functionality or behaviour @LeonieWatson tink.uk 37
  38. 38. Visual ARIA • Bookmarklet tool for visualising ARIA in action • http://whatsock.com/training/matrices/visual -aria.htm @LeonieWatson tink.uk 38
  39. 39. Vibration API • Vibration API (W3C Recommendation) @LeonieWatson tink.uk 39
  40. 40. if ("vibrate" in navigator) { //Make things vibrate. } @LeonieWatson tink.uk 40 Detect API support
  41. 41. Single vibration navigator.vibrate(500); navigator.vibrate([500]); @LeonieWatson tink.uk 41
  42. 42. Repeated vibrations navigator.vibrate([500, 500, 500]); @LeonieWatson tink.uk 42
  43. 43. Vibration API example if ("vibrate" in navigator) { var vibrateOnce = function (e) { window.navigator.vibrate(500); }; document.getElementById("v1") .addEventListener("click", vibrateOnce); } @LeonieWatson tink.uk 43
  44. 44. Web Speech API • Web Speech API (Community specification) @LeonieWatson tink.uk 44
  45. 45. SpeechRecognition interface • Handles speech input for voice-controlled applications @LeonieWatson tink.uk 45
  46. 46. SpeechSynthesis interface • Handles speech output for self-voicing applications @LeonieWatson tink.uk 46
  47. 47. Detect interface support if (window.SpeechSynthesisUtterance === undefined) { // Make things talk. } @LeonieWatson tink.uk 47
  48. 48. Simple speech var utterance = new SpeechSynthesisUtterance("Tequila!"); window.speechSynthesis.speak(utterance); @LeonieWatson tink.uk 48
  49. 49. Choose voice var voices = speechSynthesis.getVoices(); utterance.voice = voices[3]; @LeonieWatson tink.uk 49
  50. 50. Change voice characteristics utterance.rate(2); utterance.volume(1); utterance.pitch(2); @LeonieWatson tink.uk 50
  51. 51. Thank you! @LeonieWatson tink.uk 51

×