# Focus Reachable

## Prerequisites

See [Keyboard Prerequisites](https://ebay.gitbook.io/oatmeal/keyboard/..#prerequisites).

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

* [Focus Moveable](https://ebay.gitbook.io/oatmeal/keyboard/focus-is-not-trapped)
* [Focus Visible](https://ebay.gitbook.io/oatmeal/keyboard/focus-is-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


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://ebay.gitbook.io/oatmeal/keyboard/keyboard-reachable.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.