1

I have a button that cycles through states on click: {off, red, blue, green}

Desired behavior would be:

  1. When first focusing the button it announces something like: "My button, Green"
  2. When clicking the button it announces only the state, like: "Red"

Any advice on how to achieve this?

Simon Rubin
  • 198
  • 11

1 Answers1

0

It can be difficult to make a user interface that isn't "common" to be accessible. For sighted users, is there a visual clue that the button has four states and that clicking on it, rather than performing an action, actually changes the state of the button?

This is often done with a "segmented button" that shows all the states possible and you click on the appropriate state you want. Very similar to a radio group. (The URL links to Apple's Human Interface Guidelines but the same concept can be used for web.)

You can potentially use aria-roledescription to describe how your widget will function rather than having a basic "button" role announced.

To manage what is actually announced, you could have complete control of what is spoken by the screen reader by having an aria-live region. I've posted on live regions several times recently so I'll just point to one of my previous answers (which in turn has links to a few other answers on live regions).

slugolicious
  • 15,824
  • 2
  • 29
  • 43