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;
}

Next lesson: @page rule

We Are Enhancing Your Experience

Cookie Preferences

Strictly Necessary Cookies

Analytical Cookies