Accessibility

Nesra UI’s Button uses Base UI for button semantics and interaction. Text renders the HTML element selected through as. The application supplies meaningful content, labels, page structure, and end-to-end checks.

Keyboard interaction

Button can be reached with Tab and activated with Enter or Space. disabled and loading prevent activation; loading also sets aria-busy. Keep buttons for actions and native links for navigation, even when a Button uses the visual link variant.

Test the entire task with a keyboard, including where focus moves after an action. For more complex widgets, follow the WAI-ARIA Authoring Practices Guide rather than assuming every key works like a button.

Focus

Button shows a focus-visible state for keyboard focus. Preserve it when extending styles with className. In the application, check that focus is visible, follows the expected order, and lands somewhere useful after an action. For dialogs and other overlays, also check initial focus and focus restoration when they close.

See WCAG focus visible and focus appearance.

Accessible names

Prefer visible labels that describe the action. Button hides its decorative startIcon, endIcon, and loading icon from assistive technology. Icon-only buttons still need a name:

import { Button } from "@nesra/ui/button";

export function CloseButton() {
  return (
    <Button aria-label="Close dialog" size="icon-md">
      ×
    </Button>
  );
}

Keep aria-label on an icon-only Button while it is loading: the icon is replaced by a loader, and there is no visible text to name the control. See WAI-ARIA naming guidance for other naming methods.

Content semantics

Text’s variant controls appearance; its as prop controls the HTML element. Choose heading levels from the page outline, regardless of their visual size. If text is truncated, make essential content available in full elsewhere. See Text for rendered roles and examples.

Color and contrast

Check text against its actual background, including when tokens are overridden or placed on a new surface. Also check the visible parts of controls and their focus indicators. Follow WCAG guidance for text contrast, non-text contrast, and use of color. A status needs a text or shape cue in addition to color.

Testing

Nesra UI tests Button activation, disabled and loading behavior, accessible names, and a representative automated accessibility scan. Those checks do not cover an application’s content, custom colors, or complete workflow.

When using a component, verify its accessible name and state, complete the task with a keyboard, inspect focus and contrast in the browser, and test critical flows with assistive technology. See W3C’s evaluation guide for methods and tools.