What is the best way to mark up an exclusive button group?

This content originally appeared on Lea Verou and was authored by Lea Verou

A few days ago I asked Twitter a seemingly simple question (I meant aria-pressed, not aria-selected but Twitter doesn’t allow edits…):

What is the best, most accessible way to mark up mutually exclusive button groups?
Radios + labels styled as buttons?
<button> with aria-selected="true" + JS to manage the behavior?
Something else? pic.twitter.com/T63oHzenTl
— Lea Verou (@LeaVerou) July 9, 2022

For background, I was implementing a web component for an app I’m working on at work and I was getting into some pretty weird rabbit holes with my approach of generating radios and labels.

Unsurprisingly, most people thought the best solution is radio buttons and labels. After all, it works without CSS, right? Progressive enhancement and everything?

That’s what I thought too. I had contorted my component to generate labels and radios in the Shadow DOM from buttons in the light DOM, which resulted in awkward code and awkward CSS, but I felt I was fighting the good fight and doing the best thing for accessibility.

All this was challenged when the actual accessibility expert, Léonie Watson chimed in. For those of you who don’t know her, she is pretty much the expert when it comes to web accessibility and standards. She is also visually impaired herself, giving her a firsthand experience many other a11y aficionados lack. Her recommendation was contrary to what most others were saying:

If the intent is that only one button can be activated at a time, suggest using <button> elements with aria-pressed, so the state of the active chosen button is "true" and the rest automatically set to "false".
— Léonie (@LeonieWatson) July 9, 2022

She went on to make the point that if a design looks like buttons, it should act like buttons, otherwise there are mismatched expectations and poor UX for AT users:

They have similar behaviours, yes, but your design gives them the appearance of buttons (I think?) not radio buttons, so there is a mismatch of expectations in terms of k'board interaction and shortcuts.
— Léonie (@LeonieWatson) July 9, 2022

Sure. It's generally better to use the element that matches the intent. If you use radio buttons but style them to look like buttons, it creates a mismatch that you need to polyfill with ARIA etc.
— Léonie (@LeonieWatson) July 9, 2022

In case you were wondering if state would be equally noticeable with aria-pressed and buttons, it is:

The vailable state info is the same – you either hear that one button is pressed and the others are not, or that one radio is selected and the others are not. The state/behaviour in both cases is essentially the same, but the interaction/expectations are not.
— Léonie (@LeonieWatson) July 9, 2022

And some advice on grouping:

If the grouping is also important, putting each group of buttons inside a <section> element with aria-label to give it an accessible name should do the trick. Has the added bonus of turning each section into a navigable landmark.
— Léonie (@LeonieWatson) July 9, 2022

In theory doing this in Shadow DOM and/or using ElementInternals implicit roles should be fine, though in practice we’ve had some trouble with that.

Today I posted my attempt to implement what we’ve discussed in a <button-group> component, which restarted the discussion.

Its implementation is right here if you want to improve it further! And make sure to check out the actual Twitter thread, as there is a lot of good stuff I couldn’t include in this!

This content originally appeared on Lea Verou and was authored by Lea Verou

Print Share Comment Cite Upload Translate Updates

APA

Lea Verou | Sciencx (2022-07-14T14:47:58+00:00) What is the best way to mark up an exclusive button group?. Retrieved from https://www.scien.cx/2022/07/14/what-is-the-best-way-to-mark-up-an-exclusive-button-group/

MLA

" » What is the best way to mark up an exclusive button group?." Lea Verou | Sciencx - Thursday July 14, 2022, https://www.scien.cx/2022/07/14/what-is-the-best-way-to-mark-up-an-exclusive-button-group/

HARVARD

Lea Verou | Sciencx Thursday July 14, 2022 » What is the best way to mark up an exclusive button group?., viewed ,<https://www.scien.cx/2022/07/14/what-is-the-best-way-to-mark-up-an-exclusive-button-group/>

VANCOUVER

Lea Verou | Sciencx - » What is the best way to mark up an exclusive button group?. [Internet]. [Accessed ]. Available from: https://www.scien.cx/2022/07/14/what-is-the-best-way-to-mark-up-an-exclusive-button-group/

CHICAGO

" » What is the best way to mark up an exclusive button group?." Lea Verou | Sciencx - Accessed . https://www.scien.cx/2022/07/14/what-is-the-best-way-to-mark-up-an-exclusive-button-group/

IEEE

" » What is the best way to mark up an exclusive button group?." Lea Verou | Sciencx [Online]. Available: https://www.scien.cx/2022/07/14/what-is-the-best-way-to-mark-up-an-exclusive-button-group/. [Accessed: ]

rf:citation

» What is the best way to mark up an exclusive button group? | Lea Verou | Sciencx | https://www.scien.cx/2022/07/14/what-is-the-best-way-to-mark-up-an-exclusive-button-group/ |

Please log in to upload a file.

There are no updates yet.
Click the Upload button above to add an update.

You must be logged in to translate posts. Please log in or register.

Related Posts