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