Understanding Success Criterion 2.4.13: Focus Not Obscured (Enhanced)

Success Criterion 2.4.13 Focus Not Obscured (Enhanced) (Level AAA): When a user interface component receives keyboard focus, no part of the focus indicator is hidden by author-created content.

Status

This understanding document is part of the draft WCAG 2.2 content. It may change or be removed before the final WCAG 2.2 is published.

Intent

The purpose of this Success Criterion is to ensure that a component with keyboard focus is visible. This criterion is closely related to Focus Not Obscured (Minimum) but requires that the whole of the component is visible.

Benefits

Examples

Techniques

Each numbered item in this section represents a technique or combination of techniques that the WCAG Working Group deems sufficient for meeting this Success Criterion. However, it is not necessary to use these particular techniques. For information on using other techniques, see Understanding Techniques for WCAG Success Criteria, particularly the "Other Techniques" section.

Sufficient Techniques

  1. CSS: Using scroll-padding to ensure a sticky header does not obscure the focused item (Potential future technique).

Failures

The following are common mistakes that are considered failures of this Success Criterion by the WCAG Working Group.

Key Terms

focus indicator

the pixels that are changed to visually indicate when a user interface component is in a focused state.

user interface component

a part of the content that is perceived by users as a single control for a distinct function

Note

Multiple user interface components may be implemented as a single programmatic element. "Components" here is not tied to programming techniques, but rather to what the user perceives as separate controls.

Note

User interface components include form elements and links as well as components generated by scripts.

Note

What is meant by "component" or "user interface component" here is also sometimes called "user interface element".

An applet has a "control" that can be used to move through content by line or page or random access. Since each of these would need to have a name and be settable independently, they would each be a "user interface component."