Most accessibility work is HTML's job (covered in the HTML course's accessibility lesson), but a handful of things are specifically CSS's responsibility — and a few common CSS habits quietly hurt page performance.
Some users set their OS to reduce motion — for vestibular disorders, or simple preference. Wrapping animations in this media query respects that setting.
@media (prefers-reduced-motion: reduce) {
* {
animation-duration: 0.01ms !important;
transition-duration: 0.01ms !important;
}
}A keyboard user relies on the visible focus outline to know where they are on the page. Removing it without a replacement makes the page unusable by keyboard.
/* Bad — removes the only visible sign of focus */
:focus {
outline: none;
}
/* Good — replaces it with a clearer custom style */
:focus-visible {
outline: 2px solid blue;
outline-offset: 2px;
}Light gray text on a white background might look clean, but is genuinely unreadable for many users. A contrast ratio of at least 4.5:1 for normal text is the standard accessibility guideline (WCAG AA).
| Habit | Why it costs something |
|---|---|
| Deeply nested or overly specific selectors | Slower for the browser to match against every element |
| Animating width, height, or top/left | Forces the browser to recalculate layout every frame |
| Animating transform and opacity instead | The browser can composite these on the GPU without recalculating layout |
| Loading every font weight "just in case" | Each unused weight is wasted download size |
The one habit worth remembering
The single most impactful performance swap: animate transform/opacity instead of width/height/top/left wherever the same visual effect is achievable either way.