Accessibility and CSS — focus states, motion, and contrast

A visible focus indicator is how a keyboard-only user (someone who can't use a mouse, or is navigating efficiently without one) sees which element is currently active — remove it, and every interactive element on the page becomes genuinely unusable for that entire category of user, since there's no way to tell where keyboard input is currently going. :focus-visible (rather than plain :focus) is the modern refinement: it shows the indicator for keyboard navigation specifically, while suppressing it for a mouse click — addressing the actual complaint that motivated outline: none in the first place (an unwanted outline flash on mouse click) without removing the indicator keyboard users genuinely depend on.

Some users genuinely experience real physical symptoms (dizziness, nausea, migraines) from motion effects — vestibular disorders are a real, documented, and common enough condition that every major OS ships a system-level "reduce motion" setting, which prefers-reduced-motion: reduce lets a page detect and respect directly in CSS. This isn't a nice-to-have polish item; for the users this setting exists for, an unconditional animation is a genuine barrier to using the page at all, not just an aesthetic annoyance.

WCAG (the Web Content Accessibility Guidelines) defines a precise, calculable minimum contrast ratio between text and its background — 4.5:1 for normal-size text at the common "AA" level — which is a genuinely measurable number, not a subjective design judgment, and browser DevTools' color picker typically shows the computed ratio directly while choosing a color. Low-contrast text is a real barrier for users with low vision, color blindness, or simply anyone viewing a screen in bright sunlight — a category of accessibility issue that's entirely preventable by checking the number before shipping a color pairing, rather than eyeballing whether text "looks readable enough."

display: none (and visibility: hidden) removes an element from both the visual rendering and the accessibility tree — genuinely gone for every user, sighted or not. Content meant to be read by a screen reader but not shown visually (a common pattern: extra context for an icon-only button) needs the .visually-hidden pattern above instead — visually clipped to nothing, but still present in the accessibility tree, a real, different outcome from simply hiding the element with display: none.