Experience design

Be clear how the keyboard should navigate

When a user navigates a page using only their keyboard, they rely on the navigational structure being logical and clear. We can support and provide good keyboard navigation in our designs by:

Annotate wireframes to indicate tab order

Annotating wireframes to indicate the tab order of interactive elements, particularly for more complicated layouts. The tab order is how a user navigates through an interface by pressing Tab on the keyboard. Generally, a good tab order goes left to right, top to bottom. We want to avoid the focus order following a very different order to the visual hierarchy of the page and jumping around randomly.

Also avoid auto-tabbing, for example automatically jumping a user to the next form field i.e. date of birth. Although it is meant to make the experience more efficient, it can make it harder for users to correct errors. If this is already implemented anywhere, it should be removed.

Group components together to reduce tabbing

Group components together (where appropriate) to reduce tabbing, and then make each grouping a single tab stop. A tab stop is an interactive component which can be reached by keyboard users moving through the page by pressing the Tab key. Once in a group, keyboard users can then navigate between elements within that group (usually by using arrow keys). Groupings should also be annotated in wireframes, include notes of where the tab stops are and which keys can be used to move between elements within the group (i.e. arrow keys).

Each interactive element should have a visible focus state

Working with UI designers to ensure each interactive element has a visible focus state with sufficient contrast against the background (3:1 contrast ratio).

Read more on how to use colour when designing focus and non-focus states

Make sure content can be reached by keyboard only

Wherever possible, we should ensure content can be reached through keyboard only. Specific watch outs are:

Efficient and quick navigation

To help keyboard users find information quickly, we should…

Offer ways to skip blocks of repeated content

We should offer a way for users to skip blocks of content that are repeated on multiple pages, for example navigation links, and jump straight to the primary content of the page. If we do this, screen reader users who visit several pages on the same site can avoid hearing dozens of navigation links on each page before reaching the main content.

Organising content into ARIA landmarks can help screen reader users navigate a page. Landmarks programmatically identify sections (also known as regions) of a page and so can provide an easy way for users to skip over blocks of content or jump to a particular section of interest. Landmarks are added by using the role attribute on an element that marks the section, such as:

Use consistent navigation patterns

Keep navigation patterns and information consistent on different pages to help users re-find content more quickly. For example, people using screen magnification to display only a small part of the screen at a time often use visual cues to find repeated content and predict where they can find something. Consistent navigation patterns might include:

Tricky niche navigation

Some compnents are harder to navigate or simply inaccessible for our user with disabilities. That’s why we need to help keyboard users navigate by…

Help keyboard users navigate interactive data tables

Interactive data tables can be hard to navigate for keyboard users. If each row contains a link, the user has to press Tab over 24 times to get past a 25 row table. You can reduce the amount of data displayed by:

To go one step further to improve table navigation for keyboard users, you can:

Avoid infinite scroll

Infinite scroll, where content is loaded continuously as the user scrolls down the page, causes usability issues for keyboard and screen reader users because it’s harder for them to: