Inclusive Toggle Buttons

With a tweak.


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.