E-mail List Archives

Search E-mail List Archives for

Number of posts in this thread: 22 (In chronological order)

From: Michael H
Date: Wed, Jan 19 2022 2:56PM
Subject: Icon-only buttons
No previous message | Next message →

Hello,

Quick question about interactive icon controls.

Are there any guidelines (AA and/or AAA?) about icons?

I quickly get lost in the spec, and was curious if someone could point me
in the right direction.

I'm curious to know what the a11y guidelines are for icons and descriptive
text.

Thank you!

From: Patrick H. Lauke
Date: Wed, Jan 19 2022 3:16PM
Subject: Re: Icon-only buttons
← Previous message | Next message →

On 19/01/2022 21:56, Michael H wrote:
> Hello,
>
> Quick question about interactive icon controls.
>
> Are there any guidelines (AA and/or AAA?) about icons?
>
> I quickly get lost in the spec, and was curious if someone could point me
> in the right direction.
>
> I'm curious to know what the a11y guidelines are for icons and descriptive
> text.

They need a text alternative / the button needs an accessible name, but
beyond that there's no additional requirements (I'm guessing you were
wondering if there's any normative requirement to have visible
descriptions, tooltips, or similar to disambiguate them and make them
understandable ... so no, there's no SC for that).

P
--
Patrick H. Lauke

https://www.splintered.co.uk/ | https://github.com/patrickhlauke
https://flickr.com/photos/redux/ | https://www.deviantart.com/redux
twitter: @patrick_h_lauke | skype: patrick_h_lauke

From: Michael H
Date: Wed, Jan 19 2022 10:01PM
Subject: Re: Icon-only buttons
← Previous message | Next message →

Thank you for the help/reply Patrick!

> I'm guessing you were wondering if there's any normative requirement to
have visible descriptions, tooltips, or similar to disambiguate them and
make them understandable

Exactly! My team was wondering if having icon-only (with accessible text)
buttons would break any AA standards/rules.

Thanks again for your help!



On Wed, Jan 19, 2022 at 2:16 PM Patrick H. Lauke < = EMAIL ADDRESS REMOVED = >
wrote:

> On 19/01/2022 21:56, Michael H wrote:
> > Hello,
> >
> > Quick question about interactive icon controls.
> >
> > Are there any guidelines (AA and/or AAA?) about icons?
> >
> > I quickly get lost in the spec, and was curious if someone could point me
> > in the right direction.
> >
> > I'm curious to know what the a11y guidelines are for icons and
> descriptive
> > text.
>
> They need a text alternative / the button needs an accessible name, but
> beyond that there's no additional requirements (I'm guessing you were
> wondering if there's any normative requirement to have visible
> descriptions, tooltips, or similar to disambiguate them and make them
> understandable ... so no, there's no SC for that).
>
> P
> --
> Patrick H. Lauke
>
> https://www.splintered.co.uk/ | https://github.com/patrickhlauke
> https://flickr.com/photos/redux/ | https://www.deviantart.com/redux
> twitter: @patrick_h_lauke | skype: patrick_h_lauke
> > > > >

From: Mark Magennis
Date: Thu, Jan 20 2022 1:02AM
Subject: Re: Icon-only buttons
← Previous message | Next message →

Bear in mind there's also WAG SC 1.4.11 Non-text Contrast which requires that icon buttons have a contrast of at least 3:1 against adjacent colors.

From: Birkir R. Gunnarsson
Date: Thu, Jan 20 2022 3:41AM
Subject: Re: Icon-only buttons
← Previous message | Next message →

1. Make sure they are presented as buttons (use a <button> element, an
element that has an implicit role of button or add the role="button"
attribute).
2. Make sure they have an accessible name, best to use the aria-label
attribute (or the title attribute). The accessible name should
describe the function of the button, not the appearance of the icon
(e.g. "close" instead of "x")
3. Make sure the icon meets the 3:1 color contrast with the background
4. If not using a proper HTML button element, make sure to code your
element to funcion like a button (with keyboard), see the button entry
in section 3 of the ARIA Authoring Practices spec

e.g.
<button aria-label="close">
<svg with the icon</svg>
</button>


On 1/20/22, Mark Magennis < = EMAIL ADDRESS REMOVED = > wrote:
> Bear in mind there's also WAG SC 1.4.11 Non-text Contrast which requires
> that icon buttons have a contrast of at least 3:1 against adjacent colors.
>
>

From: Geethavani.Shamanna
Date: Thu, Jan 20 2022 6:53AM
Subject: Re: Icon-only buttons
← Previous message | Next message →

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

From: Tom Livingston
Date: Thu, Jan 20 2022 7:00AM
Subject: Re: Icon-only buttons
← Previous message | Next message →

On Thu, Jan 20, 2022 at 8:53 AM Geethavani.Shamanna
< = EMAIL ADDRESS 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

From: Mark Magennis
Date: Thu, Jan 20 2022 8:01AM
Subject: Re: Icon-only buttons
← Previous message | Next message →

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

From: Geethavani.Shamanna
Date: Thu, Jan 20 2022 9:50AM
Subject: Re: Icon-only buttons
← Previous message | Next message →

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

From: Mark Magennis
Date: Thu, Jan 20 2022 10:02AM
Subject: Re: Icon-only buttons
← Previous message | Next message →

No. The script that displays the new number would also have to update the alt text.

From: Michael H
Date: Thu, Jan 20 2022 11:40AM
Subject: Re: Icon-only buttons
← Previous message | Next message →

Interesting conversations! Very helpful!

Would it be wise to develop the icon buttons to scale with the text size
scale for low vision users?
https://www.w3.org/WAI/WCAG21/Understanding/resize-text.html

I really appreciate all the informative replies! Thank you everyone.

I'm going to run this by my teammates and may be back with a few more
questions.

From: Alan Zaitchik
Date: Thu, Jan 20 2022 8:28PM
Subject: Re: Icon-only buttons
← Previous message | Next message →

Geetha,
I don't know if you care to notify the user of a change the user himself/herself might make by liking or commenting or whatever, but if so you could use aria-labelledby and point to a counter that is in a “polite” live area, visible or off-screen. So if the user clicks a like icon and changes the counter, from 100 to 101, say, they would hear that there are now 101 likes as a sort of confirmation message. I think it's always good to communicate status or result of a button action in a case like this. There is no detectable feedback from just changing ALT text.
The above suggestion would not be good if the count can be changed asynchronously by external events not triggered by the user, and it would not even be relevant if the counts were just set on page load and not subject to change at all.
But even in those cases, I might still prefer to use aria-labelledby ( without the aria-live.) Although I won't try to strongly defend the following “feeling”, I think it's a better coding practice to update a text node than an an attribute like ALT. This consideration would apply even if the icons are read only for the use case you have in mind.

A

> On Jan 20, 2022, at 08:53, Geethavani.Shamanna < = EMAIL ADDRESS 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

From: Priti Rohra
Date: Fri, Jan 21 2022 12:44AM
Subject: Re: Icon-only buttons
← Previous message | Next message →

To add to the helpful list of practices for icon buttons shared by
Birkir earlier, will like to add couple of more points:
- Make sure that the focus indicator is visible for the icon buttons
that are not structured using native HTML button or input elements.
- Make sure the touch target size for the interactive icons is 44/44
CSS pixels. Even though this is required at WCAG 2.1 at Level AAA
(2.5.5) it is recommended to adhere to this requirement as it is
pretty helpful for mobile users.
And yes its good to have scalable icons and thats why Birkir
recommended icons created as <svg>.

Always BPositive!
Priti Rohra


On 1/21/22, Alan Zaitchik < = EMAIL ADDRESS REMOVED = > wrote:
> Geetha,
> I don't know if you care to notify the user of a change the user
> himself/herself might make by liking or commenting or whatever, but if so
> you could use aria-labelledby and point to a counter that is in a “polite”
> live area, visible or off-screen. So if the user clicks a like icon and
> changes the counter, from 100 to 101, say, they would hear that there are
> now 101 likes as a sort of confirmation message. I think it's always good to
> communicate status or result of a button action in a case like this. There
> is no detectable feedback from just changing ALT text.
> The above suggestion would not be good if the count can be changed
> asynchronously by external events not triggered by the user, and it would
> not even be relevant if the counts were just set on page load and not
> subject to change at all.
> But even in those cases, I might still prefer to use aria-labelledby (
> without the aria-live.) Although I won't try to strongly defend the
> following “feeling”, I think it's a better coding practice to update a text
> node than an an attribute like ALT. This consideration would apply even if
> the icons are read only for the use case you have in mind.
>
> A
>
>> On Jan 20, 2022, at 08:53, Geethavani.Shamanna
>> < = EMAIL ADDRESS 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
> > > > >

From: Pat Reynolds
Date: Fri, Jan 21 2022 3:40AM
Subject: Re: Icon-only buttons
← Previous message | Next message →

Thanks for asking the question, Michael.

This discussion has prompted me to wonder if this is a good solution to the
issue of how to inform users that a link opens in a new page? I personally
like the "international" icon that informs sighted users that a link will
open in a new tab (I have some sight, hand issues, and dyslexia). I wonder
if the symbol was on a button (also linking to the destination) this would
be acceptable.

With best wishes,

Pat
*- -*

*Dr Pat Reynolds*
Executive Director


A Charitable Incorporated Organisation registered in England and Wales,
number 1167484
VAT registration: 233 0105 70

*Join us on social:*
[image: : https://www.facebook.com/FreeUKGEN]
https://www.facebook.com/FreeUKGEN <https://twitter.com/FreeUKGen>
<https://www.instagram.com/freeukgenealogy/>
<https://www.pinterest.co.uk/FreeUKGenealogy/>
Please read our *Privacy Notice*
<https://www.freeukgenealogy.org.uk/files/Documents/Privacy-Notice.pdf> for
information on how we will protect and use your data.

<https://www.easyfundraising.org.uk/causes/freeukgenealogy/?utm_campaign=raise-more>

+44 1723 362616 +44 7943 145387
Westwood House,Westwood, Scarborough YO11 2JD, UK


On Thu, 20 Jan 2022 at 18:41, Michael H < = EMAIL ADDRESS REMOVED = > wrote:

> Interesting conversations! Very helpful!
>
> Would it be wise to develop the icon buttons to scale with the text size
> scale for low vision users?
> https://www.w3.org/WAI/WCAG21/Understanding/resize-text.html
>
> I really appreciate all the informative replies! Thank you everyone.
>
> I'm going to run this by my teammates and may be back with a few more
> questions.
> > > > >

From: Mark Magennis
Date: Fri, Jan 21 2022 4:08AM
Subject: Re: Icon-only buttons
← Previous message | Next message →

Pat,

Having a "link opens in new tab" symbol on a button sounds illogical. If it opens a new page then logically it is a link, not a button, and should be exposed as a link.

As far as I can tell, this is the view of most accessibility specialists - that role should not follow behavior, i.e. if it behaves like a button make it a button and if it behaves like a link make it a link. But some people disagree and think that role should follow appearance. i.e. if it looks like a button make it a button and if it looks like a link make it a link. Considering the experience of screen reader users, both views have their merits.

Role follows behavior means screen reader users can better guess the behavior from hearing the role. Role follows appearance means that there is less of a disconnect between the appearance and the announced role for partially sighted screen reader users, and also that it is less confusing when discussing the UI with sighted colleagues or support personnel where you might get an exchange like "try pressing the Edit button", "I can't find an edit button, there isn't one. Oh wait, there's an edit link, is that what you mean?".

As I said, I think most accessibility folks are in the role follows behavior camp but I don't have enough experience of having asked users themselves what they prefer to be able to speak for users (apart from those who are also accessibility specialists and therefore advanced users). Which is a shame because they are the most important judges of the best approach.

Mark

From: Pat Reynolds
Date: Fri, Jan 21 2022 4:17AM
Subject: Re: Icon-only buttons
← Previous message | Next message →

Hi Mark,

For clarification, there would be two links. E.g. if the text / icon is:
"For more information, please visit the website of the Information
Commissioner [symbol of arrow popping out of a box]"
Then the words 'the website of the Information Commissioner would be linked
to https://ico.org.uk and the symbol would be on a button, also linked to
https://ico.org.uk/, and the button would also have the ialt text that it
is a link to an external site.

How this would appear at the moment (which is not as good, in my opinions
is:
"For more information, please visit the website of the Information
Commissioner (link opens in a new tab)" with the words 'the website of the
Information Commissioner would be linked to https://ico.org.uk

But maybe in reading order the button needs to be first, and include the
url of the website, so that the person using a screen reader hears the
relevant information directly after "For more information, please visit".

With thanks,

Pat
<https://ico.org.uk/>

*- -*

*Dr Pat Reynolds*
Executive Director


A Charitable Incorporated Organisation registered in England and Wales,
number 1167484
VAT registration: 233 0105 70

*Join us on social:*
[image: : https://www.facebook.com/FreeUKGEN]
https://www.facebook.com/FreeUKGEN <https://twitter.com/FreeUKGen>
<https://www.instagram.com/freeukgenealogy/>
<https://www.pinterest.co.uk/FreeUKGenealogy/>
Please read our *Privacy Notice*
<https://www.freeukgenealogy.org.uk/files/Documents/Privacy-Notice.pdf> for
information on how we will protect and use your data.

<https://www.easyfundraising.org.uk/causes/freeukgenealogy/?utm_campaign=raise-more>

+44 1723 362616 +44 7943 145387
Westwood House,Westwood, Scarborough YO11 2JD, UK


On Fri, 21 Jan 2022 at 11:08, Mark Magennis < = EMAIL ADDRESS REMOVED = >
wrote:

> Pat,
>
> Having a "link opens in new tab" symbol on a button sounds illogical. If
> it opens a new page then logically it is a link, not a button, and should
> be exposed as a link.
>
> As far as I can tell, this is the view of most accessibility specialists -
> that role should not follow behavior, i.e. if it behaves like a button make
> it a button and if it behaves like a link make it a link. But some people
> disagree and think that role should follow appearance. i.e. if it looks
> like a button make it a button and if it looks like a link make it a link.
> Considering the experience of screen reader users, both views have their
> merits.
>
> Role follows behavior means screen reader users can better guess the
> behavior from hearing the role. Role follows appearance means that there is
> less of a disconnect between the appearance and the announced role for
> partially sighted screen reader users, and also that it is less confusing
> when discussing the UI with sighted colleagues or support personnel where
> you might get an exchange like "try pressing the Edit button", "I can't
> find an edit button, there isn't one. Oh wait, there's an edit link, is
> that what you mean?".
>
> As I said, I think most accessibility folks are in the role follows
> behavior camp but I don't have enough experience of having asked users
> themselves what they prefer to be able to speak for users (apart from those
> who are also accessibility specialists and therefore advanced users). Which
> is a shame because they are the most important judges of the best approach.
>
> Mark
>
>

From: Mark Magennis
Date: Fri, Jan 21 2022 4:37AM
Subject: Re: Icon-only buttons
← Previous message | Next message →

I don't think you need the button Pat. You just need to include the icon within the link. Something like this:

<p>For more information, please visit the <a href="xxx">website of the Information Commissioner <img alt="opens in a new tab"></a>.</p>

A screen reader will read this as "link website of the Information Commissioner opens in a new tab".

Mark

From: David Farough
Date: Fri, Jan 21 2022 6:52AM
Subject: Re: Icon-only buttons
← Previous message | Next message →

Another point is to insure that the icon would be recognized by most people and that the alt text is an accurate description of the icon .
At least this way a speech dictation user would be able to accurately tell the software what to click on.

From: Mark Magennis
Date: Fri, Jan 21 2022 7:09AM
Subject: Re: Icon-only buttons
← Previous message | Next message →

You raise a good point David - ensuring the icon is recognizable. If you have a printer icon button with the name "print", a voice activation user can say "click print". But they will need to guess that its name is "print". I would say it's guessable that a print icon's name is "print" so it is okay to have that as an icon-only button with no visible text. But how many icons are there with names that are guessable, or guessable at two or three attempts? Do you think the following are guessable?

X icon - Close
Pencil icon - Edit
Printer icon - Print
Trash can icon - Delete or Remove
Square with arrow pointing out of the top right corner - Opens in a new tab
Loudspeaker - Volume or Mute
Lower case i in a circle - Information
Question mark - Help

I would say most of these are guessable, but are there that many more? Specific domains may have their own sets of standard icons that are guessable I suppose.

Mark

From: Michael H
Date: Fri, Jan 21 2022 7:21AM
Subject: Re: Icon-only buttons
← Previous message | Next message →

Thank you everyone, this thread is very informative and helpful!!!

From: Pat Reynolds
Date: Mon, Jan 24 2022 4:57AM
Subject: Re: Icon-only buttons
← Previous message | Next message →

*- -*

*Dr Pat Reynolds*
Executive Director


A Charitable Incorporated Organisation registered in England and Wales,
number 1167484
VAT registration: 233 0105 70

*Join us on social:*
[image: : https://www.facebook.com/FreeUKGEN]
https://www.facebook.com/FreeUKGEN <https://twitter.com/FreeUKGen>
<https://www.instagram.com/freeukgenealogy/>
<https://www.pinterest.co.uk/FreeUKGenealogy/>
Please read our *Privacy Notice*
<https://www.freeukgenealogy.org.uk/files/Documents/Privacy-Notice.pdf> for
information on how we will protect and use your data.

<https://www.easyfundraising.org.uk/causes/freeukgenealogy/?utm_campaign=raise-more>

+44 1723 362616 +44 7943 145387
Westwood House,Westwood, Scarborough YO11 2JD, UK


Many thanks, Marik - that's very helpful.

On Fri, 21 Jan 2022 at 11:37, Mark Magennis < = EMAIL ADDRESS REMOVED = >
wrote:

> I don't think you need the button Pat. You just need to include the icon
> within the link. Something like this:
>
> <p>For more information, please visit the <a href="xxx">website of the
> Information Commissioner <img alt="opens in a new tab"></a>.</p>
>
> A screen reader will read this as "link website of the Information
> Commissioner opens in a new tab".
>
> Mark
>
> sages to = EMAIL ADDRESS REMOVED =
>

From: Geethavani.Shamanna
Date: Mon, Jan 24 2022 7:55AM
Subject: Re: Icon-only buttons
← Previous message | No next message

Thanks Alan for these useful suggestions.

More than the modified count being announced immediately, the reason I want the alt text to reflect the count is to enable users, when viewing the page, to right away have access to the count on encountering the image. For example, if there are 55 comments, a user gets that information without having to arrow up or down to find out the exact number of comments.

Geetha