WebAIM - Web Accessibility In Mind

E-mail List Archives

Guidelines on making <i> icons accessible?

for

From: Preast, Vanessa
Date: Jul 23, 2017 2:15PM

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>