# Visible Focus Indicators

Focus visibility, focus order, focus not obscured, hover/focus content.

## Criteria

| Standard | Criteria                                                                                                                 |
| -------- | ------------------------------------------------------------------------------------------------------------------------ |
| WCAG 2.2 | 1.4.13 Content on Hover or Focus (AA), 2.4.3 Focus Order (A), 2.4.7 Focus Visible (AA), 2.4.11 Focus Not Obscured (AA)   |
| RGAA 4.1 | 10.7 Focus visibility, 10.11 Reflow, 10.12 Text spacing, 10.13 Content on hover/focus, 10.14 CSS-only additional content |

---

### RGAA 10.7 — Focus Visible (AA)

**Criterion:** For each page, is focus visible on every element that receives focus?

Maps to WCAG 1.4.1 (A) and 2.4.7 (AA).

#### Test 10.7.1

For each element receiving focus, does the focus indicator satisfy one of these conditions?

- The browser's native focus style is not suppressed or degraded.
- An author-defined focus style is visible.

**Methodology:**

1. Identify all elements that can receive focus (links, form controls, any element with `tabindex >= 0`).
2. For each focusable element, verify the focus indication is present (via outline, background, or both) and has sufficient contrast (ratio >= 3:1).
3. If true for every focusable element, the test passes.

**WCAG techniques:** G149, G165, G183, G195, SCR31, C15. **Failures:** F73, F78.

---

### RGAA 10.11 — Reflow (AA)

**Criterion:** Can content be presented without loss of information or functionality, without requiring horizontal scrolling at 320 px width (horizontal text) or vertical scrolling at 256 px height (vertical text)?

Maps to WCAG 1.4.10 (AA).

#### Test 10.11.1

When horizontal-reading content is displayed in a window reduced to 320 px width, are all information and functionalities available without any horizontal scrolling (except particular cases)?

**Methodology:**

1. Identify information and functionalities in the document (content designed for vertical scrolling, i.e. horizontal text direction).
2. Reduce the viewport to 320 px width and verify all information and functionalities remain available without horizontal scrolling.
3. If true, the test passes.

#### Test 10.11.2

When vertical-reading content is displayed in a window reduced to 256 px height, are all information and functionalities available without any vertical scrolling (except particular cases)?

**Methodology:**

1. Identify information and functionalities in the document (content designed for horizontal scrolling, i.e. vertical text direction).
2. Reduce the viewport to 256 px height and verify all information and functionalities remain available without vertical scrolling.
3. If true, the test passes.

#### Particular cases

The following content is exempt because it requires two dimensions to be understood or used:

- Images, charts, or videos
- Games (e.g. platform games)
- Slideshows / presentations
- Data tables
- Interfaces requiring a horizontal scrollbar during manipulation

Note: most mobile OS browsers (Android, iOS) do not correctly handle redistribution on zoom. The criterion is considered not applicable in those environments.

#### Technical note

"Pixel" here refers to the CSS pixel as defined by the W3C (https://www.w3.org/TR/css3-values/).

**WCAG techniques:** C34, C37.

---

### RGAA 10.12 — Text Spacing Override (AA)

**Criterion:** Can text spacing properties be overridden by the user without loss of content or functionality (except particular cases)?

Maps to WCAG 1.4.12 (AA).

#### Test 10.12.1

Does text remain readable when display is modified with all of these conditions (except particular cases)?

- `line-height` increased to 1.5x the font size
- Paragraph spacing (`<p>` margin-bottom) increased to 2x the font size
- `letter-spacing` increased to 0.12x the font size
- `word-spacing` increased to 0.16x the font size

**Methodology:**

1. Modify the document styles by setting:
   - `line-height: 1.5` on all elements
   - `margin-bottom: 2em` on `<p>` elements
   - `letter-spacing: 0.12em` on all elements
   - `word-spacing: 0.16em` on all elements
2. For each text passage, verify it remains readable, except: subtitles directly embedded in a video, text images, text inside a `<canvas>`.
3. If true for every text passage, the test passes.

Note: a reference implementation is available at https://github.com/alastc/adaptation-scripts/blob/master/scripts/text-adaptation.js

#### Particular cases

The following content is exempt (user has no personalization control):

- Subtitles directly embedded in a video
- Text images
- Text inside a `<canvas>` element

Covered in detail in `a11y-motion-reflow.md`.

**WCAG techniques:** C8, C21, C35, C36.

---

### RGAA 10.13 — Content on Hover or Focus (AA)

**Criterion:** Is additional content appearing on focus or hover of an interface component controllable by the user (except particular cases)?

Maps to WCAG 1.4.13 (AA).

#### Test 10.13.1 — Dismissible

Can each additional content that becomes visible on focus or hover be hidden by a user action without moving the focus or the mouse pointer (except particular cases)?

**Methodology:**

1. Identify additional content that becomes visible on focus or hover of a UI component, excluding:
   - Content controlled by the user agent (e.g. native `title` tooltips, native form validation)
   - Content made visible by user activation (e.g. modal dialogs)
2. For each additional content, verify that:
   - Either the additional content is positioned so it does not obstruct other informational content (including the triggering component), under all viewing conditions (including zoom);
   - Or a keyboard mechanism (e.g. Escape key) dismisses the additional content.
3. If true for each additional content, the test passes.

#### Test 10.13.2 — Hoverable

Can each additional content that appears on hover of a UI component be hovered by the mouse pointer without disappearing (except particular cases)?

**Methodology:**

1. Identify additional content that becomes visible on hover of a UI component, excluding:
   - Content controlled by the user agent (e.g. native `title` tooltips, native form validation)
   - Content made visible by user activation (e.g. modal dialogs)
2. For each additional content, verify that it can be hovered by the mouse pointer without disappearing.
3. If true for each additional content, the test passes.

#### Test 10.13.3 — Persistent

Does each additional content that appears on focus or hover of a UI component satisfy one of these conditions (except particular cases)?

- The additional content remains visible until the user moves the pointer or focus away from both the additional content and the triggering component.
- The additional content remains visible until the user triggers an action to dismiss it without moving focus or pointer from the triggering component.
- The additional content remains visible until the information it conveys is no longer valid.

**Methodology:**

1. Identify additional content that becomes visible on focus or hover of a UI component, excluding:
   - Content controlled by the user agent (e.g. native `title` tooltips, native form validation)
   - Content made visible by user activation (e.g. modal dialogs)
2. For each additional content, verify it remains visible:
   - Until the user moves the pointer or focus away from the content or the triggering component;
   - Until the user triggers the dismiss mechanism;
   - Until the information is no longer valid (e.g. a "busy" state or an error message that disappears after correction).
3. If true for each additional content, the test passes.

#### Particular cases

- When additional content is controlled by the user agent (e.g. `title` attribute, native form validation) or is a modal dialog conforming to the WAI-ARIA `dialog` design pattern, criterion 10.13 is not applicable.
- When additional content does not obscure or replace any informational content, test 10.13.1 is not applicable.

**WCAG failure:** F95.

---

### RGAA 10.14 — CSS-only Additional Content Keyboard Accessible (A)

**Criterion:** Can additional content appearing via CSS styles only be made visible by keyboard and by any pointing device?

Maps to WCAG 2.1.1 (A).

#### Test 10.14.1 — Content appearing on hover via CSS

Does additional content appearing on hover of a UI component via CSS (`:hover` pseudo-class) also satisfy one of these conditions (if necessary)?

- The additional content also appears on activation of the component via keyboard and any pointing device.
- The additional content also appears on focus of the component.
- The additional content also appears via activation or focus of another component.

**Methodology:**

1. Identify additional content that becomes visible on hover of a UI component via a CSS mechanism (`:hover` pseudo-class).
2. For each additional content, verify it also appears:
   - On activation of the component via keyboard or any other pointing device;
   - On focus of the component;
   - On activation or focus of another component.
3. If true for each additional content, the test passes.

#### Test 10.14.2 — Content appearing on focus via CSS

Does additional content appearing on focus of a UI component via CSS (`:focus` pseudo-class) also satisfy one of these conditions (if necessary)?

- The additional content also appears on activation of the component via keyboard and any pointing device.
- The additional content also appears on hover of the component.
- The additional content also appears via activation or hover of another component.

**Methodology:**

1. Identify additional content that becomes visible on focus of a UI component via a CSS mechanism (`:focus` pseudo-class).
2. For each additional content, verify it also appears:
   - On activation of the component via keyboard or any other pointing device;
   - On hover of the component;
   - On activation or hover of another component.
3. If true for each additional content, the test passes.

**WCAG technique:** G202.

---

### Focus Order — WCAG 2.4.3 (A)

Focusable components receive focus in an order that preserves meaning and operability. DOM order must match visual order. Use `tabindex="0"` sparingly. Never use `tabindex` > 0.

### Focus Not Obscured — WCAG 2.4.11 (AA)

Focused element must not be entirely hidden by sticky headers, footers, or overlays. Use `scroll-padding-top` for sticky headers. Manage focus properly in modals. Tooltips must not cover the focused element.

## Patterns

```html
<!-- BAD: removes focus outline entirely -->
<button class="focus:outline-none">Click</button>

<!-- GOOD: visible ring on keyboard focus -->
<button class="focus:outline-none focus-visible:ring-2 focus-visible:ring-offset-2 focus-visible:ring-blue-500">
  Click
</button>
```

**Focus Not Obscured** — ensure focused elements aren't hidden by sticky headers or overlays:

```css
:target {
  scroll-margin-top: 80px;
}
```

Never use `tabindex` > 0. Use `tabindex="0"` to add to tab order, `tabindex="-1"` for programmatic focus only.