Designing accessible icons (Part 1 of 2)

This is a two-part article on creating accessible and useful icons. In this first part I will be covering off the accessibility considerations required for icon design. I love icons. Someone once described them to me as mini works of art – and that’s not far off. They can be miniature designs representing something huge, all to be understood within a blink of an eye. They’re an incredibly small but hugely important part of any User Interface. Not too long ago I was tasked with creating a brand new interface for our Content Management System (CMS) Defacto. With a brand new interface came a new family of icons and I thought I’d share some insight into the process of designing these icons.

Purpose

Icons are a fantastic way to immediately convey the purpose of an action/file/etc, to someone. In a complex system such as a CMS, the designer should try their best to present the information in a clear and usable way – and icons can certainly aid users in their tasks. (And pretty icons only heighten the experience further!) So, we designed specialised icons for our accessible web-based content management system. In that SEO-spectacular sentence alone is our brief, icons that are:

• Accessible;
• Web-based;
• For our CMS, Defacto.

The last one is a no-brainer, beautiful icons fit for our system. But the other two have a bit more thought and consideration:

Accessibility

The bible WCAG 2 guidelines state in checkpoint 1.3.3:

Sensory characteristics: Instructions provided for understanding and operating content do not rely solely on sensory characteristics of components such as shape, size, visual location, orientation, or sound.

Well damn, that doesn’t sound very good for icons… but in reality all it means is that an icon alone isn’t enough. Instead, provide a label with the icon. No one enjoys guessing what the icon is or what it does, so chuck a label in there. Done. But having a think about why that checkpoint exists (other than mystery icons) it mentions size and shape. Creating accessible icons means making something that will benefit everyone: Even users with low vision and colour-blind users can reap the benefits of using icons. Without colour or detail you can still hazard a guess as to what the following icons might be for, even with blurred vision:

However a famous example of shape not working could be when Adobe released Creative Suite 3. Should a colour-blind user with low vision come across the icons, it’s simply a UI nightmare:

There was quite the outcry at the time citing shape alone as their downfall, but in reality they still have a powerful effect. The vibrant colours and text on each icon provide two strong ways to differentiate them – Although this doesn’t work for everyone, I’m sure Adobe would argue that they were designed for their target audience group: a highly visual audience. (Still, doesn’t excuse some very bad icons recently created for CS5!)

Cultural differences

Another accessibility consideration is cultural differences. How can your icon design be accessible to all if your design doesn’t make sense to a whole culture? A classic example is a post box. Here in Britain we think of a bright red post box with the royal crest, but in Germany they are bright yellow with the rather cool bugle mark:

Another great example is the use of circles and crosses in Japan. In Britain we might ‘select’ something by placing a cross in the box, but in Japan you’d put a circle – a cross means the opposite! Circles in Japanese culture often refer to something being ‘perfect’ so it makes sense that your selection would be with such an approving symbol. An example of this Japanese cultural difference closer to home is on a PlayStation controller. Outside of Asia, you always select an item with cross and cancel with circle. In Japan it’s the opposite, circle to select and cross to cancel. Some games with a strong Japanese franchise like Final Fantasy actually use the Japanese way even on western versions – just to shake things up!

So these are a few key items to be aware of from an accessibility point of view. In the next section we’ll be covering off the actual designing of an accessible and useful icon. Part 2 will look at the visual design; including size, shape and colour of your icon.