WebAIM - Web Accessibility In Mind

E-mail List Archives

Re: Guidelines on making <i> icons accessible?

for

From: Birkir R. Gunnarsson
Date: Jul 24, 2017 4:59AM

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


--
Work hard. Have fun. Make history.