Skip to content
Morgan Peck Logo Blog

Icon fonts and accessibility

What are Icon fonts?

Icon fonts are fonts that contain symbols and glyphs rather than numbers or letters. They allow web developers to add lightweight, reusable images to their sites without the extra weight of an actual image. Icon fonts are vector images so they will scale well across various devices sizes and also will alow a user to customize its color. Just like images there are things you need to do to ensure that these icon fonts are accessible to all your users, read more below to find best practices.

Icon fonts and accessibility

Just like images you need to make sure that icon fonts are assigned a semantic role and have concise meaningful alternative text.

For informative icon fonts that does not have any visible text be sure to add a role="img" to your icon font. This allows blind users and screen reader users to be informed that an image is present. Then screen readers can list the icon fond among the images of the page and allow the user to navigate through the graphics.

If you informative icon font does not have any text you must be sure that it has a text alternative. This can be done either by adding an aria-label to the icon font or by the position: absolute; clip: rect(0 0 0 0) method without using a role="img". You should avoid using the CSS method because:

  • Icon font is not recognized as an image by screen readers
  • On mobile devices the icon font is not available to screen readers when using the explore by touch method
  • Voiceover on OS X focuses separately on the icon font item and then on the hidden text even if the icon font is set to aria-hidden="true"

Good informative icon font

<i class="fa-solid fa-cat" aria-label="Cat" role="img" ></i>

Since there is a set screen readers will recognize this font as an image causing it to also read the to its users.

Bad informative icon font

<i class="fa-solid fa-dog" aria-label="Dog"></i>

Most screen readers will ignore the aria-label text in this example since this does not have a set.

Actionable Icon fonts

Actionable icon fonts are any icon fonts that are:

  • Links
  • Buttons
  • Controls
  • UI components users can interact with

If you have any actionable icon fonts without any accompanying visible test you must make sure to have a text alternative. To do this you can add an aria-label to the icon font. This will treat icon font as an iamge and the link then will inherit the accessible text of that icon font.

Linked or anchor tag icon font with an aria-label

<a>
    <i class="fa-solid fa-github" aria-label="github"></i>
</a>

Most screen readers will ignore the aria-label text in this example since this does not have a set.

Buttons with icon fonts and role="img"

<button><span role="img" class="fa fa-bold" aria-label="Bold"></span></button>

Buttons with icon fonts and the alternative text on the button

<button id="usernameExample" aria-label="More info about user name" 
  title="More info about user name">
  <span class="fa fa-question-circle" aria-hidden="true">         
  </span>
</button>

SVGs vs Icon fonts

SVGs and icon fonts are pretty similar when it can come to accessibility they both have their strengths and weaknesses. See the table below:

Benefits SVGs Icon Fonts
Icons are vector based, rendering clearly and legibly
Users can customize colors with accessibility utilities like Windows high contrast mode
Icons scale with text when magnifying only the text
Icons work when images are turned off
Icons can be multiple colors
Icons retain their original color(s) when font and background colors are changed in user preferences
Icons work when styles are turned off
Icons work when users customize the font (users with dyslexia may choose a dyslexia-friendly font)