Forced colors, reduced motion and reflow

Forced colors (Windows High Contrast, forced-colors: active) replace colors with system colors and drop box-shadow. A focus ring that is only a shadow disappears. The kit draws focus with an outline and gives the checked and selected states system colors (Highlight, ButtonText). Your own components must do the same:

.my-focus:focus-visible {
  outline: 2px solid;
  outline-offset: 2px;
}

@media (forced-colors: active) {
  .my-state[aria-checked="true"] {
    background: Highlight;
    color: HighlightText;
  }
}

Reduced motion (prefers-reduced-motion: reduce) is a user request to stop non-essential movement. The kit's animations stop under that query. The primitives add no animation of their own: when an element leaves, they wait for your CSS animation to end before they unmount it, so a prefers-reduced-motion rule that removes the animation also ends the wait at once. Keep essential motion (a progress indicator that shows that work continues) and remove decorative motion:

.hero {
  transition: transform 300ms ease;
}

@media (prefers-reduced-motion: reduce) {
  .hero {
    transition: none;
  }
}

Reflow (WCAG 1.4.10) asks for a layout that works at a 320 CSS-pixel width without horizontal scrolling, and at 200 percent zoom. Tables and wide content scroll in their own container, which must be keyboard reachable (tabindex="0" and a name), so a keyboard user can reach the hidden columns. The matrix checks the apps at 390 pixels. The 320-pixel and 200-percent-zoom checks are open items in docs/research/17-a11y-audit.md.