WebAIM - Web Accessibility In Mind

E-mail List Archives

Icon fonts

for

From: Colleen Gratzer
Date: Jul 5, 2019 8:13AM

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