Toggle switch

Synonyms: Toggle button

See also: Button, check box, menu button, switch

Toggle switches are used to select the “pressed” or “not pressed” states (see DIN EN ISO 9241-161: 8.48).

A toggle switch consists of a text or graphic label and a visual indicator in order to identify the toggle switch as such. A border is usually used as a visual indicator for toggle switches. The toggle switch also has a visual indicator of the state, such as a different background color.

The requirements concerning buttons are described in the “buttons” section. Here, only the additional requirements are described which result from the fact that it is a button that is able to have two states.

The requirements concerning buttons are described in the “buttons” section. Here, only the additional requirements are described which result from the fact that it is a button that is able to have two states.

The requirements concerning buttons are described in the “buttons” section. Here, only the additional requirements are described which result from the fact that it is a button that is able to have two states.

• JAWS: [label] toggle button [ not pressed | pressed] [note on operation with the Space bar]
• NVDA: [label] toggle button [ not pressed | pressed]
• Windows Narrator: [label] button [off | on]

• JAWS: [label] button [collapsed | expanded] [note on operation with the Enter key]
• NVDA: [label] button [collapsed | expanded]
• Windows Narrator: [label] button [collapsed | expanded]

There is no element for toggle switches in HTML. Instead of this, buttonsthat have alternative labeling (e.g. “Select” and/or “Cancel selection”), check boxes or the ARIA toggle switch can be used. Toggle switches which have the purpose of showing and hiding areas should be marked with <details> and <summary> ( 4.11.1 The details element - HTML Standard (whatwg.org) (External Link), 4.11.2 The summary element - HTML Standard (whatwg.org) (External Link)). According to the HTML specification, the <summary> element may contain links, headings, input fields and many other elements – it is important to remember, however, that all the elements which are located within <summary> are imperceptible and cannot be operated with the screen reader, as the <summary> element is communicated to the Accessibility API as a button. Therefore, the <summary> element should only contain a concise and expressive label in text form.

With toggle switches, the following should be taken into account:

• with a button (e.g. <button> or role=button), the role is communicated with the aria-pressed attribute.
• toggle switches that have the purpose of showing and hiding areas can instead be marked with the aria-expanded attribute. In this case, aria-controls can be used to make reference to the ID of the area that is shown or hidden.
• The status (aria-pressed=true|false or aria-expanded=true|false) must be updated during operation.
• The labeling can take place using text content or aria-labelledby.
• The toggle switch can be marked as disabled with aria-disabled.
• A toggle switch cannot be marked as read-only with aria-readonly or as a required field with aria-required because, in contrast to a switch, it is not considered to be a form element.
• The presentation of the toggle switch should be verified in Windows High Contrast mode. In this respect, the toggle switch should have a border and the visual indicator for the status should not just be conveyed with color.
• The visible toggle switch and the programmatically focused element should have the same position and size.

Further information: aria-pressed state - Accessible Rich Internet Applications (WAI-ARIA) 1.2 (w3.org) (External Link), aria-expanded state - Accessible Rich Internet Applications (WAI-ARIA) 1.2 (w3.org) (External Link), Button Examples | APG | WAI | W3C, Disclosure (Show/Hide) Pattern | APG | WAI | W3C

Information about this article

Date:

6.12.2024

License:

CC-BY-SA 4.0

Version:

1.0

You are welcome to send feedback by email about our handout!