The Pointerless Web

9,511 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
0 Comments
20 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
9,511
On SlideShare
0
From Embeds
0
Number of Embeds
278
Actions
Shares
0
Downloads
62
Comments
0
Likes
20
Embeds 0
No embeds

No notes for slide
  • Go to browser and show navigation using the keyboard.
  • Go to blog navigation example.
  • Put this into Web Inspector and show the difference.
  • Show Gmail
  • Demo!
  • Don’t hide important information and then show on hoverI can’t get to it
  • Show Twitter
  • Show GitHub keyboard shortcut dialog
  • Show Twitter
  • GoogleGmailShortcuts dialogNavigate messagesReplyCreate newNavigate to link in emailGo to labelGo to InboxTwitterShortcuts dialogNavigate tweetsGo HomeGo to ConnectDirect MessagesReplyGitHubHomeIssuesShortcuts Dialog“T” for file finder
  • 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

    ×