1 min read
Small Accessibility Wins That Compound
You don't need an audit to start. Semantic headings, honest focus states, and reduced-motion guards — small habits that quietly make every page better.
Accessibility work gets framed as a compliance project, which makes it feel expensive. In practice, the highest-value fixes are habits, not projects.
One real heading per page
Every page needs exactly one <h1> that names the page, even if the visual design doesn't show it — sr-only exists for exactly this. Screen reader users navigate by headings more than by anything else.
Focus states you can actually see
If you removed the default outline for aesthetics, you owe the keyboard a replacement. The modern pattern is focus-visible, which shows the ring for keyboard users without flashing it on every mouse click.
Respect reduced motion
@media (prefers-reduced-motion: reduce) {
*,
*::before,
*::after {
animation-duration: 0.01ms !important;
transition-duration: 0.01ms !important;
}
}Vestibular disorders are more common than most developers assume, and the guard costs eight lines.
Accessible by default is cheaper than accessible by retrofit — every single time.
None of these require a ticket, a sprint, or sign-off. They require remembering that the person on the other side of the screen may not be using it the way you do.