Summary - Accessible theme
Build a fully accessible theme with accessibility rules.
Pieces of an accessible theme
In this group you learned four pillars of accessible CSS: sr-only to hide visually, :focus-visible for keyboard focus rings, prefers-color-scheme for dark theme, and prefers-reduced-motion to reduce motion. Each one serves a different user need or preference.
Now you will combine them into a single accessible theme: hidden but readable labels, a clear focus ring, system-aware colors and a reduce-motion block.
Exercise sr-only class and focus ring
Write two blocks. In the first, define position: absolute, width: 1px, height: 1px and overflow: hidden on the .sr-only selector. In the second, define outline: 2px solid #ffba00 on the a:focus-visible selector.
Show example solution
/* pillars of an accessible theme */
.sr-only {
position: absolute;
width: 1px;
height: 1px;
overflow: hidden;
}
a:focus-visible {
outline: 2px solid #ffba00;
}Exercise A theme that follows system preferences
Write two @media blocks. The first is (prefers-color-scheme: dark); inside it, set --bg: #111 on :root. The second is (prefers-reduced-motion: reduce); inside it, set animation: none on *.
Show example solution
/* a theme that follows system preferences */
@media (prefers-color-scheme: dark) {
:root {
--bg: #111;
}
}
@media (prefers-reduced-motion: reduce) {
* {
animation: none;
}
}Test yourself
-
Which is a wrong practice for an accessible theme?
- Add hidden text to icon buttons with sr-only
- Write outline: none and put nothing in its place
- Offer a dark theme with prefers-color-scheme
- Reduce animations with prefers-reduced-motion
Show answer
Write outline: none and put nothing in its place — Correct. outline: none leaves the keyboard user stranded; a :focus-visible ring must replace it.
-
Write the button focus ring
button:focus-visible { ____; outline-offset: 2px; }Show answer
button:focus-visible { outline: 2px solid currentColor; outline-offset: 2px; }