#Accessibility

11 snippets

• CSS

  Respect prefers-reduced-motion

  Turn off or shorten animations for users who ask their system for less motion.

• CSS

  Accessible focus ring with :focus-visible

  Show a clear focus outline for keyboard users without drawing it on mouse clicks.

• HTML

  Accessible modal with the dialog element

  Use the native dialog element for a modal with built-in focus trapping, Escape to close and a backdrop.

• HTML

  Accordion with details and summary

  A keyboard-accessible FAQ accordion with no JavaScript, including an exclusive group using the name attribute.

• CSS

  Accessible button styles with states

  A base button with hover, active, disabled and focus styles that meets minimum target size.

• HTML

  Accessible data table markup

  Use caption, thead, th scope and a scroll wrapper so screen readers and small screens handle tables well.

• CSS

  Visually hidden (screen-reader only) utility class

  Hide content visually while keeping it available to assistive technology.

• CSS

  Dark mode with CSS custom properties and color-scheme

  Switch themes by redefining variables under prefers-color-scheme, with a manual override attribute.

• JavaScript

  Copy text to the clipboard

  Use the async Clipboard API with a legacy fallback and report success or failure to the user.

• HTML

  Accessible skip-to-content link

  Let keyboard users jump past repeated navigation straight to the main content.

• HTML

  Accessible form field with label, hint and error

  Associate labels, help text and validation errors with an input so screen readers announce them.