Design Like You Give a Damn: Creating Accessible Interfaces that Everyone Wants to Use (Leonie Watson)

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

CREATING ACCESSIBLE

INTERFACESEVERYONE WANTS TO USE

Léonie Watson

@LEONIEWATSON HTTP://LJWATSON.CO.UK

DESIGN LIKE BANKSYRead the rule book, then rip it up and create

something that challenges the accepted wisdom


ACCESSIBILIT Y S TIFLES INNOVATION


ACCESSIBILIT Y KILLS CREATIVIT Y


ACCESSIBILIT Y IS DIFFICULT


ACCESSIBILIT Y IS IRRELEVANT


DESIGN LIKE DA VINCIBe curious about everything, and never stop

questioning how you can make things better


PERFECT IS THE ENEMY OF GOOD


DON’T CHUCK IT OVER THE WALL


INTERACTION


DESIGN


CHOICE


COMMUNICATE


DESIGN LIKE CHANELStrive for beauty and elegance, but understand that

those things will not be the same for everybody.


ONCE MORE FROM THE TOP


JUMPING AROUND


LANDMARKS AHOY


MODUS OPERANDI

something


ACCESSIBILIT Y MECHANICS


DOM TREE


ACCESSIBILIT Y TREE


ROLE

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

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


STATE




PROPERTIES




ACCESSIBILIT Y APIS

MSAA/UIAutmoation Windows

IAccessible2 Windows Linux

AT-SPI Linux

NSAccessibility OSX

UIAccessibility iOS

Accessibility Framework Android


DESIGN LIKE BRUNELKnow that planning is important, but that

imagination makes the extraordinary possible


SKELETON HTML

<span id="button">Tequila <span

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

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


USING A MOUSE


USING A KEYBOARD


ADD ROLE

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

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


ADD TABINDEX

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



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;

}


ADD EVENT LISTENERS

document.getElementById("button").addEventListe

ner("click", toggleDisclosure);

document.getElementById("button").addEventListe

ner("keydown", toggleDisclosure);


ADD KEYBOARD INTERACTION

function toggleDisclosure(event)

{

var type = event.type;

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

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

{

return true

}

event.preventDefault();

}


ADD ARIA-EXPANDED

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

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



ADD STATE VISUALS

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

content: ' ›';

}

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

content: ' ×';

}


ADD ARIA-CONTROLS

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

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


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


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>


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;

}


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

}

}


USING A SCREEN READER

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

Léonie Watson @leoniewatson