Focus Reachable

Steps to ensure all interactive controls on a page are reachable via keyboard alone.

Prerequisites

See Keyboard Prerequisites.

These steps assume that the following tests have been completed and that issues found have been resolved:

• Focus Moveable

• Focus Visible

Steps

1. Identify all interactive controls on the page.

   • See Identifying Interactive Controls in knowledge section below.

2. Place keyboard focus into the browser's address bar

   1. There should now be a blinking caret, indicating that the input has keyboard focus

3. Use TAB key to move forwards through the browser chrome

   • Do not create any issues for the browser chrome

4. Use TAB key to move forwards through each identified interactive control; pause on every key press to verify that control receives focus

   • Do not hold down the TAB key

5. If an element receives focus that was not identified as an interactive control, create an issue

   1. See "Non-interactive element in keyboard focus order"

6. If an interactive control appears to be skipped, note it down; it might eventually receive focus

7. Repeat steps 4 and 5 until focus returns to the browser chrome

8. If an interactive control receives focus, but not when expected, create an issue

   1. See "Control not in correct keyboard focus order" below

9. If an interactive control never receives focus, create an issue

   1. See "Control not in keyboard focus order" below

Creating Issues

Provide enough information to identify which interactive elements do not receive keyboard focus.

Control not in keyboard focus order

• Description: Not reachable by keyboard

• Priority: P2

• Label or Tag: #a11y211

Control not in correct keyboard focus order

• Description: Incorrect keyboard focus order

• Priority: P3

• Label or Tag: #a11y211

Non-interactive element in keyboard focus order

• Description: Should not be reachable by keyboard

• Priority: P3

• Label or Tag: #a11y211

Knowledge

Identifying Interactive Controls

Examples of interactive controls are:

• Link

• Button

• Textbox

• Checkbox

• Radio Button Group

• Select

• Switch

• Tabs

• etc

Interactive Controls and Keyboard Focus

When using a keyboard to interact with a page, the user should be able to move keyboard focus onto interactive controls by using the TAB key or SHIFT+TAB keys. Some interactive controls have additional keys to operate the control, UP and DOWN arrow keys for example.

Reasons an Element Might Not Receive Focus

There are a few reasons an element might not receive focus:

• the element is a static element, with no interactive behaviour (i.e. it has no actions on click or hover/focus)

• the control has been intentionally disabled

• the element is part of a widget or group that is first reached with TAB key, and then subsequently controlled via ARROW keys (e.g. radio button groups or tabs)

• the element is absolutely positioned with CSS; meaning it might receive focus earlier or later than anticipated.

About

Author(s): Ian McBurnie & Luis Garcia

Last Updated: 2020 December 18th