Skip to content
oks-ui

Accessibility

Every oks-ui component ships with keyboard support, a visible focus indicator, correct ARIA state and reduced-motion handling. Accessible names for your content, heading order and contrast on your own theme stay your job.

LiveOverview

Click here, then press Tab. Focus is always visible.

What every component ships with

  • Keyboard operation — arrow-key navigation for composite widgets (Tabs, Calendar, SegmentedControl, Dropdown, the command palette), roving tabindex, Home/End in the lists that need them, and Escape to dismiss overlays. Nav is a real <nav> of links, so you move through it with Tab.
  • Visible focus — most interactive components draw a :focus-visible ring that shows for keyboard users, and Tabs keep the browser's own focus outline. The command palette's search field has no ring of its own; the highlighted result shows where you are.
  • Correct roles and state — aria-expanded, aria-current, aria-selected, aria-sort, role="dialog", and so on, wired to the component's actual state.
  • Focus management in overlays — Modal and Drawer trap focus, restore it to the trigger on close, and lock body scroll.
  • Live regions — Toast, Board and Message (as a live log) announce changes through aria-live. The command palette uses the combobox pattern instead, with aria-activedescendant pointing at the highlighted result.
  • Reduced motion — every animation respects prefers-reduced-motion.
  • Direction, not colour alone — Stat deltas, chart series, and status chips carry text or a glyph, not just a hue.

What stays your job

  • Accessible names for your content. A Table needs an aria-label; an icon-only Button needs one; an image needs alt. The component can't know what its data means.
  • Heading order. Components render the heading level you ask for (as="h2"); getting the document outline right is up to the page.
  • Contrast on your theme. The defaults are checked, but once you override the palette, re-check your brand colours against their foregrounds — see Theme to your brand.
  • Colour meaning. If you use color props to convey status, make sure the surrounding text says the same thing.

Testing

Run axe (or Lighthouse) on your composed screens, tab through every flow with the mouse unplugged, and check one pass with a screen reader. The components give you a clean baseline; these tests catch what you added on top.