Accessibility

TactileGlass is CSS-only. You still own semantics, focus order, and ARIA — these notes cover what the stylesheet helps with.

Color & contrast

Semantic tokens (--tg-primary, body ink, emphasis) are tuned for light and theme-dark. Prefer text-body / text-body-secondary over low-contrast custom greys. Don’t rely on color alone for validation — pair with is-invalid text / icons.

Focus

Interactive controls expose visible focus (thicker borders / focus-ring-*). Keep custom components keyboard-reachable and avoid outline: none without a replacement. Use visually-hidden / visually-hidden-focusable for screen-reader-only labels.

Motion

Animation utilities respect reduced-motion when you wire prefers-reduced-motion at the app level (or disable enter animations for that media query). Prefer purposeful motion over looping decoration.

Structure

Use real headings, lists, and labels — classes don’t replace HTML.
Dropdowns/selects built with <details> need clear summary text and keyboard Esc handling (docs.js closes extras for demos).
Icon-only buttons need an accessible name (aria-label or visually hidden text).
Skip links and landmark regions are your responsibility; TG doesn’t inject a skip link.