E-mail List Archives

You are here: Home > Community > E-mail List Archives > View Thread

Thread: Guidelines on making icons accessible?

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

From: Preast, Vanessa
Date: Sun, Jul 23 2017 2:15PM
Subject: Guidelines on making icons accessible?
No previous message | Next message →

I'm reviewing a website that is using tags to add icons for social media. The SiteImprove plugin says "Please note that even though 'i' tags are commonly used for inserting icons, this is considered bad practice." No other checkers I've used has flagged the "i" issue specifically. However, the other checkers have noted that these icons are empty links. Screenreaders just say "link" for those items.

I'm having difficulty finding good information about the accessibility of adding icons with . Is it possible to add icons using the tags in an accessible way? How could the webmaster fix this issue? I assume that the webmaster is using something like Font Awesome or Bootstrap, but I know very little about how those work.

Any resources or advice would be helpful. I'll add the code in question below.

Thanks,
Vanessa

<div class="textwidget"><a href="[url redacted]" target="_blank">




</a>
<a href="[url redacted]" target="_blank">




</a>
<a href="[url redacted]" target="_blank">




</a>
<a href="[url redacted]" target="_blank">




</a></div>

From: Chagnon | PubCom
Date: Sun, Jul 23 2017 3:23PM
Subject: Re: Guidelines on making icons accessible?
← Previous message | Next message →

I've never understood why was set as a standard (or a convention) for icons in the first place.

It's the original HTML tag for italic text that indicates just a change in the visual appearance (as opposed to which places meaning behind the visual appearance).

Maybe this is an example of too many chefs in the standards-making kitchen. In basic programming, it's not wise to take an existing tag or code structure and use it for a different purpose. Code tends to not work well or as predicted when we do that, especially when the 2 standards exist in the same product, such as used in an HTML webpage where it's not italic but instead an icon.

Stack Overflow has a couple of threads on this topic that might help you. Keep in mind that these are people discussing options, not necessarily stating what is required or acceptable for accessibility.

https://stackoverflow.com/questions/11135261/should-i-use-i-tag-for-icons-instead-of-span

https://stackoverflow.com/questions/17471390/how-to-use-i-tag-with-icons

--Bevi Chagnon

From: Jonathan Avila
Date: Sun, Jul 23 2017 3:24PM
Subject: Re: Guidelines on making icons accessible?
← Previous message | Next message →

Vanessa, there are two issues:
1. There is no accessible name for screen readers and other assistive technologies. The code suppresses the font icon from being announced to a screen reader/spoken by speech recognition user but doesn't replace it with an accessible name. ARIA can be used to add an accessible name on the anchor element.
2. The font icons will likely disappear if a user with low vision or a cognitive disability replaces the font on the page with a more preferred font. Currently #2 is not clearly/directly required by WCAG 2. But to help users who replace fonts you can add role="img" to the icons so that they may use this to exclude them from being replaced in their custom style sheet.

Jonathan

Jonathan Avila
Chief Accessibility Officer
Level Access, inc. (formerly SSB BART Group, inc.)
(703) 637-8957
= EMAIL ADDRESS REMOVED =
Visit us online: Website | Twitter | Facebook | LinkedIn | Blog
Looking to boost your accessibility knowledge? Check out our free webinars!

The information contained in this transmission may be attorney privileged and/or confidential information intended for the use of the individual or entity named above. If the reader of this message is not the intended recipient, you are hereby notified that any use, dissemination, distribution or copying of this communication is strictly prohibited.

From: Kerri Hicks
Date: Sun, Jul 23 2017 7:16PM
Subject: Re: Guidelines on making icons accessible?
← Previous message | Next message →

It looks like the site is using Font Awesome. They've got some ideas for
making things accessible <http://fontawesome.io/accessibility/>;.

--Kerri

---------------

Kerri A. Hicks
Manager, Library Web Services
Brown University
Providence, RI 02912

On Sun, Jul 23, 2017 at 4:15 PM, Preast, Vanessa < = EMAIL ADDRESS REMOVED = >
wrote:

> I'm reviewing a website that is using tags to add icons for social
> media. The SiteImprove plugin says "Please note that even though 'i' tags
> are commonly used for inserting icons, this is considered bad practice." No
> other checkers I've used has flagged the "i" issue specifically. However,
> the other checkers have noted that these icons are empty links.
> Screenreaders just say "link" for those items.
>
> I'm having difficulty finding good information about the accessibility of
> adding icons with . Is it possible to add icons using the tags in an
> accessible way? How could the webmaster fix this issue? I assume that the
> webmaster is using something like Font Awesome or Bootstrap, but I know
> very little about how those work.
>
> Any resources or advice would be helpful. I'll add the code in question
> below.
>
> Thanks,
> Vanessa
>
> <div class="textwidget"><a href="[url redacted]" target="_blank">
> fa-lg icon-facebook">
> fa-stack-2x" aria-hidden="true" style="z-index: 2147483646;">
> fa-stack-1x" aria-hidden="true" style="">
> 
> </a>
> <a href="[url redacted]"
> target="_blank">
> fa-lg icon-twitter">
> fa-stack-2x" aria-hidden="true" style="">
> fa-stack-1x" aria-hidden="true" style="">
> 
> </a>
> <a href="[url redacted]"
> target="_blank">
> fa-lg icon-linkedin">
> fa-stack-2x" aria-hidden="true">
> fa-stack-1x" aria-hidden="true">
> 
> </a>
> <a href="[url redacted]"
> target="_blank">
> fa-lg icon-instagram">
> fa-stack-2x" aria-hidden="true">
> fa-instagram fa-stack-1x" aria-hidden="true">
> 
> </a></div>
>
>
>
> > > > >

From: Birkir R. Gunnarsson
Date: Mon, Jul 24 2017 4:59AM
Subject: Re: Guidelines on making icons accessible?
← Previous message | No next message

If the icon is used to label an actionable element, such as a button
or a link, use either the title attribute or the aria-label attribute
of that button or link, or put text inside it.

If it is not, use role="img" and aria-label to provide the info (e.g.
for an error icon) or include the text alternative in text, e.g. start
all error messages with an error icon and the word "error! "

If the icon is used to mark a selection or state of a complex widget,
make sure to use the ARIA Authoring practices guide, in which case you
may be able to use ARIA attributes to communicate same, e.g.
aria-expanded for the gear icon.

On 7/23/17, Kerri Hicks < = EMAIL ADDRESS REMOVED = > wrote:
> It looks like the site is using Font Awesome. They've got some ideas for
> making things accessible <http://fontawesome.io/accessibility/>;.
>
> --Kerri
>
> ---------------
>
> Kerri A. Hicks
> Manager, Library Web Services
> Brown University
> Providence, RI 02912
>
>
>
> On Sun, Jul 23, 2017 at 4:15 PM, Preast, Vanessa < = EMAIL ADDRESS REMOVED = >
> wrote:
>
>> I'm reviewing a website that is using tags to add icons for social
>> media. The SiteImprove plugin says "Please note that even though 'i' tags
>> are commonly used for inserting icons, this is considered bad practice."
>> No
>> other checkers I've used has flagged the "i" issue specifically. However,
>> the other checkers have noted that these icons are empty links.
>> Screenreaders just say "link" for those items.
>>
>> I'm having difficulty finding good information about the accessibility of
>> adding icons with . Is it possible to add icons using the tags in
>> an
>> accessible way? How could the webmaster fix this issue? I assume that the
>> webmaster is using something like Font Awesome or Bootstrap, but I know
>> very little about how those work.
>>
>> Any resources or advice would be helpful. I'll add the code in question
>> below.
>>
>> Thanks,
>> Vanessa
>>
>> <div class="textwidget"><a href="[url redacted]" target="_blank">
>> > fa-lg icon-facebook">
>> > fa-stack-2x" aria-hidden="true" style="z-index: 2147483646;">
>> > fa-stack-1x" aria-hidden="true" style="">
>> 
>> </a>
>> <a href="[url redacted]"
>> target="_blank">
>> > fa-lg icon-twitter">
>> > fa-stack-2x" aria-hidden="true" style="">
>> > fa-stack-1x" aria-hidden="true" style="">
>> 
>> </a>
>> <a href="[url redacted]"
>> target="_blank">
>> > fa-lg icon-linkedin">
>> > fa-stack-2x" aria-hidden="true">
>> > fa-stack-1x" aria-hidden="true">
>> 
>> </a>
>> <a href="[url redacted]"
>> target="_blank">
>> > fa-lg icon-instagram">
>> > fa-stack-2x" aria-hidden="true">
>> > fa-instagram fa-stack-1x" aria-hidden="true">
>> 
>> </a></div>
>>
>>
>>
>> >> >> >> >>
> > > > >

--
Work hard. Have fun. Make history.

E-mail List Archives

Thread: Guidelines on making <i> icons accessible?