Accessibility

What buttery's components do for keyboard, screen reader and low-vision users, and what's left to you.

Every buttery component works with a keyboard and a screen reader, keeps text readable, and gives every target room to press. This guide lists what that covers and the few things an app still has to do itself.

What the components do

• Keyboard

  Every control can be reached with Tab and used with the keys people expect. Menus, dialogs and selects follow Radix's patterns, and each component page has a keyboard table.

• Focus

  :focus-visible shows a focus ring in the accent color. Focus moves into a dialog or panel as it opens, and back to what opened it as it closes.

• Names

  Icon-only controls require a label, and dialogs warn in development when they have no name.

• Contrast

  Text and icons meet WCAG AA on the surfaces they're meant for, in light and dark.

• Targets

  Every press target is at least 24 by 24, and standalone buttons are at least 28 tall.

• Reduced motion and high contrast

  Everything follows the reduced motion setting. With Windows' high contrast on, switches and checkboxes draw themselves in system colors, so their state stays visible.

What's left to you

1. Structure every page

   Give every page one h1 and headings in order, and every form field a label.

2. Name things plainly

   Write link and button text that makes sense on its own: "Download the invoice", not "Click here". Give images that carry meaning alternative text, and an icon that stands alone a label.

3. Keep focus on a pressed button

   Don't disable a button the person just pressed: use aria-disabled, which keeps focus on it.

4. Check by hand

   Check with a keyboard and a screen reader as you build. expectButtery runs axe's rules on every check, but no automated check finds everything.