* - Buttons - Failure to Indicate State Change for Toggle Buttons

What the issue is

Toggle buttons that do not clearly communicate their state (e.g., "on" or "off") to the user can lead to confusion and difficulty in understanding the current state of the interface. This issue is often observed in buttons that change function or appearance when activated but do not provide adequate feedback to signify this change, especially to assistive technology users. An example of this issue is a "mute" button that changes function to "unmute" when activated but does not change its label or provides any other form of state indication.

Why this is important

Indicating the state of toggle buttons is crucial for user interaction, as it provides essential feedback on the result of an activation. This feedback is especially important for users with visual impairments and those who rely on assistive technologies to navigate and interact with web content. Without clear indication of a toggle button's state, users may be unaware of the current configuration or settings, leading to potential errors or confusion.

Who it affects

This issue affects:

  1. Users of screen readers and other assistive technologies who cannot visually confirm the state of a button.
  2. Users with cognitive disabilities who benefit from clear, straightforward feedback on their actions.
  3. Users who rely on consistent and predictable interactions to efficiently use a web interface.

How to remediate the issue

  1. For buttons that serve as toggles, ensure that the button's accessible name or label updates to reflect the current state (e.g., "Mute" changes to "Unmute").
  2. Use `aria-pressed` for buttons that have a pressed state to communicate the state of the button to assistive technologies accurately.
  3. Provide visual cues alongside textual changes for state changes, such as changing the button's color or adding an icon, to ensure that all users can perceive the toggle state.
  4. Test with screen readers and other assistive technologies to verify that state changes are announced and accurately represented to the user.

Guidance on indicating the state of buttons and controls can be found at WCAG Quick Reference on Name, Role, Value.

Ticket category