Principle 2: Operable
Make sure everything works for keyboard-only users
A large quantity of users on the web are physically unable to use a mouse, that's why it's super important to ensure your site is tested with keyboard functions alone.
Checking your website doesn't require anything special, there's no specific tools or skills. It's as simple as following the advice below and trying to navigate your website or using your program with the keyboard only... don’t you touch that mouse now 🖱
testing and checks
Keyboard accessibility - tips and tricks
Use your keyboard to navigate between all links, buttons, form fields, and other features. Current focus should be reasonably easy to see. The order of movement within the page or modal should echo the visual layout. As you do this, consider these questions:
Can you access all features? Can you operate all controls? Is it reasonably easy to tell where you are on the page? Does the focus wrap within the entire page or modal dialog?
& here's the cheat sheet...
Tab – move to the next link, form element or button.
Shift+Tab – move to the previous link, form element, or button.
Enter – activate the current link or button.
Space – check or uncheck a checkbox form element. Will also activate a button that currently has focus.
Up/Down arrow keys – move between radio buttons or, in some cases, menu links.
Right/Left arrow keys – in some cases, move between menu links or adjust sliders in audio and video plugins.
Escape – Close the current modal dialog or dropdown menu and return focus to the element that spawned it.
General best practice
And here's what you're looking for...
Be sure each of the following items is true of your web page:
1. Make sure, when hitting the tab key, all links and controls can be accessed.
2. That the element you've tabbed to has focus. For additional information about this issue, see the next page of guidance on providing clear visible focus.
3. When building components (e.g. dropdown menus, modal popups, checkboxes) reference these guidelines for how widgets should be operable with keyboards.
4. Check the in and out (entering and exiting) functionality of all features, especially any plugins or API based content.