Accessibility

3 min read

What is keyboard navigation and how can we design for it?

Louise Hill

Share this post

Overview

Keyboard navigation is a way to navigate websites; web apps; computer games and programmes like word processors and email clients, without using a mouse or trackpad.

Additionally, the patterns of keyboard navigation are often mimicked in accessibility settings, for example in gaming controllers; mobile apps; and TVs.

‍

Who uses keyboard navigation?

People with motor impairments — keyboard navigation is widely used by people with motor impairments or disabilities like arthritis, repetitive strain injuries, Parkinson’s, dyspraxia and other conditions.

People with visual impairments — people who are blind or have low vision often choose to use screen readers. These often rely on keyboard navigation.

People using other assistive technologies — for example, mouth sticks, head pointers, eye gazers or sip-and-puffs.

People who like efficiency and shortcuts — using keyboard navigation can speed up your browsing time, often these people are referred to as power users.

‍

How do people navigate using keyboard navigation?

Navigate to most elements: Tab key / to go back: Shift + Tab key

Use link: Enter (PC) / Return (Mac)

Use button: Enter (PC) / Return (Mac)

Check checkbox: Spacebar (to check or uncheck)

Select radio buttons: Up/Down or Left/Right keys to select an option; Tab key to move to the next element

Give it a go — you might decide you want to continue using some keyboard navigation shortcuts!

These controls will take you to any HTML elements that allow you to complete an action:

Buttons
Links
Form fields, radio buttons and checkboxes
Selects and dropdown menus
A summary or textarea element
Audio and video controls
Accordions
‍

Why should you design for keyboard navigation?

Compliance — often you need to make navigating your web product accessible to all and to comply with Web Content Accessibility Guidelines. There tends to be legislation around this.

Market share — you risk alienating a lot of people by not allowing them to navigate your digital product. It makes much more sense to cater to everyone!

‍

How do you make sure keyboard navigation is working well?

Making your digital product work for everyone is a team sport between designers, developers and content experts.

Top tips:

Implement a logical tab order

Often, on a web page you are telling a story with a beginning, middle and end. So your keyboard user wants to tab through this story in a logical way. You want to be able to match the order you can see visibly. In Western societies you typically want to make sure the flow is left to right and top to bottom.

On the web we use HTML to provide this logical order and guide our keyboard users.

This includes things like:

Using heading levels in the correct order (<h1> to <h6>)
Using sections to help identify content parts (<nav>, <article>, etc.)
Using correct form element identifiers and groupings (<form>, <label>, etc.)

‍

Use visible focus states

These high-contrast borders around items show when you arrive on them using your tab key. They are crucial for helping your keyboard navigators know where they are. For more detailed tips on how to design them, you can read my article on designing focus states.

‍

An example of a button with a focus state applied on wise.com

‍

Use skip to content links

When you navigate on a keyboard you will see that certain things can get monotonous — one of these is tabbing through your navigation area at the top of each web page. In order to bypass this, it’s very useful to have a ‘Skip to main content’ link. This link can then help you skip through repeating all site navigation over and over again.

‍

Example of the 'skip to main content' link on gov.uk site

‍

Avoid trapping keyboard navigators

Modals, dropdown menus and sliders or side menus can be chief culprits here. They can often trap keyboard users so they cannot escape them.

Ensure that your keyboard navigators have a way to exit elements like these.

Modals and dialogues — you should be able to close a modal using the escape key. Your focus state should remain within the modal’s items until you exit the modal.

‍

An accessible modal example from Webflow. You can press escape on your keybpard and exit or tab through the modal elements.

‍

Dropdown menus — your focus indicator should move to the first menu item when the dropdown is opened. You should have the option to close the dropdown using the escape key. You should also close the dropdown if the focus moves outside the dropdown menu.

‍

An accessible dropdown with the first option surrounded by a focus state in the IBM Carbon Design System

‍

Sliders and side menus — your focus indicator should move to the first focusable element when the slider or side menu is opened; you should make sure the user can cycle through the internal focusable elements in a logical order; you should give users the option to exit using the escape key.

‍

Here's another great example from the IBM Carbon Design System with the first menu item focused when the side menu is opened

‍

Make sure things behave in the way they are expected to

It looks like a radio button, but does it work like one when you tab onto it?

Custom radio buttons (not pure html radio buttons), for example, often require some tweaking in the code or markup language to make sure they have the expected behaviors when using keyboard navigation. Check your up / down, left / right arrows work as expected.
‍

And on that note: test, test, test!

Remember to test the elements you want to launch. Start by using keyboard navigation on your digital product yourself, then test with people who regularly navigate with a keyboard, and make sure your team has done the quality assurance necessary to make sure everything is working and labelled correctly behind-the-scenes.

You can also use auditing / QA tools like Wave and Axe to spot keyboard accessibility issues.

‍

Resources

For designers:

I love this presentation by Matt Deeprose to give you a good overview of keyboard navigation. In my opinion, it gives a clearer breakdown of the WCAG guidelines on keyboard navigation than the guidelines themselves, so consider it a great go-to: https://www.youtube.com/watch?v=FvpUNiB-2T0

For developers: