CSS Accessibility
Accessible CSS
Preserve focus, readable contrast, zoom behavior, target size, and semantic reading order while styling interfaces. It addresses focus visibility, contrast, zoom and text resizing, target size, source order, hidden content, and the boundary between CSS and semantic HTML.
Accessible CSS preserves the information, order, focus, contrast, and operability already expressed by the document. Visual styling must not make a valid interface harder to perceive or use.
Accessibility failures often appear when presentation overrides browser safeguards: outlines are removed, text cannot resize, controls become too small, or Grid rearranges the page away from its reading order. Testing the styled result with keyboard navigation, zoom, user colors, and real content reveals those failures early. This topic also connects with CSS Outline and Modern Form Styling.
Focus must remain visible
Example
css
:focus-visible {
outline: 3px solid #0ea5e9;
outline-offset: 3px;
}
:focus:not(:focus-visible) {
outline: none;
}Do not remove outlines without supplying an equally clear replacement. Test keyboard focus against every background and in forced-color modes.
Do not disable text resizing
Example
css
body {
font-size: 1rem;
line-height: 1.5;
}
.content {
max-width: 70ch;
}- Keep essential text contrast at least at the applicable WCAG threshold.
- Do not communicate status by color alone.
- Use source order that remains logical when Grid or Flexbox styling is removed.
- Give pointer targets enough size and separation.
- Test at 200% browser zoom and with increased text spacing.
- Never hide focusable content with clipping, opacity, or off-screen positioning.
Accessibility Checks
| CSS concern | Required outcome | Useful syntax |
|---|---|---|
| Keyboard focus | The focused control remains clearly visible. | :focus-visible |
| Forced colors | System colors and controls remain distinguishable. | @media (forced-colors: active) |
| Reduced motion | Non-essential movement can be removed. | prefers-reduced-motion |
| Zoom and reflow | Content remains usable without two-axis scrolling. | Relative units and flexible layout |
Complete Example
Run the complete document below in the Try It editor. Resize the preview or interact with the controls where the example calls for it.
Complete runnable example
html
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Accessible CSS example</title>
<style>
* { box-sizing: border-box; }
body {
margin: 0;
padding: 2rem;
font-family: system-ui, sans-serif;
line-height: 1.5;
}
main { max-width: 70rem; margin-inline: auto; }
article, section, aside, form, .card, .panel {
padding: 1rem;
border: 1px solid #cbd5e1;
border-radius: 0.6rem;
}
:focus-visible {
outline: 3px solid #0ea5e9;
outline-offset: 3px;
}
:focus:not(:focus-visible) {
outline: none;
}
body {
font-size: 1rem;
line-height: 1.5;
}
.content {
max-width: 70ch;
}
</style>
</head>
<body>
<main class="content"><h1>Keyboard focus</h1><p><a href="#">Focus this link</a></p><button>Focus this button</button><label>Name <input></label><p>Use Tab to inspect the focus indicator.</p></main>
</body>
</html>Browser Support
Feature | Chrome | Edge | Firefox | Safari |
|---|---|---|---|---|
| :focus-visible | 86 | 86 | 85 | 15.4 |
| forced-colors media query | 89 | 79 | 89 | 16 |
Versions show the first stable desktop release with unprefixed support. Data source: MDN Browser Compatibility Data 8.0.8. A partial-support note is included where it changes how the example behaves.
Notes
- CSS can improve accessibility, but it cannot repair missing labels, incorrect landmarks, or keyboard behavior in the HTML and JavaScript.
- Test the example with real content, keyboard input, browser zoom, and the narrowest layout your project supports.
- Use a fallback when the support table shows that one of your required browsers predates the feature.
Conclusion
Preserve focus, contrast, zoom, target size, and document order through every visual treatment.
Use CSS to strengthen states and hierarchy, but repair missing names, roles, and keyboard behavior in HTML or JavaScript where they belong. Include accessibility checks in component review rather than treating them as a final theme applied after the interface is complete.