tailwind/sr-only-label

Why

hidden is display: none, which removes the text from the accessibility tree as well as from the screen. In <button><svg/><span class="hidden md:inline">Menu</span></button> the button has no name at all on phones: a screen reader announces only "button", and voice control users cannot say its name.

Fix

Use sr-only for text that should be read but not seen, and md:not-sr-only where it should also be seen on wider screens: <span class="sr-only md:not-sr-only">Menu</span>. Alternatively give the control aria-label. Mark the icon itself aria-hidden="true".

Examples

<!-- bad -->
<button type="button"><svg aria-hidden="true">…</svg><span class="hidden md:inline">Menu</span></button>
<!-- good -->
<button type="button"><svg aria-hidden="true">…</svg><span class="sr-only md:not-sr-only">Menu</span></button>

Sources

• Tailwind CSS docs, display (sr-only and not-sr-only)
• WCAG 2.2, Understanding SC 4.1.2 Name, Role, Value

Read it in the terminal

npx github:dawidolko/frontend-skills explain tailwind/sr-only-label