Loader

Updated 2026-05-19

Overview Content Accessibility Code

Accessibility

• Feedback & Errors
  - Explain what happened and how to fix it - Error messages appear near the field they relate to - Use aria-live="polite" for non-critical status updates - Use aria-live="assertive" only for critical,
  error severity must be conveyed by text + icon, not color alone
• ARIA Guidance
  - Visible Labels: Every interactive element has a visible text label. - Label Persistence: Labels remain visible when the field is focused or filled (no placeholder-only labels). - The 1:1 Rule: The a
  transient messages use role=status (polite) or role=alert (assertive) per severity
• Color & Contrast
  Check Ratio -------------- Body text (< 18pt) 4.5:1 minimum Large text (≥ 18pt or 14pt bold) 3:1 minimum UI components, icons, focus indicators 3:1 minimum Rules: - Use accessible color palettes and t
• Motion & Media
  - Motion is never the only feedback - Reduce motion or provide toggle for sensitive users - Avoid auto-play without controls - Keep animations subtle and purposeful ---
  respect prefers-reduced-motion — disable entrance pulse + slide
• Keyboard & Focus
  - All interactive elements are keyboard accessible - No keyboard traps - Logical focus order - Use Tab for forward and Shift+Tab for backward - Only focusable items that are visually visible should be
  focus must not be stolen by toasts; persistent alerts may receive focus when actionable

Cross-cutting accessibility

See the full WCAG 2.2 AA guidance for criteria that apply to every component.