Accessibility A-14
Icon Buttons Need
Accessible Names
Accessible Names
Three ways to name an icon button
aria-label="Search"
aria-labelledby="visible-text-id"
<span class="sr-only">Search</span>
title="" alone doesn't count: it's not announced reliably
LaunchYourVibe A-14
The accessible name is what screen readers announce. For icon-only buttons the visual label is the icon: which is meaningless to AT. Pick the strategy that fits:
aria-label for standalone icons, visually-hidden text when you need translatable strings, aria-labelledby when a visible label exists nearby.