Part of: Images
Last updated: 28 March, 2020
Following this helps people with:
time-pressures: wondering what an icon may mean takes time
stress: hard to comprehend icons can increase stress
multi-tasking: no time to think about what an icon means
cognitive impairments: unlikely to guess vague icons correctly
sight loss: screenreaders will read out labels and alt text
colour blindness: meaning will be missed if only given by colour
understood across languages and culture,
fast to recognise by non-fluent and low literacy users,
good targets to interact with, both on touch screens and with a mouse cursor: this can save people time,
space-saving, especially on smaller interfaces, giving more room for important messages.
But icons frequently cause access and usability problems. These guidelines will help you design and position them accessibly.
Users need to understand your icons. Add a label to explain what you intend the icon to represent. Few icons are considered to be generally understood by everyone. Labels reduce cognitive load and confusion.
Without a text label, many icons are misunderstood. Users are less likely to click on things they do not understand.
Some icons are not direct representations. For example, a paper clip to suggest an email attachment. To understand these users need to make several connections in their brains.
Clearly written labels mean users do not have to guess the meaning behind the symbol.
Be aware that your users may have different cultural associations from you, so may attach a different meaning than you intend.
Make text labels visible at all times. Users should not need to interact to make them show. For example, users should not need to hover their cursor over the icon before they see the label.
For a very familiar icon, like the Home button, you might not need a visible text label.
But, like all images, icons without text labels need alternative text, also known as alt text, to describe their purpose or action.
You may be tempted to add alt text instead of labels when designing specifically for a small user interface like a mobile device. Consider that this might make your interface less easy to use.
Icons work best if they’re easy to recognise. Some icons are familiar to most people who use the internet or digital interfaces. For example, the house symbol for ‘home page’ or magnifying glass for ‘search’.
Recognising and comprehending icons is often the result of people learning their meaning over time.
Your users should not need to work it out for themselves by trying something that does not do what they expected. World Content Accessibility Guidelines 2.1 advise against this.
Put familiar icons where people would look for them. For example, the search magnifying glass and search box in the top right hand corner of a screen. When icons are placed in an unexpected location users:
might not find them,
waste time looking them,
need extra help to find them.
You should not need to provide instructional copy to explain either where to find or how to use an icon, or any design feature. Any benefit of using an icon disappears if you do that.
As with all graphics, colour used on its own is not an accessible way to add meaning to an icon. The Web Content Accessibility Guidelines 2.1 advise not to use colour as the only visual way to:
indicate an action,
encourage a user to respond,
make a visual element unique from others.
Yes, Icons Need Text Labels (Video), Harley, A., Nielsen Norman Group, Undated.
Usability Testing of Icons, Harley, A., Nielsen Norman Group, 2016
Icon Usability, Harley, A., Nielsen Norman Group, 2014
The Magnifying-Glass Icon in Search Design: Pros and Cons, Sherwin, K., Nielsen Norman Group, 2014
Orbitz Can’t Get A Date, Spool, J., User Interface Engineering (UIE), February 2006
Guideline 3.2 Predictable: Make web pages appear and operate in predictable ways, Web Content Accessibility Guidelines (WCAG) 2.1, W3C, 2018
Success criterion 1.4.1: Use of Colour, Web Content Accessibility Guidelines (WCAG) 2.1, W3C, 2018
We invite you to share further usability studies and academic papers in the comments section of this page.
Live discussion of usability evidence: 26 February 2020, in Slack
Wiki page published: 27 March 2020