Inclusive Toggle Buttons

With a tweak.

Extra
December 20, 2019

The book “Inclusive Components” by Heydon Pickering has finally arrived and I immediately started reading. If you do not have a copy yet, you should buy one asap, it’s worth every penny.

Chapter One is about Toggle Buttons. Heydon ends the chapter with switches that need “Auxiliary Labeling”. For those, he uses aria-labelled-by to tie a label to a button. Made me wonder, why not just use good ol’ <label> to do the job?

Using `<label>` for auxiliary labeling

<!-- Original implementation by Heydon Pickering -->
<span id="notify-email">Notify by email</span>
<button role="switch" aria-checked="true" aria-labelledby="notify-email"><span>on</span> <span>off</span></button>
<!-- Potential tweak, needs testing -->
<label for="notify-email">Notify by email</label>
<button role="switch" aria-checked="true" id="notify-email"><span>on</span> <span>off</span></button>

This comes with a bonus, clicking the label now also acts as a trigger for the button. Browsers are fine with this, but I haven’t been able to test screen readers yet. In general, am I missing something here?

To see Heydon’s full example with my tweak added, head over to CodePen.

Showcase

Visit CodePen to see this example in action.

Comments

Matthias Zöchling wrote on January 3, 2020 at 13:29

Looking for #a11y research on <label for="button">. Online search takes me to “labeling buttons”, which is not what I want. I’ve only been able to test Safari+VoiceOver and Chrome+ChromeVox, looks promising. /cc @mmatuzo @paciellogroup

Adrian Roselli wrote on January 4, 2020 at 02:46

In reply to: @CSSence.

Much more context needed. Are you trying to apply <label> to a <button> element? What is “auxiliary labeling”?

Matthias Zöchling wrote on January 4, 2020 at 08:10

In reply to: @aardrian.

Exactly. Based on what @heydonworks did in the new “Inclusive Components” book, where he uses aria-labelledby to add a description to Toggle Buttons, I tried the same but used a label for the button, as shown under cssence.com/2019/inclusive-toggle-buttons

Matthias Zöchling wrote on January 4, 2020 at 08:54

In reply to: @aardrian.

And here is the direct link to the working example on CodePen: codepen.io/cssence/pen/KKwWeze
W3C HTML spec considers <button> and <input type="button"> as labelable elements, hence the cross-browser-ness. A niche thing nonetheless, usually the button text is the label.

Adrian Roselli wrote on January 4, 2020 at 13:27

In reply to: @CSSence.

If you do not know which provides the accessible name then you will have to test.

Check what is exposed in the browser so you know which wins in which UA.

TalkBack and VoiceOver warrant a test as well.

Also, validate the page, just to be confirm it is cool.

Get involved

Feel free to share this article. But keep in mind, it was published more than five years ago, so comments are closed.

Using <label> for auxiliary labeling

Showcase

Using `<label>` for auxiliary labeling