WebAIM - Web Accessibility In Mind

E-mail List Archives

Re: Guidelines on making <i> icons accessible?

for

From: Jonathan Avila
Date: Jul 23, 2017 3:24PM

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 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.

-----Original Message-----
From: WebAIM-Forum [mailto: <EMAIL REMOVED> ] On Behalf Of Preast, Vanessa
Sent: Sunday, July 23, 2017 4:15 PM
To: WebAIM Discussion List < <EMAIL REMOVED> >
Subject: [WebAIM] Guidelines on making <i> icons accessible?

I'm reviewing a website that is using <i> 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 <i>. Is it possible to add icons using the <i> 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">
<span class="fa-stack fa-lg icon-facebook">
<i class="fa fa-circle fa-stack-2x" aria-hidden="true" style="z-index: 2147483646;"></i>
<i class="fa fa-facebook fa-stack-1x" aria-hidden="true" style=""></i>
</span>
</a>
<a href="[url redacted]" target="_blank">
<span class="fa-stack fa-lg icon-twitter">
<i class="fa fa-circle fa-stack-2x" aria-hidden="true" style=""></i>
<i class="fa fa-twitter fa-stack-1x" aria-hidden="true" style=""></i>
</span>
</a>
<a href="[url redacted]" target="_blank">
<span class="fa-stack fa-lg icon-linkedin">
<i class="fa fa-circle fa-stack-2x" aria-hidden="true"></i>
<i class="fa fa-linkedin fa-stack-1x" aria-hidden="true"></i>
</span>
</a>
<a href="[url redacted]" target="_blank">
<span class="fa-stack fa-lg icon-instagram">
<i class="fa fa-circle fa-stack-2x" aria-hidden="true"></i>
<i class="fa fa-instagram fa-stack-1x" aria-hidden="true"></i>
</span>
</a></div>