Southern New Hampshire University

Keyboard Accessibility Testing (MacOS)

Updated on

Go to the Site That You Want to Test.

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

What Should be Looked For

  1. The first tab should get you to a "skip link" or "skip to main content" link.
"Skip to main content" on my.snhu homepage.
  1. Every interactive element should appear in the tabbing order when testing.
  1. When tabbing, there is a clear visible focus box around the content you are tabbing to.

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

"Offices" tab highlighted with tab keyboard press.

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

The blue around it should be darker to make the color contrast pass.

Search bar in screen steps editor with a focus box that is not clearly visible.

Below is an example of no focus box around “Partners.”

There is not focus on the "Partners" link at all.

A screenshot of a link "Partners" that does not have any focus box at all.
  1. 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 me to the "offices" homepage.

"Offices" homepage with the offices tab at the top left selected by the tab focus and enter key options.
  1. 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.

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

  1. You should be able to use your keyboard to dismiss any pop-up windows that cover the main content.
  1. 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

Additional Resources

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

  •  Along with the guides listed above, it shows the path it took, allowing the test to verify the tabbing order is logical. Doing the assessment is a lengthy test that is useful for testing, though if you only want to do keyboard testing, you can you the keyboard section, which will help you walk through the entire testing.
  • Screen reader Keyboard Shortcuts:
Previous Article WebAim Contrast Checker
Next Article Keyboard Shortcuts and Screen Reader Support Resources and Links