WebAIM - Web Accessibility In Mind

E-mail List Archives

Re: Icon-only buttons

for

From: Geethavani.Shamanna
Date: Jan 20, 2022 9:50AM


Thanks Mark, both solutions sound good.

When a new contribution is added and the number changes from 58 to 59, will the number in the alt text get updated automatically?

Geetha
-----Original Message-----
From: WebAIM-Forum < <EMAIL REMOVED> > On Behalf Of Mark Magennis
Sent: 20 January 2022 15:01
To: WebAIM Discussion List < <EMAIL REMOVED> >
Subject: Re: [WebAIM] [EXTERNAL] Re: Icon-only buttons

CAUTION: This mail comes from outside the University. Please consider this before opening attachments, clicking links, or acting on the content.

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

-----Original Message-----
From: WebAIM-Forum < <EMAIL REMOVED> > On Behalf Of Tom Livingston
Sent: 20 January 2022 14:00
To: WebAIM Discussion List < <EMAIL REMOVED> >
Subject: Re: [WebAIM] [EXTERNAL] Re: Icon-only buttons

On Thu, Jan 20, 2022 at 8:53 AM Geethavani.Shamanna < <EMAIL REMOVED> > wrote:
>
> Interesting. Should icons be presented as buttons even if they are not interactive?
>
> Also, I am currently testing a web page that contains icons titled 'Contribution-Count-Icon', 'Like-Count-Icon', and so on. The developers have conveniently used the original name of the icon in the alt text. Above each of these icons there are numbers such as 0, 58, and so on, based on the number of likes or comments. It would be ideal if the alt text for these icons can also reflect this number. For example, 'Number of likes: 58'. However, since the number is dynamic, what is the best way to incorporate this into the alt text? Finally, should these icons be presented as buttons, although they cannot be clicked on?
>
> Many thanks.
> Geetha
>

There are others that are far more knowledgeable than I on this, like Patrick, but I don't see why you couldn't update the alt text in the code the same way you are updating the text on the page. Also, I would think you would not use a button element if these are not interactive.



--

Tom Livingston | Senior Front End Developer | Media Logic |
ph: 518.456.3015x231 | fx: 518.456.4279 | medialogic.com


#663399