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