No Visible Focus
Interactive elements suppress default focus styles, so keyboard users cannot track position.
Try It Yourself
This simulator is intentionally broken. Recreate the failure path, capture evidence, and validate the fix with the same sequence.
Scenario
In a high-pressure workflow, Keyboard users try to complete a core task and hit this failure pattern.
Watch For
- User cannot see focus location while tabbing.
- Wrong controls may be triggered due to lost orientation.
Done When
- Focus ring is visible on all interactive controls.
- Focus indicator has strong contrast and does not disappear on custom components.
Scenario
A person in this audience group is trying to complete a core task quickly and encounters this failure pattern.
Guided Run Progress
0 / 5 steps marked
Track setup, action, and failure signals as you run the simulation.
Quick Run Checklist
Demo warning
Focus is still moving in the DOM, but there is no visual indicator for users.
How to trigger the issue
Use Tab to move through form controls while focus indicator is hidden, then toggle to visible and compare.
Manual Testing Protocol
Follow this sequence to reproduce the failure consistently and verify the fix with the same workflow.
1. Setup
- Switch demo to the broken state where focus is hidden.
- Start at the first field and navigate by keyboard only.
2. Reproduction Steps
- Press Tab through all fields, links, and buttons.
- Try to submit while tracking your current focus target.
- Toggle to the reference state and repeat the same flow.
3. Expected Failure Signals
- User cannot see focus location while tabbing.
- Wrong controls may be triggered due to lost orientation.
- Form completion requires guesswork rather than confirmation.
4. Fix Verification
- Focus ring is visible on all interactive controls.
- Focus indicator has strong contrast and does not disappear on custom components.
- Keyboard journey is predictable from first control to final action.
Evidence Capture Checklist
- Record the exact user goal that fails (for example: submit form, complete checkout, navigate menu).
- Capture screen recording + keyboard path from first interaction to failure state.
- Map failure to WCAG 2.4.7 (Level AA) and affected user groups.
- Document business impact: conversion loss, support burden, legal/compliance risk, or trust damage.
The Impact
What Happens
- Users lose orientation and trigger the wrong controls
- Forms become error-prone and exhausting
- Keyboard navigation feels random and unsafe
Who Gets Hurt
The Broken Code
*:focus {
outline: none;
box-shadow: none;
}
button:focus,
a:focus,
input:focus {
outline: 0;
}WCAG 2.4.7: Reference
"Any keyboard-operable user interface has a mode where the keyboard focus indicator is visible."
Level AA - Without focus visibility, keyboard navigation is technically possible but practically unusable.
Related Critical Issues
Explore neighboring failures in the same severity band.
Keyboard Trap
Focus gets stuck with no way out
Focus Trap in Drawer
Focus is trapped inside a slide-over panel
Missing Alt on Functional Images
Image buttons and links with no text alternatives