Course Outline (Part 32)

Welcome to Part 32 of the CSS Mastery & Responsive Layouts Course. In this part, we will explore Accessibility (a11y) in CSS: Focus States & Motion Reduction.

Web accessibility is a critical requirement of web design. As front-end developers, we must ensure our pages remain navigable for keyboard users, users with visual impairments, and those who experience motion sickness. CSS plays a vital role in accessibility through focus styles, responsive sizing, color choices, and motion reduction queries.

Chapter 168: Focus Indicators & :focus-visible

Keyboard users rely on visual indicators to know which element is currently focused (via the Tab key). Removing focus outlines (outline: none;) without a replacement is a severe accessibility violation.

32.1 Styling Custom Focus Rings

The :focus pseudo-class applies anytime an element receives focus. However, mouse users often dislike seeing focus rings when clicking buttons. The :focus-visible selector solves this by applying focus rings only when the browser determines that a keyboard or assistive tech is driving the interaction.

/* Remove default outline only when focus-visible is supported */
button:focus {
  outline: none;
}

/* Custom indicator only for keyboard navigation */
button:focus-visible {
  outline: 3px solid #2563eb;
  outline-offset: 4px;
  border-radius: 4px;
}

32.2 Avoiding Focus Ring Clashes

Always use outline-offset to separate the outline ring from the borders of the element. This ensures the indicator remains clearly visible even if the button has a background matching the focus color.

Chapter 169: Designing Accessible Color Contrast & Text

Color contrast ensures readability for users with low vision or color blindness.

32.1 Sizing Text Relatively

Avoid absolute text sizes like px. Instead, use rem units to respect user browser font scaling preferences:

html {
  font-size: 100%; /* Usually 16px default */
}
body {
  font-size: 1rem; /* Dynamically scales with browser default scale */
}

32.2 Ensuring Contrast Ratios

WCAG (Web Content Accessibility Guidelines) requires a contrast ratio of at least:

  • 4.5:1 for normal text.
  • 3:1 for large text (18pt / 24px or larger).

Use tools to verify your color contrast, and do not rely on color alone to convey meaning (e.g., color-coding error fields should also include warning icons or text alerts).

Chapter 170: Respecting Motion Settings (prefers-reduced-motion)

UI animations can cause dizziness, nausea, or seizures for users with vestibular system disorders. The prefers-reduced-motion media query allows us to disable or tone down transitions and keyframe animations.

32.1 Implementing Motion Reductions

You can write a global reset to disable or slow down all transitions for users who have turned on reduced motion in their OS settings:

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

32.2 Selective Animation Slowing

Instead of disabling, sometimes simple fades are acceptable while complex movements are removed:

/* Normal spinning animation */
.loading-spinner {
  animation: spin 1s linear infinite;
}

/* Accessible fade animation for reduced motion */
@media (prefers-reduced-motion: reduce) {
  .loading-spinner {
    animation: pulse 2s ease infinite; /* Slow, gentle opacity pulse */
  }
}

Chapter 171: Accessibility Practice & Self-Check

32.1 Practice Exercises

  1. Exercise 1: Accessible Form Button: Create a button element. Style a custom :focus-visible indicator with a contrast-compliant background, and write a @media (prefers-reduced-motion: reduce) block that cancels its hover scale transition.

32.2 Self-Check Questions

  1. Why is outline: none; bad for accessibility?
    • Answer: It removes the visual focus indicator, making it impossible for keyboard-only users to navigate the page.
  2. What is the difference between :focus and :focus-visible?
    • Answer: :focus triggers on both mouse clicks and keyboard selection; :focus-visible triggers only when keyboard navigation is detected.
  3. What CSS property adds spacing between an outline ring and the element edge?
    • Answer: outline-offset.
  4. What unit of measurement should you use for text sizing to respect user agent scaling?
    • Answer: rem.
  5. What is the minimum WCAG contrast ratio for normal body text?
    • Answer: 4.5:1.
  6. Which media query allows developers to detect vestibular or motion sensitivities?
    • Answer: prefers-reduced-motion.
  7. What is a standard technique to completely disable CSS keyframe animations for reduced motion?
    • Answer: Setting animation-duration: 0.01ms !important;.
  8. Should you rely only on colors to indicate success or failure states?
    • Answer: No, you should combine color with icons, text, or visual borders.
  9. Is rem affected by the parent element’s font-size?
    • Answer: No, rem is relative to the root (html) element’s font-size, whereas em is relative to the parent.
  10. Does outline take up space in the document layout flow?
    • Answer: No, outlines are drawn outside the box element and do not affect layout or trigger reflows.

Discussion

Loading comments...