Accessibility as a part of visual identity

At SVT, we put great effort into making our digital products accessible for all. One challenge with that is how to bring our users attention to the accessibility features, without stealing too much focus from the viewing experience. And one way to do that is with icons. This article briefly explores how we aligned the visual communication of our accessibility features with our design system, making accessibility a part of the visual story of who we are and what we stand for.

Icons are images used in digital interfaces to guide the eye, helping the user find a certain feature faster. Even when they are figurative, they tend to be so simplified that we perceive them as symbols. Take for instance the cogwheel, that we know as the “settings” symbol — we recognize it in much the same way as we would a letterform. In fact, in our design, we think of the icons more as an extension of our typography than as pictures.

Our previous icons for sign language, audio description, subtitles and subtitles to speech were well designed. But the the rest of our design had evolved in another direction. By adjusting the icons to align with our design language as a whole, we wanted to emphasize how important accessibility is to us. And by making the symbolism more logical and scalable, we hoped to make it easier for us to add new icons for new features.

Symbolism

Our first step was to review the symbolism — how might we communicate the essence of each feature as effectively as possible? In our digital products, the icons will be helped by context and, more often than not, an explanatory text. But as a starting point we strived to make them as understandable as possible on their own.

For each symbol, we drew as many possible solutions as we could. Obvious, unexpected, downright bad and possibly brilliant, all mixed together. We began with very rough sketches, and from these we were able to reason our way down to a few strong contenders. These were tested on users and iterated on until we thought we had a reasonably validated idea for each icon.

In some cases we found it best to keep the existing symbols. In others, new solutions performed better. For all of the symbols, we made a point of using the same recurring building blocks for the same meaning. For instance, “… to speech” is always represented by a loud speaker, regardless of whether it’s a subtitle or a news article that’s being spoken. In that way, the system becomes scalable, making it easier to add more symbols.

Aesthetics

The next step was to align the symbols to SVT:s aesthetic. The main reference for that is our bespoke typeface Publik. Together with SVT’s logotype and color palette, Publik constitutes SVT’s visual identity, which is what makes us recognizable wherever our users meet us.

Just as we had previously done with the rest of our icon family, we now designed the shapes, lines and corners of the new icons to align with the visual language of Publik. Since the icons will mostly be accompanied by text set in Publik, it makes sense for them to communicate effectively together.

And now the new icons are out there. We don’t see them as being definitive — we’ve tried them on a few users but the real test is in the actual use of the many. That’s when they need to show what they’re made of. They are not intended to pull the whole weight of explaining our acessibility features, but they do need to help more people view (or hear!) our content. If not, we’ll adjust — until we get it right.