Tag Archives: link

How to make Font Awesome Accessible

If you use Font Awesome to link to your social media pages then you need to ensure that they are accessible to screen readers by adding anchor text.

If you use Font Awesome to link to your social media pages then you need to ensure that they are accessible to screen readers by adding anchor text. If you don’t then you have empty link errors when you test for accessibility with WAVE (Web Accessibility Evaluation Tool) and blind users will have no idea where the links go.

Anchor text is clickable text in a hyperlink that describes the link such as  <a href=”http://www.example.com”>Example Anchor Text</a> but when you are using an icon font as a link, you don’t really want to have anchor text displayed as well:

Dennis Lembrée (@dennisl) says


You should add aria-hidden=true to the icon span so screen readers don’t read the character that’s used for the font icon. This is the technique used on EasyChirp dot com, a web-accessible Twitter app.

Curated by (Lifekludger)
Read full article at Source: How to make Font Awesome Accessible