Accessibility

Keyboard#

Everything you can use with a mouse also works with the keyboard. The order follows the reading flow, and focus carries a clear ring in the accent.

• Move to the next control, focus is always visibleTab
• Activate a button or link, open an accordionEnter
• Use switches, choices and accordionsSpace
• Move between tabs and inside menus←→
• Close a dialog, sheet or menu, focus returnsEsc

Dialogs and sheets build on the native <dialog>. The browser keeps focus inside, Escape closes, and focus then returns to the button that opened it.

Screen readers#

• Real heading levels, lists as lists, tables as tables.
• Every form field has a label, errors are tied to their field and read out.
• Icon-only buttons carry a name, states such as open or selected sit in aria attributes.
• Hidden helper texts exist in English and German, following the language from KitProvider.

Images come from you, and so does their alternative text. Describe what is shown, and leave it empty for pure decoration.

<Hero
  variant="split"
  title="…"
  media={<img src="/team.avif" alt="Three tax advisers at the meeting table" width={1200} height={800} />}
/>

Contrast#

Text and surfaces come from tokens tuned for readable contrast in light and dark. Warning and success text have tokens of their own, text-warning-foreground and text-success-foreground, which stay readable on both backgrounds. aiw theme measures the contrast of every step of your brand color, see Theming.

Touch and small screens#

Every tap target measures at least 44 pixels. Phone, tablet and desktop are designed one by one, what is a side column on the desktop becomes an accordion, a bar or a sheet on the phone. Nothing runs off the side.

Without JavaScript#

Components render fully on the server. Without JavaScript every piece of content is readable and motion rests in its final state. The accordion builds on the native details element, it opens without script and the browser search finds text inside.

Anyone who set reduced motion sees everything right away and calm, more under Motion.

Your part#

• One h1 per page, sections below it in the right order. Components take title and eyebrow as content for that.
• Alternative text for every image with content.
• Link texts that make sense on their own.
• Your own words for buttons and hints through labels when the default does not fit.
• The language of the page in the lang attribute on the html element.

<Hero variant="with-video" title="…" video={video} labels={{ play: 'Play the tour of the practice' }} />

Check your pages#

aiw check opens every page in the browser at 390, 768 and 1440 pixels, tests with axe against WCAG 2.2 AA, looks for sideways overflow, console errors and dead links, and measures with Lighthouse.

npm run build
aiw check dist