When it comes to icons, different specifications must be observed. Not all icons are self-explanatory or designed for small applications.
Consistency and standards
Aesthetic and minimalist design
Table of contents
- Signs and communication
- Icons in UI
Signs and communication
So that we can take a closer look at the topic of icons and analyze them for accessibility. First we have to understand what an icon is. This definition is actually not as simple as it seems. Charles S. Peirce, a philosopher of the late 19th century defined 3 basic signs in semiotics: the icon, the index and the symbol.
An icon resembles the object it stands for and thus establishes a connection to it. The following example illustrates this.
A classic icon from the field of user interface design is the mail icon. It shows a letter and creates the link to the physical letter and the sending of a message.
An index indicates what it stands for, the classic example is smoke which stands for fire.
Photo by Jens Johnsson on Unsplash
The symbol makes no clear connection to its origin. The meaning often has to be learned culturally, which means that prior knowledge is needed to understand symbols. A good example of this are religious symbols, which are not self-explanatory for all people at first go.
A good example of this is the Om or Aum symbol. The Om is a sacred sound and a spiritual symbol in Indian religions. It signifies the essence of the ultimate reality, consciousness or Atman Wikipedia . This knowledge cannot be expected of everyone, and therefore this symbol needs background knowledge to be understood.
Understanding icons in UI
Now that we have defined the basics, it is time to transfer them into the user interface design. Icons are elementary components of user interfaces. We can label functions using established icons or simplify contents through supporting icons. In the beginning of the user interface design we tried to design these icons as close as possible to the original.
In this picture we see the famous System 7 from Apple. Folders look like folders and the trash can looks like a trash can. Wikimedia – Apple
And now we also see that at some point we reach a limit with icons as defined by semiotics. We cannot display complex processes like a “login” or “file sharing” exactly as it is meant. That’s why in the UI we rather speak of symbols which are used as icons.
Icons in UI
Icons in user interface design are to be considered as symbols and sometimes require prior knowledge. There are various icons that have established themselves and now stand for themselves.
- Search icon
- Navigation bars
- User icon
- Close icon
If icons that are not self-explanatory are used as interaction elements, they should always have a label that explains their function.
We see here two times the same interface, once with labels and once without. It is immediately clear that the interface with label is more user-friendly. Not only for users with disabilities it’s much easier to use the interface with labels, but for all users. See also chapter context to get more detailed informationabout meaningful labels.
For UI components and graphical objects, WCAG requires a contrast ratio of at least 3:1. If icons are used as interaction elements, for example in navigation, a contrast of 4.5:1 is recommended. Since the icons in navigation must be aligned with the navigation labels. See also chapter colours to get more detailed information about contrast.
There are countless tools for checking the contrast of elements and text, one of my favourite tools is the Colour Contrast Analyser from the paciello group.
Icons for small applications
Icons are well suited to make the interface more understandable. One challenge is to design icons for all device sizes. It is recommended to adapt the icons for each viewport to ensure that they are always recognizable for all users. This helps people with visual disabilities to find their way around.
Icons are usually formatted as follows:
- 32/32px ore more
- 8/8px for small sizes
In the left example we see a search icon that works well for 16px or more. Once the icon needs to be resized, it is too detailed. A solid icon like the one on the right makes more sense.
W3C – Text Alternatives
W3C – Non-text Content
W3C – Contrast
W3C – Images of Text