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:
This is slightly overkill for sighted users so what do we do?
We add our anchor text with a class that hides it from the screen for sighted users but allows it to be read by screen readers.
Add this class to your style.css:
Now add your anchor text into your links:
Sighted users will just see the Twitter icon but someone using a screen reader will now know that clicking this link will take them to your Twitter page.
Thank you to Rian Rietveld for reviewing my post and helping me improve it by using Clip to hide the screen reader text for better browser compatibility and using <
span class="fa fa-twitter fa-4x"></span> instead of
<i="fa fa-twitter fa-4x"></i> for better sematic mark-up.