Danielle Romo covers the HTML pattern you need when you have a wordy <label> with fancy styling for an <input type="radio">.
The trick? The ol’ <span class="hidden-visually"> that contains the label that you want to be read, and a <span aria-hidden="true"> with the visual-only content.
I think it’s interesting how often people are landing on this pattern. Have you seen Ethan’s The World-Wide Work? The drop-cap pattern he talks about here lands on essentially the same pattern.
<span aria-hidden="true">
Markup for the visual experience only,
where you can (somewhat safely) use markup
that would be crap for screen readers.
</span>
<span class="visually-hidden">
Markup for the read experience only, that
you keep very clean on purpose.
</span>That class is like this.
Yup. Most of the time, the best approach to a11y, in non-trivial visual designs, ends up being having two separate elements. And it’s kinda weird that
.visually-hiddenis essentially a hack, and that it needs to be discovered by devs. It feels to me that there should be an HTML primitive attribute to handle this, likearia-hiddenbut in reverse (maybe even call itaria-visually-hidden). Does anyone know of a good reason this isn’t in the spec?There is like:
But it’s not a super favorite:
https://meowni.ca/hidden.is.a.lie.html