1 / 70

Keyboard accessibility

BASIC STEPS TOWARDS A MORE USABLE AND ACCESSIBLE SITE. Keyboard accessibility. Patrick H. Lauke / Future of Web Design Tour / Glasgow / 14 September 2009. accessibility = blind users + screenreaders?. difficult to test – need to install and learn screenreader.

genero
Download Presentation

Keyboard accessibility

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

  1. BASIC STEPS TOWARDS A MORE USABLE AND ACCESSIBLE SITE Keyboard accessibility Patrick H. Lauke / Future of Web Design Tour / Glasgow / 14 September 2009

  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. easiest to test…no special software required

  7. by default users TAB

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

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

  10. don’t forget the fancy styling

  11. a.action:hover { background-color:#a82310; color:#fff !important; text-decoration:none; } #promo-dvd .content a:hover img { background-color:#d5c7ae; }

  12. a:focus, a:hover, a:active { … }

  13. don’t suppress outline!

  14. keyboard accessible, but where am I?

  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. /* remember to define focus styles! */

  17. why do designers suppress outline?

  18. “get your outline out of my design!” …is there a compromise?

  19. a { … overflow: hidden; }

  20. …only suppress it on :active

  21. TAB cycle – normally just source order

  22. tabindex forces a certain TAB cycle

  23. anything with tabindex takes precedence

  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. easy enough…let’s drop in some JavaScript

  26. keyboard accessible, but where’s the extra information?

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

  28. $('#whatever').hover( function() {…}, function() {…} ); $('#whatever').focus(function() {…}); $('#whatever').blur(function() {…} );

  29. aside: mobile browsers don’t do hover (well)

  30. lightboxes…we love ’em

  31. close it again on TAB don’t invent new keyboard shortcuts

  32. more complex solution: manage focus

More Related