Keyboard Accessibility Testing

What is Keyboard Accessibility Testing?

The process of evaluating a website or application to ensure that all interactive elements, like buttons, links, and form fields, can be fully navigated and used solely with a keyboard, which is crucial for users with disabilities who rely on keyboard navigation instead of a mouse. Manually checking if a digital product, software, website or platform is accessible to people with disabilities who primarily use a keyboard to interact with technology.

How to test for accessibility?

You can use the free accessibility testing tool ANDI (Accessible Name & Description Inspector) to test the accessibility of forms, images, headings, color contrast, data tables, links, and more.

ANDI (Accessible Name & Description Inspector) is a free tool that helps identify and fix keyboard accessibility issues in web content. It is a browser-based bookmarklet that can be used by web developers, content creators, and testers.
Visit the ANDI site to get started with the free Tutorial and Modules.
Then, Launch ANDI and navigate to the page to be tested. Launch ANDI by clicking on the favorite/bookmark labeled "ANDI." ANDI will be inserted onto the page: Get Installation Instructions.

Manual Keyboard Testing Without Using ANDI

Refresh the page to ensure you are on the address bar.
Use the "tab" key to move down through the entire page.
Use the "shift" + "tab" keys to move back up through the page.

Manual Keyboard Navigation

The first tab should get you to a "skip link" or "skip to main content" link.

A “Skip to content” button is highlighted at the top of a webpage, allowing users to bypass navigation links and go directly to the main content. An arrow points to the button.

Every interactive element should appear in the tabbing order when testing.

When tabbing, there is a focus box around the content you are tabbing to. It may or may not be visible.

Below is an example of a visible focus box around "Home".

A navigation menu with the “Home” option highlighted by a keyboard focus indicator. An arrow points to the focused item.

Below is an example of a visible focus box around the search bar.

A search input field is highlighted by a keyboard focus indicator. An arrow points to the search box.

Below is an example of a non-visible focus box around the search bar.

There is no focus on the search bar at all.

A minimalistic search bar and a blinking text cursor, indicating keyboard focus.

While testing, use “enter” or “return” when on a tab focus item to confirm that it will select where the tab focus item is showing.

In the following example, we were using the "enter" or "return" key while the tab focus was on "offices", and it brought us to the "offices" homepage.

"Offices" homepage with the offices tab at the top left selected by the tab focus and enter key options.

Use the mouse to hover over each interactive element to see the hover state. Compare to tab focus state to confirm that there is an equivalent state.

In the example below, hovering the mouse over a menu causes a drop-down of sub-options. Verify that this happens with the tabbing as well.

You should be able to use your keyboard to dismiss any pop-up windows that cover the main content.
You will also need to test other important key(s) that keyboard-only users use while exploring the internet. The table below shows essential keystrokes that should be tested on a web page and the expected outcome:

Interaction	Keystoke(s)	Expected Outcome
Navigate the Webpage	“Tab" “Shift” + “Tab”	Goes from top of page to bottom of page Goes backwards of the “tab”
Link	“Enter” or “return”	Goes to link that is on focus
Button	“Enter” or “return” or spacebar	Activate the button on focus
Checkbox	Spacebar	Check or uncheck the box
Radio buttons	Up, down, left, and right arrows “Tab"	Go through to select an option Move to the next element
Select (dropdown) menu	Up and down arrows Spacebar	Navigate between the options Expand the options
Autocomplete	Typing Up and down arrows “Enter” or “return"	Begin filitering the reponses Move between the options Select the option that is highlighte
Dialog	“Esc"	Close any open dialog
Slider	Up and down arrows or left and right arrows “Home” and “end”	Increase or decrease the slider value Beginning of the slider or end of the slider
Menu bar	Up and down arrows “Enter” or “return” Left and right arrows	Previous and next menu optinos Expand the menu option Expand or collpase a submenu
Tab panel	“Tab" Up and down arrows or left and right arrows	Once to navigate into the group and once to navigate out of the group Choose and acitivate the previous or next tab
’Tree’ menu	Up and down arrows Left and right arrows	Navigate between previous and next menu options Expand or collapse the submenu
Scroll	Up and down arrows Left and right arrows Spacebar or “shift” + spacebar	Scroll vertically Scroll horizontally Scroll by page

Using Microsoft Insights for Keyboard Testing

Microsoft Insights Chrome extension has a walk-through on keyboard testing that walks you through and shows you where you are tabbed, which can be helpful if the site does not have focus.

Along with the guides listed above, it shows its path, allowing the test to verify the logical tabbing order. The assessment is a lengthy test that is useful for testing, though if you only want to do keyboard testing, you can use the keyboard section, which will help you walk through the entire test.

Watch a Quick Keyboard Testing Guide Video

Click the link below to watch a video on how to test your keyboard efficiently:

How to Keyboard Test Quick Overview Youtube Video (00:01:02)

Additional Resources