Avoid icon buttons. They are only appropriate in cases where the icon is universally known and easily recognizable in context (like video player controls).
Don’t use alt text to name buttons
- These Favorite buttons all have different names relying on the image alternative text to determine the button name.
- Even if you define the alt text, images do change and many developers will default the alt attribute as the filename or try to describe the image content, rather than the intended UX of the button.
<button class="icon-button">
<img src="/assets/images/icons/icon-heart.svg"
alt="Heart">
</button>
<button class="icon-button">
<img src="/assets/images/icons/icon-star.svg"
alt="Star Icon">
</button>
<button class="icon-button">
<img src="/assets/images/icons/icon-thumbs-up.svg"
alt="icon-thumbs-up.svg">
</button>Define a name
- These Favorite buttons declare a name for each button using
aria-label="Favorite" - The images have empty
altattributes (but the attribute must still be present) aria-hiddenis used to reinforce that the images are decorative
<button class="icon-button" aria-label="Favorite">
<img src="/assets/images/icons/icon-heart.svg"
aria-hidden="true"
alt="">
</button>
<button class="icon-button" aria-label="Favorite">
<img src="/assets/images/icons/icon-star.svg"
aria-hidden="true"
alt="">
</button>
<button class="icon-button" aria-label="Favorite">
<img src="/assets/images/icons/icon-thumbs-up.svg"
aria-hidden="true"
alt="">
</button>Even better: Use your words
- You can think of words like a picture of a word that means that word
<button class="icon-button-text">
<img src="/assets/images/icons/icon-heart.svg"
aria-hidden="true"
alt="">
Favorite
</button>
<button class="icon-button-text">
<img src="/assets/images/icons/icon-star.svg"
aria-hidden="true"
alt="">
Favorite
</button>
<button class="icon-button-text">
<img src="/assets/images/icons/icon-thumbs-up.svg"
aria-hidden="true"
alt="">
Favorite
</button>