• Success Criterion 2.4.7
  • Conformance level AA

Focus Indicator That’s Only Partially Visible When Clipped

2.4.7 — Focus Visible

Scenario

Setting

A language-learning app's lesson screen

What’s wrong

Focus indicator only partially visible — clipped by overflow:hidden (style that clips overflowing content) ancestors or drawn on only one edge of the component.

Example 

.unit-carousel {
  overflow-x: auto;
  overflow-y: hidden;
}
.unit-thumb:focus-visible {
  outline: 3px solid #16a34a;
}

Why it matters

Tabbing through unit thumbnails, the focus outline's top and bottom edges get sliced off by the container's overflow clipping.

How to test

Tab to a control and zoom in: if the focus indicator is only partially visible (clipped by an overflow:hidden ancestor, or drawn on only one edge), it fails.

How to fix

An outline drawn outside a clipped container's bounds gets cut off; bring it inward or add room for it.

.unit-carousel {
  overflow-x: auto;
  overflow-y: hidden;
  padding-block: 4px;
}
.unit-thumb:focus-visible {
  outline: 3px solid #16a34a;
  outline-offset: -3px;
}

Outcome

A learner tabbing across unit thumbnails sees the full outline on every one, top to bottom.

Who is affected

Keyboard and low-vision users see only a partial, hard-to-notice sliver of the focus indicator on each thumbnail.

Learn more

Related scenarios