Accessibility

Every BDS component wraps React Aria, which handles most keyboard and screen reader behaviour. These rules cover what is left to the component author and the product code around it. They are defaults, not a checklist; see the Guidelines overview for how to apply them. Motion-related accessibility rules — reduced motion, keyboard interactions, and revealing hover content on focus — live on the Motion page.

Semantics

• Use native HTML elements (<button>, <a>, etc.) instead of re-implementing their behaviour.
• Give icon-only buttons a descriptive aria-label; never put aria-hidden="true" on a focusable element.
• Write alt text that explains an image's purpose and content; give decorative images alt="".
• Use role="status" for routine updates; save role="alert" for urgent errors.
• Never show a status change with colour alone; add an icon, label, or underline too.

Focus and keyboard

• Style :focus-visible instead of :focus; never remove the outline without a replacement.
• Use only tabindex="0" or tabindex="-1"; never use positive values.
• Make the skip-to-content link the first Tab stop.

Forms

• Give every input a visible <label>, with type and inputmode matching the expected input.
• Never block paste on any input.
• Keep submit buttons enabled until the request starts; check for errors on submit; mark invalid fields with aria-invalid="true" and aria-describedby, and move focus to the first invalid field.

Pointer and touch

• Make hit areas at least 24x24px (44x44px touch, 40x40px desktop where possible) and never overlapping.
• Set pointer-events: none on decorative elements (glows, gradients).
• Put hover styles inside @media (hover: hover) so touch taps don't stick as hover.