When linking a Font Awesome icon, or if the preferred link text isn't descriptive enough for those using screen readers, screen reader only text can be applied so that the text is not visible on a page but is available to screen readers.
An example of this is wanting to create a link written as "Learn More" which makes sense when viewing the other content on the page, but might not be descriptive enough for screen readers. Additional text could be added to the link such as "Learn More about our school" with "about our school" having Screen Reader Only formatting applied so it isn't visible.
Adding Screen Reader Text to Normal Links
- Type the full link text, including the portion that will be made invisible, in a rich text editor.
- Highlight the text and click the link option corresponding to the type of link being added. Add the link in the same way links would be added traditionally.
- Highlight any of the link text and spaces that should be visually hidden then select the Screen Reader Text option in the Paragraph Menu drop down.
- Save and Preview to verify only the desired link text is visible with the link. Both the visible and hidden portions of the link text will be read by screen readers.
Adding 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.
- Place your cursor before the Font Awesome icon.
- Type Screen Reader Text. (i.e. Like us on Facebook, Follow us on Twitter)
- 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.
- Highlight the link text and Font Awesome Icon linking it to the social media URL as one link
- 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.
- 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
- 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>
<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>