Ashley Sheridan​.co.uk

Tags:

Icons on the Web are a natural extension of their use across computer systems since the early graphical user interfaces (GUIs) came about. For over 50 years, we've been using icons to summarise information in picture form, giving users ways to quickly identify objects and actions in order to make their tasks more efficient.

But while the focus has always been on the graphical nature of these icons, sometimes very little thought has been given to people who can't see them, people who have to percieve them in other ways, such as by voice or touch. In order to make icons works for everyone, we need to ensure that tools like screen readers and Braille keyboards are able to correctly inform their users what an object is.

Contents

Why Accessible Icons Matter

If you're a person with a full range of sight, I want you to take part in a mini thought exercise for a moment. Consider your favourite application that you use fairly often, whether it's a web browser, image editing tool, or even an email client.

Now, image every icon on that is replaced with a simple square box, ☐. All the icons on every button are gone. Every status icon next to every email or tab is now gone too. That application is now pretty difficult to use, right? You might be able to use some parts of it, but unless you know where every button is and what it did before, you're going to end up doing a lot of things that you never intended. Now imaging that you're using a brand new application and that too is missing all of its icons. How will you ever be able to use that at all?

This is the problem that people face every day when using applications that have not been built with accessibility in mind. This is especially true on the Web where we spend more and more of our time throughout the day.

Common Accessibility Issues

Icons suffer from a few main problems:

• Little or no information for icon.
• Too much or redundant information for an icon.
• Incorrect information for an icon.

Too Little Information

This is perhaps one of the most common issues I find, where an icon has been used but there is absolutely no label or any text that a browser can make available to a person who cannot see. Typically, this happens where an icon is just set as a background image, or is using an icon font, and the developer hasn't added any extra markup to account for that.

A big culprit of this is Font Awesome, which does quite a few things wrong. First, it uses the <i> tag, because apparently they decided that rather than use it as it was intended, they were going to repurpose the tag to reduce page weight (or something). The result is a visual icon that's completely hidden from screen readers.

It does have accessibility features, but in order to make these work, the developer has to mark their code up in a specific way. At that point, they might as well just do it properly in the first place!

Too Much Information

This is a problem in 2 parts. First, I'll cover redundant information. This is a problem applicable for any text alternative made available for a graphical element. What is redundant text though? Basically, it's text that doesn't need to be there:

The user doesn't need to know that these are icons, or that they are part of a button (they already know it's in a button if that's the case). That information is redundant, and just wastes their time by forcing a screen reader to speak it out.

Too much information can happen when a single icon is doing a lot of heavy lifting. For example, a single status icon for a user in an online system might just join together various status text that is applicable, without much thought as to what the end result will be:

This partially falls into the redundant area too, does the text need to mention "User" for each status? Of course not. But, does the icon really need to convey all of these bits of information? Also, no.

Incorrect Information

There are a couple of reasons an icon might have the incorrect text attached to it. First, it might be a victim of copy/paste from another part of the code that was never identified by any kind of quality check. The second, is where an icon might not have been updated to reflect a change of state somewhere in the application.

Sometimes, a particular font used for icons incorrectly overrides letters, numbers, or other characters that have their own meaning. For example, the well-known Wingdings font installed on Windows changes existing letters of the alphabet to provide different symbols. Visually they convey one thing, but a font is ignored by a screen reader, which will just present the underlying letters instead. For example, the capital letter C in Wingdings is a thumbs up symbol. Relying on that font to convey information as an icon would confuse screen reader users by giving them something that is completely wrong and unintended.

How to Make Accessible Icons

There are 4 main types of ways to put an icon in a web page or application:

1. Background images via CSS on an element or pseudo element.
2. Using an icon font.
3. As an inline image.
4. With an inline SVG.

Through this, I'm assuming that all uses of icons are more than decorative, as in, they are used to convey some kind of information to a user.

Fixing Background Images and Icon Fonts

Both icon fonts and background images suffer from the same problem, there's no information at all in the HTML to present to a screen reader. In order to convey anything you will need to add more markup.

Consider these bad examples:

These can be fixed like this:

Fixing Inline Images

Inline images the easiest to fix, because they require no more markup than you should already be using for images. As long as you use the alt attribute to provide alternative text for the image, then you are sorted. I stress that the text needs to be an alternative, because I often see the alt attribute used to describe the image, which isn't always a good alternative. So, instead of this:

Do something like this instead:

Fixing Inline SVGs

SVGs (Scaleable Vector Graphics) are the most interesting one. Because they're markup, you can do all the kinds of things you do on your HTML to create a more accessible user experience. For an SVG icon, you will probably want to keep things very simple though, so typically, you might do something like this:

Icons Accompanied by Text

There are times when an icon is part of a component that also contains visible text which is often a better label. For example, a button on a confirmation dialog might have a tick icon beside the word "Accept". In this case, the icon is just a decorative element, as the buttons purpose is best described by the text itself.

If you were to apply the above methods to your icon, anyone relying on a screen reader would have an awkward repetition of labels read out to them, one from the icon, and another from the text.

The best approach in these situations is to hide the icon entirely from the accessibility tree in the browser, which can be easily done by adding the aria-hidden="true" attribute to the icon element. This applies to whatever method you've included the icon with.

Testing Your Icons

The best test you can do is obviously to try with a real screen reader. There are many options available to you, depending on your development situation and budget:

As well as these options, BrowserStack also has limited support for some screen readers, which is an option if you need to test a screen reader on a device you don't have access to normally.

If you are looking for a quick way to test to see what text would be surfaced to a screen reader or Braille keyboard, I've found that inspecting the accessibility tree is the simplest option. The accessibility inspector in Firefox is brilliant for this, and is as simple as inspecting any other element on the page.

Conclusion

Icons are a big part of any user interface, and ensuring that they are working correctly for everyone is important. You can see from the examples here that the changes you need to make are minimal, and quite simple, requiring virtually no more time during the development process to build in at the beginning. The end result is a more usable website or application.