Icons are widely used in web design. They can draw attention to important parts of a web page, act as a shorthand where text doesn't fit, reinforce a brand, and inform visitors with language barriers.

But to be truly inclusive, your website should use accessible icons.

Download Now: Free Website Accessibility Checklist

What Are Accessible Icons?

Accessible icons are those that can be understood by all website visitors regardless of impairments or disabilities.

To be accessible, icons should be visible. If they first require interactions to be seen, they may be missed.

Here's an example from Google Maps.

Using the menu below, a visitor can search for restaurants, hotels, bars, and coffee shops in their area by clicking on an icon. Clicking on the restaurant icon will show a list of local restaurants, which are marked on the map with the knife and fork icon.

example of accessible icons

Source

What may be less obvious to visitors is the additional search criteria hidden behind the “More” icon. Only by clicking on the “More” icon can you search for banks, gas stations, parking lots, grocery stores, post offices, and hospitals.

accessible icons example

Source

The reason this is important to point out is because universally understood icons are rare. A magnifying glass, which means "search" is one of the few that's truly widely recognized. For most icons, it’s necessary to accompany the image with a text label to avoid ambiguity.

For example, even the ubiquitous hamburger icon on mobile menus can be overlooked by users. In fact, an A/B test showed better engagement and conversions when the word “Menu” was added to the icon.

You should also consider color for icon accessibility. If an icon's color contrast is too low relative to its background, some users with vision loss may not be able to see or use it.

For example, most of us recognize the social media brand links from their icons alone:

web accessible icon social media links

Source

But for a blind person who relies on a screen reader to understand content, they'll need a label written in code to understand what the icon for Twitter is.

Additionally, any icon that's decorative shouldn’t be read out to visitors because it doesn’t add to their understanding. For example, four icons are used to illustrate items in the following Airbnb listing, but telling a blind person that there's a house icon or a key icon is superfluous — what they need to know is in the accompanying text:

Airbnb apartment listing with icons

Source

Icon size is also important, particularly for icon links. A good size to remember is 44 x 44 pixels because an icon any smaller will be hard for some people to tap on their phone.

Finally, interactive accessible icons must be keyboard accessible and touch accessible as well as clickable via a mouse.

Ready to add accessible icons to your website? The simplest way to begin is to download ready-made icons.

Ready-Made Icon Sets

If you’re not confident with design or are pressed for time, you can download pre-drawn icons individually or as icon sets. (Here are 15 free icon sets to get you started.)

Make sure you check the licensing for any icons you download. It’s particularly important if you plan to use them commercially. Some icons have attribution requirements which you should follow.

One of the best-known icon sets is Font Awesome, which contains thousands of icons. Let’s take a closer look at it.

Accessible Icons Using Font Awesome

Font Awesome is an open source icon set that's popular among web designers. While Font Awesome’s free icons can be used commercially, some icons represent brands that may be trademarked — so, make sure you have the right to use them.

Font Awesome’s powerful search makes it simple to find the right icon for your project. You can filter your search by Free or Pro, icon style, icon type, and more.

accessible icons using awesome fonts

Source

Font Awesome icons can be used in two ways. First there are icon fonts, which use symbols instead of the letters and numbers of regular fonts. Font Awesome also provides SVG icons, which are best for accessibility because it’s easier to add the accessible code that screen readers need to SVGs as opposed to icon fonts.

Some advantages of using Font Awesome are the wide range of icons available, many of which have variants. You can resize icons without losing sharpness, make them any color, and rotate, animate, or flip them. 

If you can’t find the icons you need in Font Awesome or anywhere else, creating your own may be the best solution — let’s look at what this process entails next.

How to Make Accessible Icons

If you have artistic talent, you can make your own accessible icons with a graphic design program.

Here are a few tips to keep in mind when designing your accessible icons:

  • Check the size of your icon in your program and adjust it if necessary before you export it. (Measurements in mm might be suitable for print design, but could make your icons too big.)
  • Pixel measurements are more appropriate for web design. Quite often icons have square dimensions. (Common sizes in pixels are 16x16, 32x32, 64x64, 128x128, 256x256, or 512x512.)
  • Make sure the document size matches your icon size.
  • You can usually choose from multiple file formats when you export icons. For use on the web, the most common file formats to use are PNG or SVG. Since it’s simpler to make PNG icons accessible, let’s look at them.
  • If you plan to add an icon to a background, make sure there will be sufficient contrast. 

Accessible Icons in PNG Format

Whether you’ve made or downloaded your PNG icons, there are two different ways to use them.

First, there are semantic icons — icons which have a meaning. If your icon's meaning isn’t obvious, it’s a good idea to add visible text next to the icon to make it clear for everyone.

Accessible Icons in PNG Format

Source

If your icon is linked, use alt text that spells out the link destination.

For example, an email icon might have the following alt text:

<a href="mailto:hello@example.com"><img src="contact.png" alt="Email us"></a>

web accessible email icon example

Source

To make the icon’s meaning understandable for everyone, you can add visible text, like “Email us.” Doing this has the added benefit of making the hit area for the link bigger, so it’s easier to click or tap.

If you use visible text,, you don’t need to add alt text to the icon because the link text already describes it. Instead, the icon performs a decorative function, so should have null image alt text:

<a href="mailto:hello@example.com"><img src="contact.png" alt="">Email us</a>

web accessible email us icon link

Source

Begin Making Your Web Icons Accessible

Accessible icons are vital to help your disabled visitors understand your website. They should be easy to see, big enough to interact with, and be able to be understood either in their own right or with accompanying text. For the chance of better engagement, it’s worth taking the extra time to get it right.

New Call-to-action

 website accessibility

Originally published Apr 1, 2020 6:48:31 PM, updated April 16 2020

Topics:

Web Accessibility