Posts

Accessibility and icons

I’ve just returned from a trip to Italy, where for the first time in my life I drove a car abroad. Before leaving I’d had a quick Google on what to expect from the Italian highways and was assured that traffic lights in Italy conform to the “international standard” of red for stop, green for go and amber when changing - what a relief.

It struck me whilst driving around Italy that many other signs seemed pretty similar or identical to what I’m used to seeing on roads in the UK. Maybe they are also confirming to some kind of “international standard” or maybe there just wasn’t a better way of showing it.

Later on the holiday I wanted to find the directions to the Zoo. I searched for the Zoo and ended up on their website. It was written, of course, in Italian (of which I am ashamed to say I don’t speak a word of). But I could use the hamburger icon to open the menu, and click on the ‘map’ icon which took me to a page with (I assume) directions and an embedded Google Map [1].

It got me thinking, just like the road signs, icons on the web are multilingual by default, they don’t need translating in to multiple languages to be understood. They are accessible in many languages. When we are considering multiple languages in web design, we don’t need to consider changing the language of most icons (unless a cultural reference would not be understood) - a left arrow on a carousel for example.

So maybe its time to create an “international standard” for icons on the web. For me, this is more of an organic process than having some governing body to regulate it. I believe its already happening with the “hamburger” icon; it has its critics but the more it’s used, the more users will be familiar with it and will know what to expect when it it clicked / tapped / selected.

Don’t get me wrong, icons present there own accessibility issues [2]., but they work across multiple languages and often for users who have not been to a site before.

1 You could argue that I only got to the Zoo because Google have made the map multi lingual but its a further than I would have got without the icons that I’d recognised. And a map is kinda just a big icon anyway isn’t it? a graphical representation of a real world thing.

2 many of which can be resolved with the correct use of aria tags and a label that can be responsibly hidden if required. I’d advise against using any icon without a corresponding label for more reasons than one - as outlined here

Blog Home