• Success Criterion 2.4.7
  • Conformance level AA

Focus Style That Only Appears on Hover, Never on Tab Focus

2.4.7 — Focus Visible

Scenario

Setting

A video-conferencing app's meeting controls

What’s wrong

Focus visible on hover-styled state only (:hover styles never mapped to:focus).

Example 

.mute-btn:hover {
  background: #2b2b2b;
  border: 2px solid #fff;
}

Why it matters

A keyboard user tabbing to the mute button during a call sees no visual change at all, since the highlight only exists for mouse hover.

How to test

Compare a control's:hover CSS styling to its:focus styling in DevTools: if hover has a visible effect but:focus doesn't, keyboard users get nothing.

How to fix

Hover and focus are separate states in CSS; a style written only for :hover never applies to keyboard focus.

.mute-btn:hover,
.mute-btn:focus-visible {
  background: #2b2b2b;
  border: 2px solid #fff;
}

Outcome

A host tabs to the mute button mid-meeting and sees the same clear highlight a mouse user would.

Who is affected

Keyboard users in live meetings can't confirm which control they're about to activate before pressing Enter.

Learn more

Related scenarios