ARIA, accessibility APIs & coding like you give a damn! (2015)

32
@ LEONIEWATSON HTTP://LJWATSON.CO.UK @LEONIEWATSON HTTP://LJWATSON.CO.UK ARIA, ACCESSIBILITY APIS & CODING LIKE YOU GIVE A DAMN! Léonie Watson

Transcript of ARIA, accessibility APIs & coding like you give a damn! (2015)

@LEONIEWATSON HTTP://LJWATSON.CO.UK@LEONIEWATSON HTTP://LJWATSON.CO.UK

ARIA, ACCESSIBILITY APIS & CODING LIKE YOU GIVE A

DAMN!

Léonie Watson

@LEONIEWATSON HTTP://LJWATSON.CO.UK

FROM THE TOP

@LEONIEWATSON HTTP://LJWATSON.CO.UK

ACCESSIBILIT Y APIS

MSAA/UIAutmoation Windows

IAccessible2 Windows Linux

AT-SPI Linux

NSAccessibility OSX

UIAccessibility iOS

Accessibility Framework Android

@LEONIEWATSON HTTP://LJWATSON.CO.UK

ACCESSIBILIT Y STACK

A S S I S T I V E T E C H N O L O G Y

B R O W S E R

O P E R AT I N G S Y S T E M

A C C E S S I B I L I T Y A P I

@LEONIEWATSON HTTP://LJWATSON.CO.UK

DOM TREE

@LEONIEWATSON HTTP://LJWATSON.CO.UK

ACCESSIBILIT Y TREE

@LEONIEWATSON HTTP://LJWATSON.CO.UK

ROLE

<input type="checkbox" id="drink" checked>

<label for="drink">Tequila</label>

@LEONIEWATSON HTTP://LJWATSON.CO.UK

STATE

<input type="checkbox" id="drink" checked>

<label for="drink">Tequila</label>

@LEONIEWATSON HTTP://LJWATSON.CO.UK

PROPERTIES

<input type="checkbox" id="drink" checked>

<label for="drink">Tequila</label>

@LEONIEWATSON HTTP://LJWATSON.CO.UK

SEMANTIC NAVIGATION

@LEONIEWATSON HTTP://LJWATSON.CO.UK

L ANDMARK NAVIGATION

@LEONIEWATSON HTTP://LJWATSON.CO.UK

JAVASCRIPT

@LEONIEWATSON HTTP://LJWATSON.CO.UK

ARIA

@LEONIEWATSON HTTP://LJWATSON.CO.UK

USING ARIA WITH HTML , CSS &

JAVASCRIPT

@LEONIEWATSON HTTP://LJWATSON.CO.UK

SKELETON HTML

<span id="button">Tequila <span

id="icon"></span></span>

<div id="content">Makes me happy...</div>

@LEONIEWATSON HTTP://LJWATSON.CO.UK

USING A MOUSE

@LEONIEWATSON HTTP://LJWATSON.CO.UK

USING A KEYBOARD

@LEONIEWATSON HTTP://LJWATSON.CO.UK

ADD ROLE

<span id="button" role="button”>

Tequila <span id="icon"></span></span>

@LEONIEWATSON HTTP://LJWATSON.CO.UK

ADD TABINDEX

<span id="button" role="button" tabindex="0”>

Tequila <span id="icon"></span></span>

@LEONIEWATSON HTTP://LJWATSON.CO.UK

ADD FOCUS VISUALS

[role="button"]:hover, [role="button"]:focus {

background-color: #333;

color: #fff;

text-shadow: 0 -1px 0 #444;

box-shadow: 0 1px 0 #666;

}

@LEONIEWATSON HTTP://LJWATSON.CO.UK

ADD EVENT LISTENERS

document.getElementById("button").addEventListe

ner("click", toggleDisclosure);

document.getElementById("button").addEventListe

ner("keydown", toggleDisclosure);

@LEONIEWATSON HTTP://LJWATSON.CO.UK

ADD KEYBOARD INTERACTION

function toggleDisclosure(event)

{

var type = event.type;

if (type === "keydown" && (event.keyCode !==

13 && event.keyCode !== 32))

{

return true

}

event.preventDefault();

}

@LEONIEWATSON HTTP://LJWATSON.CO.UK

ADD ARIA-EXPANDED

<span id="button" role="button"

tabindex="0" aria-expanded="false”>

Tequila <span id="icon"></span></span>

@LEONIEWATSON HTTP://LJWATSON.CO.UK

ADD STATE VISUALS

[role="button"][aria-expanded="false"] .icon:after {

content: ' ›';

}

[role="button"][aria-expanded="true"] .icon:after {

content: ' ×';

}

@LEONIEWATSON HTTP://LJWATSON.CO.UK

ADD ARIA-CONTROLS

<span id="button" role="button" tabindex="0"

aria-expanded="false" aria-controls="content">

Tequila <span id="icon"></span></span>

<div id="content">Makes me happy...</div>

@LEONIEWATSON HTTP://LJWATSON.CO.UK

ADD ARIA-HIDDEN

<span id="button" role="button" tabindex="0"

aria-expanded="false" aria-controls="content">

Tequila <span id="icon" aria-hidden="true">

</span></span>

<div id="content" aria-hidden="true">

Makes me happy</div>

@LEONIEWATSON HTTP://LJWATSON.CO.UK

ADD MORE STATE VISUALS

div[aria-hidden="true”] {

display: none;

}

div[aria-hidden="false”] {

display: block;

border: 1px #000 solid;

padding: 1em;

background: #555;

color: #FFF;

}

@LEONIEWATSON HTTP://LJWATSON.CO.UK

ADD FUNCTIONALIT Y

function toggleDisclosure(event)

{

var button = document.getElementById("button");

var content = document.getElementById("content");

if(content.getAttribute("aria-hidden") == "true")

{

content.setAttribute("aria-hidden", "false");

button.setAttribute("aria-expanded", "true");

}

else

{

content.setAttribute("aria-hidden", "true");

button.setAttribute("aria-expanded", "false");

}

}

@LEONIEWATSON HTTP://LJWATSON.CO.UK

USING A SCREEN READER

@LEONIEWATSON HTTP://LJWATSON.CO.UK

PERFECT IS THE ENEMY OF GOOD

@LEONIEWATSON HTTP://LJWATSON.CO.UK

CODE LIKE YOU GIVE A DAMN!

@LEONIEWATSON HTTP://LJWATSON.CO.UK@LEONIEWATSON HTTP://LJWATSON.CO.UK

Léonie Watson @leoniewatson