AccessibilityTab navigation

A quick and easy way to test a common use of keyboard navigation is to use the tab key on your keyboard.

WebAIM has a useful list of common keyboard controls.

By pressing this key, a user moves down the page to the next interactive element. In reverse, pressing ‘Shift+Tab’ the user moves backwards up the page to the previous interactive element.

Interactive elements

Interactive elements are anything on the page that a user can interact with. This could be a link or button, an image to be expanded, a form input field, calendar or any number of other things.

It’s important that every interactive element on a page is accessible by keyboard. You can check this by looking out for the focus indication, or if focus indication is not present you can also try and confirm if an element is accessible by the keyboard by looking in the bottom left of your screen.

The link information found in the bottom left corner can give you an idea of whether the element is selected – for instance in this image of GOV.UK, you can see where the link would take you to.

Focusing on an interactive elements should not initiate a change such as submitting a form or changing focus to another interactive component.

Interacting with an element should not automatically move a user to another page or open a popup, unless the user has been informed beforehand. Instead provide a submit to perform an action.

Sometimes you can get stuck in elements such as carousel content or social media widgets. When this happens and you cannot move out of an element with tab, first try using the esc key. If you continue to be stuck, this is a fault and is known as getting caught in a keyboard trap.