Box Shadow and Accessibility
How to use CSS shadows and borders for accessible focus indicators — WCAG focus ring requirements.
Published:
Tags: CSS focus ring accessibility, accessible focus indicator CSS, WCAG focus style
Box Shadow and Accessibility Removing CSS focus indicators is one of the most common accessibility mistakes — it makes navigation impossible for keyboard users and breaks WCAG compliance. The fix is not to bring back the default browser ring unchanged, but to style a focus indicator that is both visually coherent with your design and meets the contrast requirements of WCAG 2.4.11. is a powerful tool here, but it requires a companion for Windows High Contrast mode. --- Why Focus Indicators Matter? Keyboard navigation is the primary access method for users with motor disabilities, power users who prefer the keyboard, and screen reader users who tab through interactive elements. When a keyboard user presses Tab, the focused element must be visually identifiable — this is the focus indicator.…
Frequently Asked Questions
What is a CSS focus ring?
A focus ring is the visual indicator shown around an interactive element (button, link, input) when it receives keyboard focus. Browsers display a default focus ring (typically a blue outline or system highlight), but it's often removed by developers with `outline: none` — which breaks keyboard accessibility.
How do I create an accessible focus indicator?
The minimum WCAG 2.4.11 requirement is a focus indicator with at least 3:1 contrast against adjacent colors and an area of at least the perimeter × 2px. In practice, a high-contrast `outline: 3px solid` plus `outline-offset: 2px` satisfies this. You can also use `box-shadow` for a more styled indicator.
What does WCAG 2.4.11 require for focus?
WCAG 2.4.11 (Focus Appearance, Level AA in WCAG 2.2) requires: the focus indicator's area must be at least the perimeter of the unfocused component × 2 CSS pixels; the focus color must have at least 3:1 contrast against adjacent unfocused colors. This applies to all keyboard-operable UI components.
How do I style the focus outline in CSS?
Use `outline` with a solid high-contrast color and a small `outline-offset` to separate it from the element edge. Avoid `outline: none` without providing an equivalent visible replacement. For custom focus rings, `box-shadow` combined with `outline: 2px solid transparent` (for forced-colors/Windows High Contrast mode) is the modern pattern.
What is outline vs box-shadow for focus?
`outline` renders outside the element's box model and respects `outline-offset`. `box-shadow` renders within the stacking context and can be stacked in layers. `outline` is visible in Windows High Contrast (Forced Colors) mode; `box-shadow` is not. The safest pattern combines both: a visible `box-shadow` plus a transparent `outline` that activates in forced-colors mode.
All articles · theproductguy.in