Styling Complex Labels

Avatar of Chris Coyier
Chris Coyier on

Find and fix web accessibility issues with ease using axe DevTools Pro. Try for free!

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 class="visually-hidden">
  Markup for the read experience only, that
  you keep very clean on purpose.

That class is like this.

Direct Link →