1. Keyboard accessibility Patrick H. Lauke / SkillSwap Bristol / 11 November 2008 JUST BECAUSE I DON'T USE A MOUSE DOESN'T MEAN I'M SECOND CLASS...

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. neglected stepchild of accessibility?

7. easiest to test...no special software required

10. by default, users TAB

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

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

14. good practice: highlight focused link

16. a:hover { some simple highlighting }

17. a:focus, a:hover, a:active {... }

18. don't suppress outline!

20. a { … outline:none; }

21. keyboard accessible, but where am I?

23. TAB cycle – normally just source order

24. tabindex – force a certain TAB cycle

25. anything with tabindex takes precedence

28. easy enough...let's drop in some javascript and complicate matters...

30. keyboard accessible? yes...but why no eye candy and info for keyboard users?

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

32. double it up with $('#whatever').focus(function() {…}); $('#whatever').blur(function() {...} );

34. doing things when mouse hovers...

36. irritating, but if you insist... do it on focus/blur as well!

37. FYI: iPhone / Mozilla Fennec don't do hover

38. lightboxes…we love 'em

40. close it again when TAB out... don't invent new keyboard commands

41. more complex solution: manage focus

43. and now, the dangerous part...

44. with javascript, attach onclick behaviour to anything...

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

46. sexy tutorials out there doing it wrong

48. how not to do an accordion

50. how not to add action buttons

52. jQuery UI actually gets most of this right...

54. my biggest bugbear...GOOGLE

56. let's just make some clickable DIVs...

58. Opera…the anomaly...

60. tabindex's new lease of life?

61. WAI-ARIA proposes adding tabindex to make arbitrary elements focusable

62. good...but still can't click (via keyboard)

63. other sites not completely inaccessible, but why make keyboard access more complex?

65. in conclusion...

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

67. don't suppress outline (or reintroduce it for :focus and :active)

68. leave tabindex alone – sensible source order

69. javascript on hover? also on focus/blur

70. lightboxes and their problems

71. only attach behaviour to focusable elements