Skip to content
Pelagic UI v0.2
العربية Source on GitHub

Accessibility

Built for everyone, verified on every build

Pelagic UI targets WCAG 2.2 level AA. Accessibility is part of the components, not a checklist you have to remember.

Color and contrast

  • All 21 themes are verified on every build: 525 automated checks for text (4.5:1) and controls/focus (3:1), WCAG 1.4.3 and 1.4.11.
  • Input and switch borders use a dedicated control color that meets 3:1 against the page.
  • A high-contrast theme, applied automatically when the OS asks for more contrast (prefers-contrast: more).
  • Windows High Contrast / forced-colors mode keeps borders, selection and focus visible.

Keyboard

  • Visible 2px focus outlines on every interactive element (they survive forced-colors mode, unlike box-shadow rings).
  • Tabs, Segmented controls and Pagination follow the WAI-ARIA keyboard patterns (arrow keys, Home, End).
  • Dialogs and Drawers trap focus, close on Escape, lock page scroll and return focus to the opener.
  • Tooltips open on focus as well as hover and can be dismissed with Escape (WCAG 1.4.13).

Screen readers

  • Every field has a programmatic label; hints and errors are linked with aria-describedby and invalid fields set aria-invalid.
  • Skeletons announce one "Loading…" status instead of many empty shapes; tables set aria-busy while loading.
  • Toasts use a polite live region; danger and warning alerts use role="alert".
  • Sortable table headers expose aria-sort; the current page and step use aria-current.

Motion, touch and language

  • prefers-reduced-motion stops shimmer and slide animations (WCAG 2.3.3); React Native follows the OS "Reduce motion" setting.
  • Small targets such as tag remove buttons and switches are at least 24×24px (WCAG 2.5.8).
  • Toast auto-dismiss pauses on hover and focus (WCAG 2.2.1).
  • Logical CSS properties throughout, so right-to-left languages mirror correctly.
Your part
Components handle semantics and behavior, but content is yours: write meaningful labels, give icon-only buttons an aria-label, and keep a logical heading order. Found an accessibility bug? Please open an issue on GitHub.

Search Pelagic UI