Skip to content
fuji-ui

Accessibility

Accessibility overrides exact visual imitation whenever the two conflict. This is a stated design principle, not an afterthought.

Baseline, built into components

  • Semantic HTML first. Use real button, nav, table, label elements before ARIA
  • Every interactive element is keyboard-operable and shows a visible focus ring (:focus-visible)
  • Icon-only controls (IconButton, close buttons) require an explicit aria-label at the type level
  • Overlays (Dialog, Drawer, AlertDialog, Menu) trap and restore focus and close on Escape via Base UI
  • FormField wires aria-describedby and data-invalid automatically between label, description, error, and control
  • Color never carries meaning alone. Status uses icon + label + color together (see StatusIndicator)

Reduced motion & transparency

prefers-reduced-motion: reduce zeroes every Fuji transition duration globally. No per-component opt-out is needed. prefers-reduced-transparency: reduce flattens the glass theme to opaque surfaces (see Theming).

Contrast

Text tokens (foreground, foreground-muted, foreground-subtle) are tuned per theme to meet WCAG AA (4.5:1) against their paired surface. Glass in particular uses high-contrast white text over its translucent panels rather than the low-contrast text common in glassmorphism references.

RTL

Layout uses logical Tailwind utilities where direction matters (flex and grid gap rather than hardcoded left/right margins in most places), so most components adapt to a dir="rtl" ancestor without extra work. Directional icon affordances such as Breadcrumb and Carousel chevrons currently render left-to-right and are not yet mirrored under RTL.