WebAIM - Web Accessibility In Mind

E-mail List Archives

Re: Guidelines on making <i> icons accessible?

for

From: Kerri Hicks
Date: Jul 23, 2017 7:16PM

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 REMOVED> >
wrote:

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