Starting in version 1.2.0 there have been some accessibility functions built into the NS FontAwesome Pro plugins.

Based on the recommendations from FrontAwesome (which you can read here) we are now inserting the proper HTML tags with the icon so that HTML content is served more accurate and thoroughly to users with disabilities.

You have a choice of setting the type of icon you are inserting to Decorative or Interactive.

Decorative: Icon is being used as a decoration or visual styling and has no other function.

Interactive: Icon is being used with semantic or interactive functions (links, lists, menu items, etc)

If you select Interactive a new text box will open. In that text box you can add the text that screen readers will provide the user when they visit that page.

TinyMCE Compatibility

The TinyMCE editor will strip out the aria-hidden attribute by default. To fix this issue you will need to make some adjustments to the TinyMCE plugin to prevent it from stripping out the HTML tags.

1. Go to your plugin manager and open the Editor - TinyMCE plugin.
2. In the Extended Valid Elements box add: i[aria-hidden|class|title]
3. Save the new plugin settings and you may now return to the article manager or module manager and use the FontAwesome button without it stripping out the aria-hidden HTML tags.