Accessibility-Focused CSS

Accessibility is not a feature you bolt on — it is part of writing good CSS. A few habits make your interfaces usable by people with disabilities and better for everyone. These are expected of professional work.

Visible focus with :focus-visible

Keyboard users need to see which element is focused. Never remove outlines without a replacement. <code>:focus-visible</code> shows a focus ring for keyboard users but not on mouse clicks — the best of both worlds.

<button class="btn">Tab to me</button>

.btn{padding:10px 18px;border:0;border-radius:9px;background:#2563eb;color:#fff;cursor:pointer}
.btn:focus-visible{outline:3px solid #93c5fd;outline-offset:2px}

Respecting reduced motion

Some people experience nausea or distraction from motion. The <code>prefers-reduced-motion</code> media query lets you disable or soften animations for them. Wrap non-essential motion in a guard, or globally reduce it.

@media (prefers-reduced-motion: reduce) {
  *, ::before, ::after {
    animation-duration: .01ms !important;
    transition-duration: .01ms !important;
  }
}

Colour contrast

Text must have enough contrast against its background — at least 4.5:1 for normal text, 3:1 for large text (WCAG AA). Light grey on white may look elegant but is unreadable for many. Always check contrast, and never use colour as the only signal (pair it with text or icons).

Visually-hidden text

Sometimes you need text for screen readers but not on screen (like a label for an icon button). The visually-hidden pattern hides it visually while keeping it accessible — do not use <code>display: none</code>, which hides it from everyone.

.visually-hidden {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0,0,0,0);
  white-space: nowrap; border: 0;
}

.label { display: none; }

.label { /* visually-hidden pattern */ }