Menu
Experience design
-
Accessibility
- Writing content
- Visual design
- Clarity is key
- Users in control
- Cool, calm, considerate
- Experience design
- Easy operability gives users confidence
Clear navigation and findable content
- Help users to remain in control
Clear navigation and findable content
When it comes to creating a user experience, a good first step is to make all functionality available from a keyboard.
UX Owner: Izzy Burrows
UI Owner: Gemma D.
This page is In Progress and subject to frequent changes
Please contact Adrian T. to verify any information is correct before using it.
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.
Diagram coming soon
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).
Diagram coming soon
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
Diagram coming soon
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.>
Diagram coming soon
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: