World Usability Day Keyboard Accessibility 12.11.2009

1,801 views
1,731 views

Published on

Published in: Technology
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total views
1,801
On SlideShare
0
From Embeds
0
Number of Embeds
2
Actions
Shares
0
Downloads
2
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

World Usability Day Keyboard Accessibility 12.11.2009

  1. 1. Keyboard accessibility BASIC STEPS TOWARDS A MORE USABLE AND ACCESSIBLE SITE Patrick H. Lauke / World Usability Day / Duesseldorf / 12 November 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. 7. by default users TAB
  8. 8. using keyboard, move from one focusable element to the next
  9. 9. standard focusable elements: links, form elements, image map areas
  10. 10. TAB cycle – normally just source order
  11. 11. tabindex forces a certain TAB cycle
  12. 12. anything with tabindex takes precedence
  13. 13. <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>
  14. 14. don’t forget the fancy styling
  15. 15. a.action:hover { background-color:#a82310; color:#fff !important; text-decoration:none; } #promo-dvd .content a:hover img { background-color:#d5c7ae; }
  16. 16. a:focus, a:hover, a:active { … }
  17. 17. don’t suppress outline!
  18. 18. keyboard accessible, but where am I?
  19. 19. /* =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; }
  20. 20. /* remember to define focus styles! */
  21. 21. why do designers suppress outline?
  22. 22. “get your outline out of my design!” …is there a compromise?
  23. 23. a { … overflow: hidden; }
  24. 24. …only suppress it on :active
  25. 25. easy enough…let’s drop in some JavaScript
  26. 26. keyboard accessible, but where’s the extra information?
  27. 27. $('#whatever').hover( function() {…}, function() {…} );
  28. 28. $('#whatever').hover( function() {…}, function() {…} ); $('#whatever').focus(function() {…}); $('#whatever').blur(function() {…} );
  29. 29. aside: mobile browsers don’t do hover (well)
  30. 30. lightboxes…we love ’em
  31. 31. close it again on TAB don’t invent new keyboard shortcuts
  32. 32. more complex solution: manage focus
  33. 33. and now, the dangerous part…
  34. 34. JavaScript attaches behaviour to anything
  35. 35. $('div').click(function() {…} );
  36. 36. sexy tutorials out there doing it wrong
  37. 37. be lazy…use libraries that solved this YUI, jQueryUI, etc
  38. 38. beware 3 party solutions rd even the big boys can get it wrong
  39. 39. hijack generated markup to accessify it
  40. 40. in conclusion…
  41. 41. leave tabindex alone – source order
  42. 42. if you style :hover, also :focus and :active
  43. 43. don’t suppress outline completely (reintroduce :focus and suppress :active)
  44. 44. JavaScript on hover (mouseover/mouseout) also on focus/blur (if focusable element)
  45. 45. lightboxes and their problems
  46. 46. only attach behaviour to focusable elements
  47. 47. </rant>
  48. 48. www.opera.com/developer patrick.lauke@opera.com

×