Keyboard accessibility
-
Upload
jescie-thompson -
Category
Documents
-
view
25 -
download
0
description
Transcript of Keyboard accessibility
![Page 1: Keyboard accessibility](https://reader030.fdocuments.net/reader030/viewer/2022020417/568135d2550346895d9d39c5/html5/thumbnails/1.jpg)
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](https://reader030.fdocuments.net/reader030/viewer/2022020417/568135d2550346895d9d39c5/html5/thumbnails/2.jpg)
accessibility = blind users + screenreaders?
![Page 3: Keyboard accessibility](https://reader030.fdocuments.net/reader030/viewer/2022020417/568135d2550346895d9d39c5/html5/thumbnails/3.jpg)
difficult to test – need to install and learn screenreader
![Page 4: Keyboard accessibility](https://reader030.fdocuments.net/reader030/viewer/2022020417/568135d2550346895d9d39c5/html5/thumbnails/4.jpg)
many different forms of disability
![Page 5: Keyboard accessibility](https://reader030.fdocuments.net/reader030/viewer/2022020417/568135d2550346895d9d39c5/html5/thumbnails/5.jpg)
keyboard or keyboard-like interfaces
![Page 6: Keyboard accessibility](https://reader030.fdocuments.net/reader030/viewer/2022020417/568135d2550346895d9d39c5/html5/thumbnails/6.jpg)
easiest to test…no special software required
![Page 7: Keyboard accessibility](https://reader030.fdocuments.net/reader030/viewer/2022020417/568135d2550346895d9d39c5/html5/thumbnails/7.jpg)
![Page 8: Keyboard accessibility](https://reader030.fdocuments.net/reader030/viewer/2022020417/568135d2550346895d9d39c5/html5/thumbnails/8.jpg)
![Page 9: Keyboard accessibility](https://reader030.fdocuments.net/reader030/viewer/2022020417/568135d2550346895d9d39c5/html5/thumbnails/9.jpg)
by default users TAB
![Page 10: Keyboard accessibility](https://reader030.fdocuments.net/reader030/viewer/2022020417/568135d2550346895d9d39c5/html5/thumbnails/10.jpg)
![Page 11: Keyboard accessibility](https://reader030.fdocuments.net/reader030/viewer/2022020417/568135d2550346895d9d39c5/html5/thumbnails/11.jpg)
using keyboard, move from one focusable element to the next
![Page 12: Keyboard accessibility](https://reader030.fdocuments.net/reader030/viewer/2022020417/568135d2550346895d9d39c5/html5/thumbnails/12.jpg)
standard focusable elements:links, form elements, image
map areas
![Page 13: Keyboard accessibility](https://reader030.fdocuments.net/reader030/viewer/2022020417/568135d2550346895d9d39c5/html5/thumbnails/13.jpg)
![Page 14: Keyboard accessibility](https://reader030.fdocuments.net/reader030/viewer/2022020417/568135d2550346895d9d39c5/html5/thumbnails/14.jpg)
![Page 15: Keyboard accessibility](https://reader030.fdocuments.net/reader030/viewer/2022020417/568135d2550346895d9d39c5/html5/thumbnails/15.jpg)
![Page 16: Keyboard accessibility](https://reader030.fdocuments.net/reader030/viewer/2022020417/568135d2550346895d9d39c5/html5/thumbnails/16.jpg)
![Page 17: Keyboard accessibility](https://reader030.fdocuments.net/reader030/viewer/2022020417/568135d2550346895d9d39c5/html5/thumbnails/17.jpg)
![Page 18: Keyboard accessibility](https://reader030.fdocuments.net/reader030/viewer/2022020417/568135d2550346895d9d39c5/html5/thumbnails/18.jpg)
don’t forget the fancy styling
![Page 20: Keyboard accessibility](https://reader030.fdocuments.net/reader030/viewer/2022020417/568135d2550346895d9d39c5/html5/thumbnails/20.jpg)
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](https://reader030.fdocuments.net/reader030/viewer/2022020417/568135d2550346895d9d39c5/html5/thumbnails/21.jpg)
a:focus, a:hover, a:active { … }
![Page 22: Keyboard accessibility](https://reader030.fdocuments.net/reader030/viewer/2022020417/568135d2550346895d9d39c5/html5/thumbnails/22.jpg)
don’t suppress outline!
![Page 24: Keyboard accessibility](https://reader030.fdocuments.net/reader030/viewer/2022020417/568135d2550346895d9d39c5/html5/thumbnails/24.jpg)
keyboard accessible, but where am I?
![Page 25: Keyboard accessibility](https://reader030.fdocuments.net/reader030/viewer/2022020417/568135d2550346895d9d39c5/html5/thumbnails/25.jpg)
/* =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](https://reader030.fdocuments.net/reader030/viewer/2022020417/568135d2550346895d9d39c5/html5/thumbnails/26.jpg)
/* remember to define focus styles! */
![Page 27: Keyboard accessibility](https://reader030.fdocuments.net/reader030/viewer/2022020417/568135d2550346895d9d39c5/html5/thumbnails/27.jpg)
why do designers suppress outline?
![Page 29: Keyboard accessibility](https://reader030.fdocuments.net/reader030/viewer/2022020417/568135d2550346895d9d39c5/html5/thumbnails/29.jpg)
“get your outline out of my design!”
…is there a compromise?
![Page 30: Keyboard accessibility](https://reader030.fdocuments.net/reader030/viewer/2022020417/568135d2550346895d9d39c5/html5/thumbnails/30.jpg)
![Page 31: Keyboard accessibility](https://reader030.fdocuments.net/reader030/viewer/2022020417/568135d2550346895d9d39c5/html5/thumbnails/31.jpg)
![Page 32: Keyboard accessibility](https://reader030.fdocuments.net/reader030/viewer/2022020417/568135d2550346895d9d39c5/html5/thumbnails/32.jpg)
a { … overflow: hidden; }
![Page 34: Keyboard accessibility](https://reader030.fdocuments.net/reader030/viewer/2022020417/568135d2550346895d9d39c5/html5/thumbnails/34.jpg)
…only suppress it on :active
![Page 35: Keyboard accessibility](https://reader030.fdocuments.net/reader030/viewer/2022020417/568135d2550346895d9d39c5/html5/thumbnails/35.jpg)
TAB cycle – normally just source order
![Page 36: Keyboard accessibility](https://reader030.fdocuments.net/reader030/viewer/2022020417/568135d2550346895d9d39c5/html5/thumbnails/36.jpg)
tabindex forces a certain TAB cycle
![Page 37: Keyboard accessibility](https://reader030.fdocuments.net/reader030/viewer/2022020417/568135d2550346895d9d39c5/html5/thumbnails/37.jpg)
anything with tabindex takes precedence
![Page 39: Keyboard accessibility](https://reader030.fdocuments.net/reader030/viewer/2022020417/568135d2550346895d9d39c5/html5/thumbnails/39.jpg)
<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](https://reader030.fdocuments.net/reader030/viewer/2022020417/568135d2550346895d9d39c5/html5/thumbnails/40.jpg)
easy enough…let’s drop in some JavaScript
![Page 41: Keyboard accessibility](https://reader030.fdocuments.net/reader030/viewer/2022020417/568135d2550346895d9d39c5/html5/thumbnails/41.jpg)
![Page 43: Keyboard accessibility](https://reader030.fdocuments.net/reader030/viewer/2022020417/568135d2550346895d9d39c5/html5/thumbnails/43.jpg)
keyboard accessible, but where’s the extra information?
![Page 44: Keyboard accessibility](https://reader030.fdocuments.net/reader030/viewer/2022020417/568135d2550346895d9d39c5/html5/thumbnails/44.jpg)
$('#whatever').hover(function() {…},function() {…}
);
![Page 45: Keyboard accessibility](https://reader030.fdocuments.net/reader030/viewer/2022020417/568135d2550346895d9d39c5/html5/thumbnails/45.jpg)
$('#whatever').hover(function() {…},function() {…}
);$('#whatever').focus(function() {…});$('#whatever').blur(function() {…} );
![Page 46: Keyboard accessibility](https://reader030.fdocuments.net/reader030/viewer/2022020417/568135d2550346895d9d39c5/html5/thumbnails/46.jpg)
aside: mobile browsers don’t do hover (well)
![Page 47: Keyboard accessibility](https://reader030.fdocuments.net/reader030/viewer/2022020417/568135d2550346895d9d39c5/html5/thumbnails/47.jpg)
lightboxes…we love ’em
![Page 49: Keyboard accessibility](https://reader030.fdocuments.net/reader030/viewer/2022020417/568135d2550346895d9d39c5/html5/thumbnails/49.jpg)
close it again on TABdon’t invent new keyboard
shortcuts
![Page 50: Keyboard accessibility](https://reader030.fdocuments.net/reader030/viewer/2022020417/568135d2550346895d9d39c5/html5/thumbnails/50.jpg)
more complex solution: manage focus
![Page 51: Keyboard accessibility](https://reader030.fdocuments.net/reader030/viewer/2022020417/568135d2550346895d9d39c5/html5/thumbnails/51.jpg)
and now, the dangerous part…
![Page 52: Keyboard accessibility](https://reader030.fdocuments.net/reader030/viewer/2022020417/568135d2550346895d9d39c5/html5/thumbnails/52.jpg)
JavaScript attaches behaviour to anything
![Page 53: Keyboard accessibility](https://reader030.fdocuments.net/reader030/viewer/2022020417/568135d2550346895d9d39c5/html5/thumbnails/53.jpg)
$('div').click(function() {…} );
![Page 54: Keyboard accessibility](https://reader030.fdocuments.net/reader030/viewer/2022020417/568135d2550346895d9d39c5/html5/thumbnails/54.jpg)
sexy tutorials out there doing it wrong
![Page 56: Keyboard accessibility](https://reader030.fdocuments.net/reader030/viewer/2022020417/568135d2550346895d9d39c5/html5/thumbnails/56.jpg)
be lazy…use libraries that solved this
YUI, jQueryUI, etc
![Page 57: Keyboard accessibility](https://reader030.fdocuments.net/reader030/viewer/2022020417/568135d2550346895d9d39c5/html5/thumbnails/57.jpg)
beware 3rd party solutionseven the big boys can get it wrong
![Page 58: Keyboard accessibility](https://reader030.fdocuments.net/reader030/viewer/2022020417/568135d2550346895d9d39c5/html5/thumbnails/58.jpg)
![Page 59: Keyboard accessibility](https://reader030.fdocuments.net/reader030/viewer/2022020417/568135d2550346895d9d39c5/html5/thumbnails/59.jpg)
![Page 61: Keyboard accessibility](https://reader030.fdocuments.net/reader030/viewer/2022020417/568135d2550346895d9d39c5/html5/thumbnails/61.jpg)
hijack generated markup to accessify it
![Page 62: Keyboard accessibility](https://reader030.fdocuments.net/reader030/viewer/2022020417/568135d2550346895d9d39c5/html5/thumbnails/62.jpg)
in conclusion…
![Page 63: Keyboard accessibility](https://reader030.fdocuments.net/reader030/viewer/2022020417/568135d2550346895d9d39c5/html5/thumbnails/63.jpg)
if you style :hover, also :focus and :active
![Page 64: Keyboard accessibility](https://reader030.fdocuments.net/reader030/viewer/2022020417/568135d2550346895d9d39c5/html5/thumbnails/64.jpg)
don’t suppress outline completely(reintroduce :focus and
suppress :active)
![Page 65: Keyboard accessibility](https://reader030.fdocuments.net/reader030/viewer/2022020417/568135d2550346895d9d39c5/html5/thumbnails/65.jpg)
leave tabindex alone – source order
![Page 66: Keyboard accessibility](https://reader030.fdocuments.net/reader030/viewer/2022020417/568135d2550346895d9d39c5/html5/thumbnails/66.jpg)
JavaScript on hover (mouseover/mouseout) also on
focus/blur(if focusable element)
![Page 67: Keyboard accessibility](https://reader030.fdocuments.net/reader030/viewer/2022020417/568135d2550346895d9d39c5/html5/thumbnails/67.jpg)
lightboxes and their problems
![Page 68: Keyboard accessibility](https://reader030.fdocuments.net/reader030/viewer/2022020417/568135d2550346895d9d39c5/html5/thumbnails/68.jpg)
only attach behaviour to focusable elements
![Page 69: Keyboard accessibility](https://reader030.fdocuments.net/reader030/viewer/2022020417/568135d2550346895d9d39c5/html5/thumbnails/69.jpg)
</rant>