• Success Criterion 2.2.2
  • Conformance level A

Pause Control That’s Present but Not Keyboard Accessible

2.2.2 — Pause, Stop, Hide

Scenario

Setting

A bank's mobile money-transfer screen

What’s wrong

Pause control present but not keyboard accessible or not labeled (mechanism unusable).

Example 

<div class="pause-icon" onclick="pauseTicker()"></div>

Why it matters

A customer using only a keyboard to review exchange rates can't reach the pause control at all.

How to test

Tab to the pause control: if it's not keyboard accessible, or has no accessible label, it's effectively unusable and fails.

How to fix

Use a native button element so it's automatically focusable and gets an accessible name.

<button aria-label="Pause exchange rate ticker" onclick="pauseTicker()">Pause</button>

Outcome

Tabbing to the pause button, a customer silences the ticker and reads the exchange rate.

Who is affected

Keyboard-only and screen reader users can't discover or activate a div-based control with no name or focus.

Learn more

Related scenarios