Keyboard Navigation Accessibility Testing

When designing websites and browser apps, we need to be aware of how our users will interact with what we create. We would normally expect visitors to scroll through pages and click around a website by navigating with their mouse, but this is not always the case. When designing digital products, we need to be conscious of keyboard navigation accessibility for those who use the keyboard instead of a mouse. We should take into consideration their accessibility requirements to ensure an inclusive experience for as many people as possible.

Overview to Keyboard Navigation Accessibility

Some people navigate the internet using the keyboard rather than the mouse. A small percentage do this by choice (often called “power users”), preferring to use keyboard commands for efficiency. However, most commonly, those who navigate using the keyboard have a motor impairment, such as difficulty in using their hands, which makes using the mouse a struggle because of the fine motor movement required. Keyboard navigation is also used by blind users who rely on assistive technology such as screen readers because they cannot see where to click the mouse.

To recap, people who use keyboard navigation may:

• Prefer to use keyboard navigation for efficiency
• Have a disability or condition that limits their fine motor skills
• Be visually impaired, have low vision, or blindness and cannot see where to click

Being able to scroll and access links without using a mouse is expected, but it should also be possible to access much of any website through keyboard-only navigation. Here are some elements to look out for as part of your keyboard navigation accessibility testing:

• Links
• Buttons
• Form fields/controls (text fields, select boxes, radio buttons, etc.)
• Menu items
• Things triggered by hover, such as tooltips
• Widgets, such as a calendar date picker

People navigate websites and access the elements listed above by using the keyboard in the following ways:

• Tab (focus on the next link)
• Shift+Tab (go to previous link)
• Spacebar (jump down the page)
• Enter (open link)
• The left, right, up, and down arrow keys (moving around the content)

How to Test a Website’s Keyboard Accessibility

If you’re reading this article on a desktop or laptop (not a mobile or tablet) and using Firefox, Internet Explorer, Chrome, or Safari, you can test a website’s keyboard accessibility by following these simple steps:

1. Take your hand off the mouse
2. Use the Tab button on your keyboard to navigate around the website links
3. Check if you can you interact with ALL links and menu items using only the keyboard
4. Can you see which item has focus at all times?
5. Does the order of the focus match the order you expected?

Then check if by pressing the Tab button, you are able to get to this link?

By doing this, you should see the browser “focus” on various clickable parts of the web page, such as the logo (which usually links to the homepage), main navigation, and inline links throughout the page. If the website follows best practice, it should be obvious which link is highlighted as you should see an outline highlighted box surrounding the link you have tabbed to.

How to make your website keyboard navigation accessible

If you just went through the above test on your own website, and it became clear that you need to increase the keyboard accessibility of your website, don’t panic! Here are some things you can do to ensure your website is accessible through keyboard navigation.

Properly Structure Webpage HTML

The order you have your HTML content in will be the order in which keyboard only website users will navigate the content. So make sure the list of links and sections of your website make sense and are in the correct order from the start.

Make Focus Indicators Clear

Focus indicators are the visual borders that appear when an element or link is highlighted or “in focus” and are activated when the user next hits enter on their keyboard. The most common browsers have default focus indications for almost all elements built into the browser. If you are using a theme, you may also want to check that the focus indicator is clear and present. The default browser style for focus indicators are generally not great, so it might be a good idea to design your own.

When designing a custom focus indicator, here are some good practices to keep in mind:

• Make your focus indicators consistent across all browsers
• Make sure it complements the size and shape of the element in focus.
• Ensure good color contrast between the focus indicator and the page background

Consider Assistive Technology

People who access your website or web app using keyboard navigation might also use other assistive technologies such as screen readers.

It is important to consider these users when creating your digital products. here are three things to consider:

• Always use alt text in images to describe the image
• Ensure form fields are correctly and clearly labeled
• Only use tables for table data, not for layout

Summary

By knowing that not everyone uses a mouse to navigate, and following the simple tips outlined above, you can make sure that your site or web app is as accessible as possible. And by considering keyboard navigation accessibility, as well as other accessibility considerations, you’ll be creating a great experience for everyone, no matter how they interact with your website!