Print Friendly and PDF

How to add Screen Reader Text to Font Awesome Icons

Some clients like to use Font Awesome icons by themselves as a button to link to a social media account, or elsewhere. If link text isn't used in conjunction with the linked icon, the 'button' won't be ADA compliant as Font Awesome doesn't have a way to add alt text, like other image-based graphics do. To make Font Awesome links compliant, screen reader text needs to be added to the link. The screen reader text is invisible to visitors viewing the website.

  1. Place your cursor before the Font Awesome icon.
  2. Type your Screen Reader Text. (i.e. Like us on Facebook, Follow us on Twitter)
  3. Double click the Font Awesome Icon and copy the existing social media URL or if it is a newly inserted icon, copy the URL from the social media account.
  4. Highlight the link text and Font Awesome Icon linking it to the social media URL as one link
  5. Highlight the link text and any spaces that show the link color; select the Screen Reader Text option in the Paragraph Menu drop down. Highlighting both the text and spaces will make it so they don't show when the page is published but screen readers will be able to read the text you typed.
  6. Save and Preview to verify the icon displays as desired.

Walk-through Video

Screen Reader Text Ideas:

  • Like us on Facebook
  • Follow us on Instagram
  • Follow us on Twitter

Color codes:

  • Facebook: #6666ff
  • Twitter: #0099ff

If you are going to review Source code, these are examples of what it should look like:

<p><a href="" target="_blank"><span class="fa fa-3x fa-facebook-square fa-fw" style="color:#6666ff"></span><span class="content_screen-reader-text">Like us on Facebook</span></a></p>


<p><a href="" target="_blank"><span class="fa fa-4x fa-fw fa-instagram" style="color:#3f729f"></span><span class="content_screen-reader-text">Follow us on Instagram</span></a>


Have more questions? Submit a request


Please sign in to leave a comment.
Powered by Zendesk