Keyboard Testing

Reviewing your site for keyboard accessibility.

To assist you with keyboard navigation testing, check out Microsoft's Accessibility Insights. This tool offers a robust walk through of what you need to test and what to look for.

• Note: For MacOS users, you may have to adjust your computer’s system settings to allow you to do keyboard testing. Follow the A11Y Project’s walkthrough on MacOS’s keyboard navigation to learn how.
• Ensure that:
  • You can skip repeated content. A skip link should be the first focusable element on your page which should like to the beginning of your main page content.
  • All controls are fully operable. Any interactive component, such as toggles, sliders, and modals, needs to be reachable and compatible with a keyboard.
  • The focus state is always visible and for every element that has a hover state, the equivalent exists for focus. Similar to a hover state, the focus state is a visual indicator that an element has received keyboard focus.
  • You can navigate to and away from all interactive components. The TAB key moves you forward and SHIFT+TAB moves you backwards.
  • There are no “keyboard traps.” Keyboard traps are when a user cannot navigate away from or out of a section of your webpage.
  • Keyboard focus is constrained when inside of a modal or other dialog.
  • The order in which elements receive focus match the reading order of your page.
  • Keyboard shortcuts follow WebAIM’s keystroke standards.
• Increase your browser zoom to 300-500% and ensure that your responsive design is also keyboard accessible.
• Validate all content and functionality is operable and usable across all breakpoints in all recent browser versions.
  • Increase your browser zoom and change your breakpoints through your browser’s dev tools will allow you to test for this.