Accessibility modes

Preview Available in release assets

Coordinate visible keyboard focus, reduced motion, forced colors, system-color theming, visually hidden content, zoom, attention-respecting defaults, and native semantic fallbacks.

Accessibility modes primary example

<section class="thin-prose">
  <h2>Platform preference support</h2>
  <p>
    <a href="#accessible-target">Keyboard focus uses a semantic outline</a>; forced colors use system focus and icon behavior; reduced motion minimizes nonessential animation.</p>
    <p id="accessible-target" class="thin-visually-hidden">This text remains available to assistive technology.</p>
  </section>

Show code

<section class="thin-prose">
  <h2>Platform preference support</h2>
  <p>
    <a href="#accessible-target">Keyboard focus uses a semantic outline</a>; forced colors use system focus and icon behavior; reduced motion minimizes nonessential animation.</p>
    <p id="accessible-target" class="thin-visually-hidden">This text remains available to assistive technology.</p>
  </section>

Anatomy

focus-visible outline
Reduced-motion media query
Forced-colors media query
High Contrast system-color theme
thin-visually-hidden utility
Rem-based type and space
Attention-respecting library defaults

Variants and sizes

Keyboard focus
Reduced motion
Forced colors
High Contrast theme
Visually hidden content
Zoom and reflow
Calm motion and notification defaults

Gallery coverage: No structured variant fixtures are published yet; the primary example above is the only verified production markup.

States and difficult content

Rendered fixtures exercise authored content and constrained layouts with the same production assets.

Pointer and keyboard navigation
Reduced-motion preference
Forced-colors active
200% and 400% zoom
No CSS
Long localized and RTL content

Structured state fixtures are not published for this item yet.

Interaction and keyboard behavior

Platform and user preferences alter presentation without changing source order, focus order, native semantics, or task availability. Library defaults avoid auto-advancing carousels, autoplay media, focus-stealing toasts, and forced scroll on incoming realtime messages; application policy owns notification batching and marketing urgency.

Accessibility

These modes are safeguards, not a conformance claim. Components still need accessible names, semantics, keyboard operation, contrast, reflow, error identification, and manual review with assistive technologies. SSE and polling intervals in documentation examples are not library defaults.

Contract: PLATFORM
Basis: Native CSS layout and document defaults over semantic HTML; no APG widget

API

Load /foundation.css and a complete theme. Use semantic tokens and native HTML so forced colors and browser defaults can adapt. Use thin-visually-hidden only for content that should remain exposed to assistive technology.

Behavior tier: css-only

Structured host, property, and example tables are not authored for this item yet. Use the summary above and the primary example.

Fallback

Semantic HTML and native controls preserve the core accessibility contract without CSS.

Assets and dependencies

/foundation.css
/themes.css
/themes/high-contrast.css

Dependencies: None

Source: packages/ui/src/style/foundation.ts

Composition

Derived from the examples and style specs, not authored.

Composes

Prose