Link to home
Start Free TrialLog in
Avatar of APD Toronto
APD TorontoFlag for Canada

asked on

Font Awesome and Screen Readers (WCAG)

Hi Experts,

Is there any way I can make Font Awesome accessible to Screen Readers, and WCAG Compliant?

For example, <i class=“fa fa-server”></i> is not “visible” to screen readers, as you cannot alt to an <i> tag.

The only way I can think of is to make a screen shot of the icon, then use it as <img>, but is there a better way?

Any help would be appreciated.
Avatar of David H.H.Lee
David H.H.Lee
Flag of Malaysia image

For example, <i class=“fa fa-server”></i> is not “visible” to screen readers
Can i know which screen readers that are referring not "visible"?
You may need to check your current font-awesome css library is supporting the mentioned icon?

Here is the sample code

<link rel="stylesheet" href="">

<i class="fa fa-server"></i>
<i class="fa fa-server" style="font-size:25px"></i>
<i class="fa fa-server" style="font-size:35px"></i>
<i class="fa fa-server" style="font-size:45px;color:orange"></i>

Open in new window

fa-server icons:

User generated image

Common Troubleshooting on the Web (Font-Awesome)
Avatar of Michel Plungjan
Michel Plungjan
Flag of Denmark image

Link to home
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
Start Free Trial