CSS Accessibility

Accessible CSS

Written by Swapnil RajaPublished 30 Jul 2026

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.

PreviousGenerated Content NextCSS Theming