Skip to content

Instantly share code, notes, and snippets.

@missmatsuko

missmatsuko/a11y-project_quick-test_navigate-using-just-your-keyboard.md

Created August 19, 2018 03:58
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save missmatsuko/7548490d2fe040cc4fd0309b708fcfc3 to your computer and use it in GitHub Desktop.
Save missmatsuko/7548490d2fe040cc4fd0309b708fcfc3 to your computer and use it in GitHub Desktop.
Download ZIP
Quick Test: Navigate using just your keyboard
Raw
a11y-project_quick-test_navigate-using-just-your-keyboard.md

Introduction

Testing your site for keyboard navigation will ensure that keyboard users can access your site.

As a bonus, sites that can be navigated with a keyboard can also likely be navigated using other input devices.

How to navigate a website with a keyboard

Generally, pressing tab moves focus between elements and pressing enter will interact with them.

If you are using Safari, option-tab is the default keyboard shortcut to move focus between elements.

Additional keyboard shortcuts are described here: WebAIM - Keyboard Accessibility

Things to keep in mind while testing

It is not enough to simply tab through a webpage from start to end. While navigating the site, keep these things in mind:

  • Interactive elements should be functional using only keyboard shortcuts.
  • The focused element should be visible and have an obvious focus style. See article: "Quick Tip: Never remove CSS outlines".
  • Focus should move between elements as they appear on the page and not jump back and forth.
  • There should be a way to skip past lengthy navigation items. See article: "How–to: Use Skip Navigation links".

Further Reading

  1. WebAIM - Keyboard Accessibility
  2. Nielsen Norman Group - Keyboard-Only Navigation for Improved Accessibility
  3. User Testing - Why Keyboard Usability Is More Important Than You Think
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment