WebAIM - Web Accessibility In Mind

E-mail List Archives

Re: Guidelines on making <i> icons accessible?

for

From: Chagnon | PubCom
Date: Jul 23, 2017 3:23PM


I've never understood why <i> 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 <em> 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 <i> 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

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