Accessibility mechanics, APIs & ARIA (2015)

@LeonieWatson tink.uk 1

Accessibility mechanics, APIs & ARIA

FrontEnd conf, Zurich

@LeonieWatson tink.uk 2

HTML anatomy

@LeonieWatson tink.uk 3

Roles

• Most HTML elements have default implicit roles

@LeonieWatson tink.uk 4

<img> element

• Has an implicit role of "graphic" or "image"

<img src="bottle.png" alt="Chamuco's tequila">

@LeonieWatson tink.uk 5

<main> element

• Has an implicit landmark role of "main"

<main>…</main>

@LeonieWatson tink.uk 6

<span> & <div> elements

• Have weak roles, so are "semantically neutral"

<div>This is text</div><span>So is this</span>

@LeonieWatson tink.uk 7

Name

• Many HTML elements can have an accessible name

@LeonieWatson tink.uk 8

<a> element

• Has accessible name of “tink.uk"

<a href=http://tink.uk>tink.uk</a>

@LeonieWatson tink.uk 9

<img> element

• Has accessible name of "Chamuco's tequila"

<img src="bottle.png" alt="Chamuco's tequila">

@LeonieWatson tink.uk 10

<input> element

• Has accessible name of "Yes"

<label><input type="radio" name="choice">Yes

</label>

@LeonieWatson tink.uk 11

States

• Some elements have different states

@LeonieWatson tink.uk 12

<input> element

• Has a state of "checked"

<label><input type="checkbox" checked>Agree

</label>

@LeonieWatson tink.uk 13

<select> element

• Has a state of "required"

<label>Colour*<select required>…</select>

</label>

@LeonieWatson tink.uk 14

Focus

• All interactive HTML elements have focus and keyboard support built-in

@LeonieWatson tink.uk 15

<a> element

• Can be focused on, and activated with the enter key

<a href=http://tink.uk>tink.uk</a>

@LeonieWatson tink.uk 16

<button> element

• Can take keyboard focus, and be activated with the enter or space keys

@LeonieWatson tink.uk 17

Accessibility APIs

• Expose semantic information to Assistive Technologies (AT)

@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

@LeonieWatson tink.uk 19

Platform control

• Role is "checkbox"• Name is "Bold"• State is "Focused Checked Focusable"

@LeonieWatson tink.uk 20

Web control

• Role is "checkbox"• Name is "Bold"• State is "Focused Checked Focusable"

<label><input type="checkbox" checked>Bold

</label>

@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/

@LeonieWatson tink.uk 22

Dom tree

@LeonieWatson tink.uk 23

Accessibility tree

@LeonieWatson tink.uk 24

Accessibility API access

• Accessibility APIs can't be accessed directly with JavaScript

@LeonieWatson tink.uk 25

ARIA

• ARIA 1.0 (W3C Recommendation)• ARIA 1.1 (W3C Working draft)

@LeonieWatson tink.uk 26

Roles

• 30+ roles including:– dialog– slider– toolbar– tree– tablist

@LeonieWatson tink.uk 27

alert role

• Important time-sensitive notifications

<section><div role="alert">Email deleted</div>

</section>

@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>

@LeonieWatson tink.uk 29

States

• 9 states including:– aria-checked– aria-pressed– aria-hidden– aria-invalid

@LeonieWatson tink.uk 30

Aria-pressed state

• Indicates whether a button is pressed

<button aria-pressed="true">Mute</button>

@LeonieWatson tink.uk 31

Aria-invalid state

• Indicates when a form field is invalid

<label>Email<input type="email" aria-invalid="true">

</label>

@LeonieWatson tink.uk 32

Properties

• 20+ properties including:– aria-controls– aria-describedby– aria-label– Aria-level

@LeonieWatson tink.uk 33

Aria-label property

• Provides an accessible name

<nav aria-label="Website">…</nav>

@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>

@LeonieWatson tink.uk 35

Aria-haspopup property

• Indicates that a popup menu is available

<button aria-haspopup="true">Menu</button>

@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>

@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

@LeonieWatson tink.uk 38

Visual ARIA

• Bookmarklet tool for visualising ARIA in action• http://whatsock.com/training/matrices/visual

-aria.htm

@LeonieWatson tink.uk 39

Vibration API

• Vibration API (W3C Recommendation)

@LeonieWatson tink.uk 40

if ("vibrate" in navigator){

//Make things vibrate.}

Detect API support

@LeonieWatson tink.uk 41

Single vibration

navigator.vibrate(500);navigator.vibrate([500]);

@LeonieWatson tink.uk 42

Repeated vibrations

navigator.vibrate([500, 500, 500]);

@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);

}

@LeonieWatson tink.uk 44

Web Speech API

• Web Speech API (Community specification)

@LeonieWatson tink.uk 45

SpeechRecognition interface

• Handles speech input for voice-controlled applications

@LeonieWatson tink.uk 46

SpeechSynthesis interface

• Handles speech output for self-voicing applications

@LeonieWatson tink.uk 47

Detect interface support

if (window.SpeechSynthesisUtterance === undefined){

// Make things talk.}

@LeonieWatson tink.uk 48

Simple speech

var utterance = new SpeechSynthesisUtterance("Tequila!");

window.speechSynthesis.speak(utterance);

@LeonieWatson tink.uk 49

Choose voicevar voices = speechSynthesis.getVoices();

utterance.voice = voices[3];

@LeonieWatson tink.uk 50

Change voice characteristics

utterance.rate(2);utterance.volume(1);utterance.pitch(2);

@LeonieWatson tink.uk 51

Thank you!