Fowd 14.09.2009

610 views
520 views

Published on

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

  • Be the first to like this

No Downloads
Views
Total views
610
On SlideShare
0
From Embeds
0
Number of Embeds
4
Actions
Shares
0
Downloads
3
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

Fowd 14.09.2009

  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. 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. don’t forget the fancy styling
  11. 11. a.action:hover { background-color:#a82310; color:#fff !important; text-decoration:none; } #promo-dvd .content a:hover img { background-color:#d5c7ae; }
  12. 12. a:focus, a:hover, a:active { … }
  13. 13. don’t suppress outline!
  14. 14. keyboard accessible, but where am I?
  15. 15. /* =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. 16. /* remember to define focus styles! */
  17. 17. why do designers suppress outline?
  18. 18. “get your outline out of my design!” …is there a compromise?
  19. 19. a { … overflow: hidden; }
  20. 20. …only suppress it on :active
  21. 21. TAB cycle – normally just source order
  22. 22. tabindex forces a certain TAB cycle
  23. 23. anything with tabindex takes precedence
  24. 24. <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>
  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 3rd party solutions even the big boys can get it wrong
  39. 39. hijack generated markup to accessify it
  40. 40. in conclusion…
  41. 41. if you style :hover, also :focus and :active
  42. 42. don’t suppress outline completely (reintroduce :focus and suppress :active)
  43. 43. leave tabindex alone – source order
  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

×