Keyboard accessibility - just because I don't use a mouse doesn't mean I'm second class / Skillswap Bristol / 11 November 2008
0 likes133 views
The document discusses the importance of keyboard accessibility in web design, emphasizing that it should not be overlooked compared to mouse usage. It highlights best practices such as ensuring focus visibility and avoiding the suppression of outlines for focused elements. The author criticizes complicated approaches to keyboard interactions, advocating for simpler, more intuitive solutions that ensure all users have equal access without added complexity.
Keyboard accessibility - just because I don't use a mouse doesn't mean I'm second class / Skillswap Bristol / 11 November 2008
- 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 { ... }
- 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?
- 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
- 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...
- 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...
- 56. let's just make some clickable DIVs...
- 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
- 72. </rant>