Agriculture Design System
Design System for import and export services

Button

A button communicates an action to a user and indicates what will happen next.

View in FigmaView in StorybookView in Github
import { ... } from '@ag.ds-next/react/button';

Learn more about how to meet WCAG success criteria when implementing buttons. This makes them accessible and inclusive for users of all abilities and situations.

The button component passed accessibility testing in 2022.

ARIA usage for enhanced accessibility

Requirements

  • Include aria-label or aria-describedby when visible text alone is insufficient – for example, ‘Edit’ fits into a table, but ‘Edit record 2’ doesn’t.
  • Use aria-expanded for buttons that control expandable content (true/false).
  • Use aria-haspopup for buttons that trigger menus or dialogues.
  • Use aria-pressed for toggle buttons (true/false/mixed).
  • Use aria-disabled="true" for buttons that appear disabled, but are still functional.
  • Update ARIA attributes when the button state changes.

Benefits

  • Communicates context to assistive technology users.
  • Clarifies the current state of interactive elements.
  • Improves the navigational experience for screen reader users.
  • Provides feedback on the results of user interactions.
  • Ensures all users have equal access to functionality.

WCAG references

Button label in accessible name

Requirements

  • Visible button text must match the beginning of the accessible name. If you want to avoid horizontal scroll in a table, you may not have space to include a noun/verb pair. For example, the visible button label might read ‘Edit’, but the accessible name is ’Edit record 2’.

Benefits

  • Screen reader users hear the action that will occur when the button is used.
  • People who use speech recognition can activate the button by saying the text they see on the button.

WCAG references

Clear and descriptive button labels

Requirements

  • Use clear, concise button labels that describe the action. We recommend using verb and noun pairs – for example: ‘Save changes’, ‘Submit application’, ‘Delete record’.
  • Button labels are unique when multiple buttons appear on the same page.
  • When icons are used alone, ensure the button’s accessible name is a clear, sensible interpretation of that icon’s action.

Benefits

  • Improves understanding of available actions.
  • Makes navigation more efficient for screen reader users.
  • Supports users with cognitive disabilities through clear labelling.
  • Helps users predict outcomes of interactions.

WCAG references

Semantic markup

Requirements

  • Code is marked up in the most semantic way possible.
  • Use <Button> to trigger an action, such as opening a dialogue or submitting a form.
  • Use <ButtonLink> to navigate to a new location, such as a Sign in page.
  • All buttons have accessible names via the button text, aria-label, or aria-describedby.

Benefits

  • Ensures proper button functionality across different assistive devices.
  • Ensures built-in keyboard accessibility without additional code.
  • Simplifies development by leveraging built-in browser behaviours.
  • Makes maintenance easier by using standard patterns.
  • Improves compatibility across different assistive technologies.

WCAG references

Edit this page