CRITICALWCAG 2.4.7 AA
No Visible Focus
Interactive elements suppress default focus styles, so keyboard users cannot track position.
Try It Yourself
Demo warning
Focus is still moving in the DOM, but there is no visual indicator for users.
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
Keyboard users
Low-vision users
Users needing strong visual cues
Power users who avoid mouse input
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.
WCAG 2.1.2 A
CRITICAL
Keyboard Trap
Focus gets stuck with no way out
Open Demo + Test Steps
WCAG 2.1.2 A
CRITICAL
Focus Trap in Drawer
Focus is trapped inside a slide-over panel
Open Demo + Test Steps
WCAG 1.1.1 A
CRITICAL
Missing Alt on Functional Images
Image buttons and links with no text alternatives
Open Demo + Test Steps