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.

The Pointerless Web

9,808 views

Published on

Believe it or not, accessibility is more than just screen readers. There's a whole group of users who only use a keyboard (without a mouse). Learn how to make the web a friendly place for all kinds of people by ensuring keyboard accessibility.

Published in: Technology
  • Be the first to comment

The Pointerless Web

  1. 1. ThePointerlessWebNicholas C. Zakas
  2. 2. @slicknetComplaints: @jcleblanc
  3. 3. Accessibility He means blind people, right?
  4. 4. Visual Auditory Motor Cognitive http://webaim.org/intro/#people
  5. 5. Blind Uses screen reader and keyboard (and/or braille reader) Low Vision Uses monitor, keyboard, mouse, and screen magnifierVisual Color Blind Uses monitor, keyboard, mouse, and high contrast http://webaim.org/intro/#people
  6. 6. Deaf Uses monitor, keyboard, and mouse (subtitles on videos) Low Hearing Uses monitor, keyboard, and mouse (subtitles on videos)Auditory http://webaim.org/intro/#people
  7. 7. Limited Fine Motor Control Uses monitor and keyboard Only Gross Motor Control Uses monitor and single switch Pain/Paralysis/RSIMotor Various other means of accessing a computer http://webaim.org/intro/#people
  8. 8. Memory Deficit Problem-Solving Deficit Attention Deficit Reading, Linguistic, Verbal Comprehension Deficit Math ComprehensionCognitive Deficit Visual Comprehension Deficit http://webaim.org/intro/#people
  9. 9. Them
  10. 10. Me
  11. 11. Carpel Tunnel SyndromeCompression of themedian nerve betweenligament and carpal bones
  12. 12. Not me :)
  13. 13. Browser Keyboard ShortcutsCtrl N New browser windowCtrl T New browser tabCtrl W Close browser tab
  14. 14. Browser Keyboard ShortcutsAlt D Set focus to address barCtrl L Set focus to address barCtrl E Set focus to search box
  15. 15. Browser Keyboard ShortcutsCtrl + Zoom inCtrl - Zoom outCtrl 0 Reset zoom level
  16. 16. Browser Keyboard ShortcutsCtrl Tab Go to next tabCtrl Shift Tab Go to previous tabAlt → Forward buttonAlt ← Back button
  17. 17. Navigating the Web with Focus
  18. 18. Click here
  19. 19. This outline tells me where the input focus is Click here
  20. 20. Move forward Activate currently-between links and focused form controls link or button Hold with tab to move backward
  21. 21. nobr { white-space: nowrap}/* states */:focus { outline: auto 5px -webkit-focus-ring-color}/* Read-only text fields do not show a focus ring but do still receive focus */html:focus, body:focus, input[readonly]:focus { outline: none}applet:focus, embed:focus, iframe:focus, object:focus { outline: none}input:focus, textarea:focus, isindex:focus, keygen:focus, select:focus { outline-offset: -2px}
  22. 22. Custom Focus Stylesa:focus,input:focus { outline: 1px solid red; color: red;}
  23. 23. Eliminating Focus Styles?!?!a{ outline: 0;}
  24. 24. You might already be doing this!!!
  25. 25. /* http://meyerweb.com/eric/tools/css/reset/ *//* v1.0 | 20080212 */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, sub, sup, tt, var,b, u, i, center,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-size: 100%; vertical-align: baseline; background: transparent;}body { line-height: 1;}ol, ul {
  26. 26. Who?
  27. 27. Upgrade!
  28. 28. What’s Focusable? Focusable Not Focusable* <a> <span> <input> <div> <textarea> <p> <select> <section> <button> <header> <body> <footer> <iframe> <article> <object> EVERYTHING ELSE!* By default
  29. 29. Working with Focusvar button = document.getElementById("my-btn");button.focus();var focused = document.activeElement;console.log(button === focused); // true
  30. 30. Make Focusable<span id="my-span" tabindex="0"> Howdy!</span> Add into the normal tab ordervar mySpan = document.getElementById(“my-span”);mySpan.focus();
  31. 31. Make Focusable<span id="my-span" tabindex="-1"> Howdy!</span> Not in tab order but can use focus()var mySpan = document.getElementById(“my-span”);mySpan.focus();
  32. 32. Focus• Don’t hide the focus rectangle – Unless you’re using a custom focus style• Use links to navigate to URLs• Use buttons for in-page actions or form submission
  33. 33. Links & Buttons The only way I can interact with the page
  34. 34. Characteristics of Links & Buttons  Can receive focusClick here  Show focus visually  Part of normal tab order  The onclick handler is called when Enter is pressed
  35. 35. Not a Button!<span onclick="doSomething()"> Click Me</span> Focusable Visual Focus Tab Order Enter for onclick
  36. 36. Still Not a Button!<span tabindex="0" onclick="doSomething()"> Click Me</span>  Focusable  Visual Focus  Tab Order Enter for onclick
  37. 37. Still Not a Button!<span tabindex="0" role="button" onclick="doSomething()"> Click Me</span>  Focusable  Visual Focus  Tab Order Enter for onclick
  38. 38. Spatial Navigation
  39. 39. ** Requires CrossFire Chrome extension
  40. 40. Spatial NavigationShift → Next link to the rightShift ← Next link to the leftShift ↑ Next link to the topShift ↓ Next link to the bottom
  41. 41. HoverI can’t hover
  42. 42. Bad Hover.rect .controls { display: none;}.rect:hover .controls { display: block;}
  43. 43. Better Hover.rect .controls { display: none;}.rect:hover .controls,.rect:focus .controls { display: block;}
  44. 44. Hover• Don’t rely on hover to show important details or functionality• Whenever you use :hover, also use :focus
  45. 45. DialogsDon’t lose focus
  46. 46. Dialogs• Set focus to dialog element when displayed – Set tabIndex = -1 and use focus()• Remember where focus was before the dialog was opened – document.activeElement• Pressing Esc should close the dialog and set focus back to where it was• Keep focus in the dialog
  47. 47. Keep Focus in Dialogdocument.addEventListener(“focus”, function(event) { if (!dialogNode.contains(event.target)) { event.stopPropagation(); dialogNode.focus(); } }, true);
  48. 48. Keyboard Shortcuts Not a replacement for everything else!
  49. 49. Common Keyboard Shortcuts ? Show shortcuts J Go to next item K Go to previous item U Back to list view / Focus Search
  50. 50. Common Keyboard Shortcuts G then Go to something G then I Go to Inbox G then H Go to Home
  51. 51. Common Keyboard Shortcuts
  52. 52. Keyboard Shortcuts• Use ? to bring up shortcuts list in a dialog• Make use of common keyboard shortcuts where possible (lists)• Use the convention of G followed by another letter to navigate to sections• Use single letters for common actions• Shift focus appropriately
  53. 53. Demos
  54. 54. Accessibility
  55. 55. Visual Auditory Motor Cognitive http://webaim.org/intro/#people
  56. 56. Them
  57. 57. Me
  58. 58. Us
  59. 59. Thank you
  60. 60. Etcetera• My blog: nczonline.net• Twitter: @slicknet• These Slides: slideshare.net/nzakas

×