WebAIM - Web Accessibility In Mind

E-mail List Archives

Re: Icon fonts

for

From: Mallory
Date: Jul 5, 2019 8:20AM

Hi,
while it does do those two things (hides the icon from AT and ensures the link has full text), it means users who need to replace fonts (for readability reasons) or for whatever reason cannot get the custom fonts to load (network, browser support, JS issues), the link is not identifiable by sighted folks.

This could be slightly mitigated for mouse and keyboard users by showing that hidden text on hover and focus, tho that leaves out speech-rec and many touchscreen users.

I try as hard as possible to keep some visible text available even when icons are used. I do like SVGs better than icon fonts but there are some instances where an SVG may also not appear, so it's not an easy "just use SVGs instead of icon fonts" answer. When I use SVGs (inline) I do it very similarly to your code (aria-hide the SVG and either use text, hidden text or as a last resort aria-label on the control).

cheers,
Mallory

On Fri, Jul 5, 2019, at 4:13 PM, Colleen Gratzer wrote:
> In my research at some point, I came across this as a solution to using
> icon fonts:
>
> <a href="http://www.facebook.com"><i class="fab fa-facebook-f"
> aria-hidden="true"></i><span class="visually-hidden">Facebook (opens in
> new tab)</span></a>
>
> Is this an acceptable way to approach this situation? Is there a better way?
>
> If so, this is hiding the icon from screen readers but still reading out
> "Facebook (opens in new tab)," yes?
>
> Thanks!
>
> Colleen Gratzer
> Chief Creative Officer | Brand Academy™ Certified Branding Expert |
> Accessibility Specialist
> Gratzer Graphics LLC https://gratzergraphics.com
>
> Design Domination podcast
> > > > >