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
INTERFACES
EVERYONE WANTS TO USE
Léonie Watson

@LEONIEWATSON HTTP://LJWATSON.CO.UK
DESIGN LIKE BANKSY
Read the rule book, then rip it up and create
something that challenges the accepted wisdom

ACCESSIBILITY STIFLES INNOVATION

ACCESSIBILITY KILLS CREATIVITY

ACCESSIBILITY IS DIFFICULT

ACCESSIBILITY IS IRRELEVANT

DESIGN LIKE DA VINCI
Be 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 CHANEL
Strive 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

ACCESSIBILITY MECHANICS

DOM TREE

ACCESSIBILITY TREE

ROLE
<input type="checkbox" id="drink" checked>
<label for="drink">Tequila</label>

STATE

PROPERTIES

ACCESSIBILITY APIS
MSAA/UIAutmoation Windows
IAccessible2 Windows Linux
AT-SPI Linux
NSAccessibility OSX
UIAccessibility iOS
Accessibility Framework Android

DESIGN LIKE BRUNEL
Know 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 FUNCTIONALITY
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

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

More Related Content

What's hot (20)

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

More from Future Insights (20)

Recently uploaded (20)

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