Comments on: Multi-State Buttons

By: James Edwards

James Edwards — Mon, 09 Dec 2024 11:58:42 +0000

Since the control is presented as a button, it should be possible to activate it using SPACE or ENTER. However this doesn’t work, keyboard users can only change the value using ARROW KEYS to cycle through the radio controls, but how would a user know to do that when they don’t know it’s based on radio buttons?

Additional scripting is required here to make it behave like a button.

Here’s an example of how this functionality can be done accessibly. This examples was designed to be a multi-state checkbox, using a slider as the base control, but it could be styled as a button to exactly the same effect: https://codepen.io/TPG/pen/JjamWNd

By: Zach Saucier

Zach Saucier — Fri, 06 Dec 2024 23:55:27 +0000

In reply to Ville Vanninen.

There’s not a great approach to making stacked buttons like these accessible via keyboard to my knowledge. You’d want a focused state and a selected state, which means that you’d need two buttons to be visible at the same time but then that would likely be hard to read.

It’s probably better to use a different approach, such as separate “include” and “exclude” buttons for each tag.

By: Ville Vanninen

Ville Vanninen — Fri, 06 Dec 2024 11:38:29 +0000

Any chance you could include some examples on keyboard and screen reader considerations? With advancing accessibility regulations around the world, both are becoming a pretty critical baseline for any new developer to learn.