Styling Complex Labels
Danielle Romo covers the HTML pattern you need when you have a wordy with fancy styling for an .
The trick? The ol’ that contains the label that you want to be read, and a with the visual-only content.
CodePen Embed Fallback
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.
Direct Link to Article — Permalink
The post Styling Complex Labels appeared first on CSS-Tricks.
You can support CSS-Tricks by being an MVP Supporter.
