WebAIM - Web Accessibility In Mind

E-mail List Archives

Re: Icon-only buttons

for

From: Mark Magennis
Date: Jan 20, 2022 8:01AM

You can incorporate the number into the icon's alt text but you don't need to. If the number follows the icon it should be okay. For example (very simplified code):

<img alt="Contributions">
<span>58</span>

This will be read by a screen reader as "Contributions" followed by "58" which seems pretty clear to me.

Or you could do something like this:

<img alt="58 Contributions">
<span aria-hidden="true">58</span>

Your choice will depend on how it sounds with different screen readers, whether you want to add any other text to make it more grammatical or clearer, whether you're okay with them being two separate elements (depending on the CSS some screen readers may need two key presses to read it), and whether the developers are happy coding it this way (for example, they may insist that they want the number first in the code order because it makes their CSS easier).

Mark