Danielle Romo covers the HTML pattern you need when you have a wordy
<label> with fancy styling for an
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.
You can support CSS-Tricks by being an MVP Supporter.