keyboard accessibility

70
Keyboard accessibility Patrick H. Lauke / Future of Web Design Tour / Glasgow / 14 September 2009 BASIC STEPS TOWARDS A MORE USABLE AND ACCESSIBLE SITE

Upload: akira9515

Post on 23-Jun-2015

3.106 views

Category:

Technology


2 download

TRANSCRIPT

Page 1: keyboard accessibility

Keyboard accessibility

Patrick H. Lauke / Future of Web Design Tour / Glasgow / 14 September 2009

BASIC STEPS TOWARDS A MORE USABLE AND ACCESSIBLE SITE

Page 2: keyboard accessibility

accessibility = blind users + screenreaders?

Page 3: keyboard accessibility

difficult to test – need to install and learn screenreader

Page 4: keyboard accessibility

many different forms of disability

Page 5: keyboard accessibility

keyboard or keyboard-like interfaces

Page 6: keyboard accessibility

easiest to test…no special software required

Page 7: keyboard accessibility
Page 8: keyboard accessibility
Page 9: keyboard accessibility

by default users TAB

Page 10: keyboard accessibility
Page 11: keyboard accessibility

using keyboard, move from one focusable element to the next

Page 12: keyboard accessibility

standard focusable elements:links, form elements, image

map areas

Page 13: keyboard accessibility
Page 14: keyboard accessibility
Page 15: keyboard accessibility
Page 16: keyboard accessibility
Page 17: keyboard accessibility
Page 18: keyboard accessibility

don’t forget the fancy styling

Page 20: keyboard accessibility

a.action:hover {background-color:#a82310;color:#fff !important;text-decoration:none;

}

#promo-dvd .content a:hover img {background-color:#d5c7ae;

}

Page 21: keyboard accessibility

a:focus, a:hover, a:active { … }

Page 22: keyboard accessibility

don’t suppress outline!

Page 24: keyboard accessibility

keyboard accessible, but where am I?

Page 25: keyboard accessibility

/* =Reset Styles - Thank you Eric Meyer (http://meyerweb.com/eric/thoughts/2007/05/01/reset-reloaded/) */

html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, font, img, ins, kbd, q, s, samp, small, strike, strong, tt, var, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td {margin: 0;padding: 0;border: 0;outline: 0;font-weight: inherit;font-style: inherit;font-size: 100%;font-family: inherit;vertical-align: baseline;

}:focus {

outline: 0;}

Page 26: keyboard accessibility

/* remember to define focus styles! */

Page 27: keyboard accessibility

why do designers suppress outline?

Page 29: keyboard accessibility

“get your outline out of my design!”

…is there a compromise?

Page 30: keyboard accessibility
Page 31: keyboard accessibility
Page 32: keyboard accessibility

a { … overflow: hidden; }

Page 34: keyboard accessibility

…only suppress it on :active

Page 35: keyboard accessibility

TAB cycle – normally just source order

Page 36: keyboard accessibility

tabindex forces a certain TAB cycle

Page 37: keyboard accessibility

anything with tabindex takes precedence

Page 39: keyboard accessibility

<input type="text" name="author"…tabindex="1" />

<input type="text" name="email"…tabindex="2" />

<input type="text" name="url"…tabindex="3" />

<textarea name="comment"…tabindex="4"></textarea>

Page 40: keyboard accessibility

easy enough…let’s drop in some JavaScript

Page 41: keyboard accessibility
Page 43: keyboard accessibility

keyboard accessible, but where’s the extra information?

Page 44: keyboard accessibility

$('#whatever').hover(function() {…},function() {…}

);

Page 45: keyboard accessibility

$('#whatever').hover(function() {…},function() {…}

);$('#whatever').focus(function() {…});$('#whatever').blur(function() {…} );

Page 46: keyboard accessibility

aside: mobile browsers don’t do hover (well)

Page 47: keyboard accessibility

lightboxes…we love ’em

Page 49: keyboard accessibility

close it again on TABdon’t invent new keyboard

shortcuts

Page 50: keyboard accessibility

more complex solution: manage focus

Page 51: keyboard accessibility

and now, the dangerous part…

Page 52: keyboard accessibility

JavaScript attaches behaviour to anything

Page 53: keyboard accessibility

$('div').click(function() {…} );

Page 54: keyboard accessibility

sexy tutorials out there doing it wrong

Page 56: keyboard accessibility

be lazy…use libraries that solved this

YUI, jQueryUI, etc

Page 57: keyboard accessibility

beware 3rd party solutionseven the big boys can get it wrong

Page 58: keyboard accessibility
Page 59: keyboard accessibility
Page 61: keyboard accessibility

hijack generated markup to accessify it

Page 62: keyboard accessibility

in conclusion…

Page 63: keyboard accessibility

if you style :hover, also :focus and :active

Page 64: keyboard accessibility

don’t suppress outline completely(reintroduce :focus and

suppress :active)

Page 65: keyboard accessibility

leave tabindex alone – source order

Page 66: keyboard accessibility

JavaScript on hover (mouseover/mouseout) also on

focus/blur(if focusable element)

Page 67: keyboard accessibility

lightboxes and their problems

Page 68: keyboard accessibility

only attach behaviour to focusable elements

Page 69: keyboard accessibility

</rant>