Keyboard only navigation

2.1 Keyboard Accessible

People must be able to use only a keyboard to use all the functions of a website.

2.1.1 Keyboard (A)

This guideline ensures all content functionality can be operated using a keyboard only. Ensure that someone who relies on a keyboard can successfully operate all site functions without needing a mouse.

Test at the same time

• 2.1.2 No Keyboard Trap
• 2.4.3 Focus Order
• 2.4.7 Focus Visible

Exceptions

Functionality depends on the path of a user’s input, e.g. drawing curved lines, and not just the endpoints, e.g. drawing a straight line or dragging an object from one location and dropping it in another.

How to test

1. Open the web page to be tested.
2. Check that you are able to navigate through the entire page with a keyboard. Start with focus at the top of the page (in the address bar) and use the Tab key to move through the page from focusable element to focusable element, e.g. button, link, form field, etc. Check that you can activate any elements such as form controls, sliders, page-turners, or video controls with the keyboard. For example:
   • If the page contains an embedded video player, check that you can use the keyboard to navigate (generally with the Tab and arrow keys) and activate (using the Enter key) each control in the player. Can you pause it, and raise/lower the volume? Can you turn on captions? Can you then move focus past the video player and down to any links or navigation that follow it?
   • If the page contains a form, check that you can complete and submit the form without a mouse. Can you move from field to field (using the Tab key), move through groups of radio buttons and checkboxes (generally with arrow keys, and Spacebar to check options), select from drop-down options (up/down arrow) and then submit the form (by Tabbing to the submit button and using the Enter key)?
   • If the page contains a carousel, can you stop it, pause it, or switch between its panels using the keyboard?
3. Tab to every link and press Enter. Check that the link works the same as when you click on it using a mouse.
4. Tab to each button and press the Spacebar. Check that the button performs the same action as when clicked on with a mouse.
5. Check that, minus any clear exceptions, every action that can be performed with a mouse can be performed with the keyboard.

2.1.1  No Keyboard Trap (A)

This guideline is to ensure there are no keyboard traps within a web page.

A keyboard trap is an area within a web page from which you cannot escape by using keystrokes. Keyboard traps may occur in a form field, a pop-up dialog, or a section of the web page.

Ensure the cursor is not trapped in a section of content and a user cannot move the cursor to another part.

Test at the same time

• 2.1.1  Keyboard

How to test

1. Open the web page to be tested.
2. Start with focus at the top of the page (in the address bar) and use the Tab key to move through the page from focusable element to focusable element, e.g. button, link, form field, etc. Go through the entire page, including embedded videos, carousels, and the page footer. Check that you can use the Tab key to move all the way through the page and back up to the address bar without keyboard focus getting stuck anywhere on the page.
3. If the page has links or buttons that open a pop-up dialog, activate the pop-up dialog and check that you can close it and return to the main page using the keyboard, e.g. by pressing Enter on a Close button or pressing Esc to exit the pop-up.

2.4.7 Focus Visible (AA)

Web pages must visually indicate which element currently has keyboard focus, for example with an outline or change in colour to help people see which element on the web page has the keyboard focus so that they can orient themselves and interact with the page.

Test at the same time

• 2.1.1  Keyboard

How to test

1. Open the web page to be tested. Do not use Chrome or Safari for this test, since, under some conditions, those browsers add their own visible indication of keyboard focus.
2. Start with focus at the top of the page (in the address bar) and use the Tab key to move through the page from focusable element to focusable element, e.g. button, link, form field, etc. Check that, at each stop in the Tab order, the element with keyboard focus is visible and clearly distinguishable from non- focused elements? For example, a link or a button is highlighted in some way, or the cursor appears in a form input field. Note that if the focus indicator is visible, but doesn’t easily stand out, simply note this in the report rather than failing it completely.

Potential access issues

• Removing focus from an element as soon as it gets focus.
• Applying styles to an element in its unfocused state that hides the browser’s default Focus.

 Focus Highlight for Keyboard Only Users

Adding a focus highlight enables keyboard users to follow the focus as they navigate through the page.

By adding the following code to your CSS file, keyboard users will be able to see the focus on all actionable elements.