Switch component

Accessibility

The Switch component has been designed with accessibility in mind.

It supports keyboard navigation and includes the following properties that provide additional information to screen readers:

Name	Type	Description
ariaControls	`string`	Allows you to specify an `aria-controls` attribute to establish the relationship between the Switch and element which is controlled by it. `ariaControls` works only with a unique `id` of an element.
ariaLabel	`string`	Allows you to specify an `aria-label` attribute of the component.
ariaLabelledby	`string`	Allows you to specify an `aria-labelledby` attribute of the component. This attribute references the id(s) of element(s) that label(s) the Switch, separated by a space. The elements with those ids can be hidden, so that their text is only announced by screen readers.

While these props are optional, we recommend including them to ensure proper functionality with assistive technologies. This helps users better understand the component’s context and improves the overall experience.

Example

The following code snippet shows how to use these properties:

<Card
  title="Billing details"
  actions={
    <Switch
      checked={isExpanded}
      onChange={handleShowBillingDetails}
      ariaLabel="Toggle billing details section"
      ariaControls="BillingDetailsForm"
    />
  }
>
  {isExpanded && (
    <CardSection>
      <BillingDetailsForm id="BillingDetailsForm" />
    </CardSection>
  )}
</Card>

Using the ariaLabel prop enables screen readers to properly announce the Switch component. Alternatively, you can use the ariaLabelledby prop to reference another element that serves as a label for the Switch component.

For enhanced accessibility, it is recommended to have these label strings translated and dynamically updated based on the user’s current journey state (e.g. if a billing details section is expanded and the user is about to collapse it, the screen reader should properly announce it).

The ariaControls prop establishes a connection between the Switch and the element it controls. This relationship enables users to navigate directly from the Switch to this element, improving the overall navigation experience.