Element in sequential focus order is missing visible focus
| Field | Value |
|---|---|
| Rule code | Element_Focus_Visible_Missing |
| WCAG conformance level | AA |
| WCAG success criterion | 2.4.7 Focus Visible |
| Must be fixed at source | Yes |
Description
Elements that are part of the sequential focus order must have a visible focus indicator. Focus states must be perceivable and visually distinct from the background or other visual states.
How to fix
Ensure that focusable elements have visible focus indicators (e.g., borders, outlines) that are distinct from the element's background and state when it's not focused. Use CSS properties like outline, border, or custom focus styles to enhance visibility. Avoid overriding browser defaults with styles like outline: none unless custom focus styles are implemented.