Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

keyboard accessibility

3,443 views

Published on

Published in: Technology, Design
  • Be the first to comment

keyboard accessibility

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

×