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

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

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 3 rd 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

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