Print Friendly and PDF

How to add Screen Reader Text to Font Awesome Icons

Font Awesome icons can be used 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 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 then 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 added text.
  6. Save and Preview to verify the icon displays as desired.

Screen Reader Text Examples:

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

Color codes:

  • Facebook: #6666ff
  • Twitter: #0099ff
    Note: Font Awesome by default uses the font color set for a website design, whether for linked or non-linked text. The above codes can be used if it is desired to color the icons using the Facebook/Twitter brand colors.

When reviewing the Source code, these are examples of what it should look like:

<p><a href="https://www.facebook.com/VicksburgBands/" 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>

or

<p><a href="https://www.instagram.com/vicksburgcommunityschools/?hl=en" 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

0 Comments

Please sign in to leave a comment.
Powered by Zendesk