Keyboard and Interaction Accessibility Techniques


Published on

Techniques for addressing keyboard accessibility issues for screen reader users and sighted keyboard users.

Published in: Technology, Design

Keyboard and Interaction Accessibility Techniques

  1. 1. Keyboard and Interaction Accessibility Techniques Jared Smith @webaim
  2. 2. Keyboard User != Screen Reader User
  3. 3. Screen Reader User (usually) = Keyboard User
  4. 4. Keyboard Accessibility Testing
  5. 5. +
  6. 6. Keyboard Accessibility is Different When a Screen Reader is Running
  7. 7. Source Code Order = Navigation Order and screen reader reading order too!
  8. 8. Navigation Order • Use CSS (float, position, etc.) to control positioning • Navigation order should follow visual flow • Sidebars before or after main content? • Be careful with “content first” approach • Design reading/navigation order early
  9. 9. Screen Reader Navigation • Links and form controls • Headings • Landmarks • Lists • Forms • Buttons • etc.
  10. 10. Standard Browser Navigation • Links and form controls
  11. 11. Do not remove the focus indicators from links a { outline:0; }
  12. 12. “Skip” links “Skip to main content” or “Skip navigation”??? <a href=”#maincontent”>Skip to main content</a> <a name=”maincontent” id=”maincontent”></a> or <div id=”maincontent”>...
  13. 13. Hidden “Skip” links a#skip { position:absolute; left:-10000px; top:auto; width:1px; height:1px; overflow:hidden; } a#skip:focus { position:static; width:auto; height:auto; } Don't display:none the 'skip' link.
  14. 14. CSS3 to enhance visibility a#skip { position: absolute; top:-42px; left:0px; background:transparent; transition: top .7s .5s ease-out, background .7s linear; } a#skip:focus { top:0px; background:#860000; transition: top .1s ease-in, background .25s linear; }
  15. 15. ARIA Landmark Roles • application, banner, complementary, contentinfo, main, navigation, form, and search • Allows easy access to major page components • The end of "skip" links? What about sighted keyboard users?
  16. 16. Landmark Roles <div role="navigation" aria-label="Main navigation"> <div role="main"> <form role="search"> You can add aria-label to differentiate multiple landmarks of the same type.
  17. 17. HTML5 and Landmark Roles Mapping <main> - role="main" <article> - role="article" <footer> - role="contentinfo" <header> - role="banner" <nav> - role="navigation" <aside> - role="complementary" ARIA Support > HTML5 Support so use both... for now <main role="main">
  18. 18. Ensure Interactive Elements are Links or Form Controls or... make non-focusable elements focusable with tabindex
  19. 19. Avoid Tabindex!!! ... unless you're sure you know what you're doing. If the default tab order is not logical, fix your source code order.
  20. 20. tabindex="1+" defines an explicit tab order tabindex="0" allows things besides links and form elements to receive keyboard focus. tabindex="-1" allows things besides links and form elements to receive programmatic focus (by scripting, links, etc.)
  21. 21. <p tabindex=”0” onclick=”submitForm()”>Submit Search</p>
  22. 22. But <input type=”submit” value=”Submit Search”> or <button onclick=”submitForm()”>Submit Search</button> are better!
  23. 23. WARNING! Click events do not always trigger via keyboard for things other than links or form controls... ... even with tabindex=”0”
  24. 24. if(event.keyCode==13 || event.keyCode==32) { doStuff(); } Attach an onkeyup event and then check for Enter (13) and Space (32) key presses:
  25. 25. • Allows non-focusable elements to receive programmatic focus (by scripting, links, etc.) • Necessary for focusing dialog boxes, error messages, etc. • WARNING:This removes the element from the default tab order. tabindex=”-1”
  26. 26. Review • Ensure all interactive elements are links or form controls, or make them focusable with tabindex=”0”. • If using tabindex, detect Enter and Space key events. • Ensure non-focusable elements (such as dialog windows) have tabindex=”-1” before focusing them programmatically.
  27. 27. Roving tabindex • Useful for controlling focus within interactive widgets (menus, tab panels, tree widgets, etc.) • Set tabindex=”0” on currently active item.This places it in the tab order. • Set tabindex=”-1” on all other items.This removes them from the tab order and makes them focusable with scripting. • Use focus() to set focus as user navigates (arrow keys, etc.) • tabindex=”0” roves or follows the active item allowing users to return directly to it later.
  28. 28.
  29. 29. In an ARIA tab panel, the entire tab group functions as one tab stop, then arrow keys are used to select the active tab. 1 3 2
  30. 30. tabindex=0 tabindex=-1
  31. 31. tabindex=0 tabindex=-1 tabindex=-1 Press to select the next tab
  32. 32. tabindex=0 If you tab away from the tab panel and later return,“Cats” remains the active and focused tab because it has tabindex=0.
  33. 33. Carousels
  34. 34. Carousels
  35. 35. Carousels • The target was the biggest item on the homepage - the first carousel item.“Nonetheless, the user failed the task.” - Nielsen Norman Group • “We have tested rotating offers many times and have found it to be a poor way of presenting home page content.” - Wider Funnel • 1% clicked a feature. Of those, 89% were the first position. 1% of clicks for the most significant object on the home page? - Notre Dame University
  36. 36. Carousels • “Almost all of the testing I’ve managed has proven content delivered via carousels to be missed by users. Few interact with them.” - Adam Fellows • “Carousels are effective at being able to tell people in Marketing/Senior Management that their latest idea is now on the Home Page. In summary, use them to put content that users will ignore on your Home Page. Or, if you prefer, don’t use them. Ever.” - Lee Duddell • “Carousels are this decade’s <blink> tag.” - Jared Smith
  37. 37. Carousels • image-sliders-or-carousels-ignore-the-fad/ • • interaction-stats/ • • using-carousels-in-higher-education.html
  38. 38. Carousel Accessibility Issues • Automated carousels violate WCAG 2.0 Success Criteria 2.2.2. - Pause, Stop, Hide • Distracting and confusing • Difficult interaction model • No relationship between controls and content • Loss of focus when carousel changes
  39. 39. Carousel Accessibility Solutions • Avoid auto-playing (optimal) or include a visible pause button (preferably) before the carousel • Pause carousel on mouse hover and on keyboard focus. • Ensure appropriate alternative text. • Provide context for controls • Descriptive text • ARIA tab panel? • Ensure focused or activated items do not disappear, or set focus when they do
  40. 40. ARIA Design Patterns for Widget Interaction
  41. 41. Questions? Jared Smith @webaim