Patrick H. Lauke: Keyboard accessibility - basic steps towards a more usable and accessible site / Future of Web Design Touch / Glasgow / 14 September 2009

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

2. accessibility = blind users + screenreaders?

3. difficult to test – need to install and learn
screenreader

4. many different forms of disability

5. keyboard or keyboard-like interfaces

6. easiest to test…no special software required

9. by default users TAB

11. using keyboard, move from one focusable
element to the next

12. standard focusable elements:
links, form elements, image map areas

18. don’t forget the fancy styling

20. a.action:hover {
background-color:#a82310;
color:#fff !important;
text-decoration:none;
}
#promo-dvd .content a:hover img {
background-color:#d5c7ae;
}

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

22. don’t suppress outline!

24. keyboard accessible, but where am I?

25. /* =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;
}

26. /* remember to define focus styles! */

27. why do designers suppress outline?

29. “get your outline out of my design!”
…is there a compromise?

32. a { … overflow: hidden; }

34. …only suppress it on :active

35. TAB cycle – normally just source order

36. tabindex forces a certain TAB cycle

37. anything with tabindex takes precedence

39. <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>

40. easy enough…let’s drop in some JavaScript

43. keyboard accessible, but where’s the extra
information?

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

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

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

47. lightboxes…we love ’em

49. close it again on TAB
don’t invent new keyboard shortcuts

50. more complex solution: manage focus

51. and now, the dangerous part…

52. JavaScript attaches behaviour to anything

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

54. sexy tutorials out there doing it wrong

56. be lazy…use libraries that solved this
YUI, jQueryUI, etc

57. beware 3rd party solutions
even the big boys can get it wrong

61. hijack generated markup to accessify it

62. in conclusion…

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

64. don’t suppress outline completely
(reintroduce :focus and suppress :active)

65. leave tabindex alone – source order

66. JavaScript on hover (mouseover/mouseout)
also on focus/blur
(if focusable element)

67. lightboxes and their problems

68. only attach behaviour to focusable elements

69. </rant>

70. www.opera.com/developer
patrick.lauke@opera.com