Should I use flags as icons for languages?

Long answer: How to select a language?

This is one of the most common internationalization issues and out there are many websites, which are doing it wrong. Sometimes the designer doesn’t know, sometimes it’s the client that doesn’t know. So I decided to dig some arguments and answers.

Flags represent locations and nations

To make it simple, flags are symbols for countries, autonomous areas and sometimes nations. They represent a location or a nation, not a language.

Official W3C internationalization best practice:

Flags represent countries, not languages. Numerous countries use the same language as another country, and numerous countries have more than one official language. Flags don’t map onto these permutations.

Countries with more than one official language

Each country may have one or more official languages and each language can be spoken in several different countries. There are countries that don’t have any official languages (e.g. USA) and there are languages that are not official languages anywhere.

Finland has two official languages, Finnish and Swedish. Swedish is the official language in two countries, Sweden and Finland and also in the autonomous province of Åland, which is part of Finland.

Finnish bilingual sites often represent Finnish and Swedish with flags of Finland and Sweden, which at first seems natural. However, Swedish speaking Finns are not Swedes so why should they select their own language with the flag of neighbouring country?

Can you recognize the flag?

Why should American or Australian select English with the Union Jack? Or Brazilian with the flag of Portugal? Peruvian with the flag of Spain? Some Peruvians don’t probably even know what the flag of Spain looks like. Some flags can also be easily confused. Russia, Slovakia and Slovenia have very similar flags, as do Venezuela, Colombia and Ecuador. Chad and Romania have almost identical flags.

Countries without a language named after their homeland

How about Belgians? There are three official languages, Dutch, French and German. Belgian speakers of these languages would have to select the flag of neighbouring country to choose the correct language. In Switzerland there are four official languages and none of them is “the Swiss language”. Romansh language spoken in southern Switzerland doesn’t really have any official flag, unless you consider the Canton of Graubünden flag as one. Good luck getting that look good on icon size.

Offensive? Different dialects?

There may be strong historical reasons, e.g. colonies and wars, why people will get offended if they need to select their own language with the flag of some other country. Some languages don’t even have a home country and sometimes the same language spoken in a different country is actually a different dialect. One example is the difference between US English and UK English. In the US, they spell theater and organize, in the UK they spell theatre and organise. Some languages may have many different local variants.

Let’s take an example

A designer is building a new website for a non-profit organization, that wants to support the development and preservation of languages.

The content will be provided in several different languages, also in small and threatened languages.

On phase one, content will be in Finnish and Swedish. Designer selects Finnish and Swedish flags as icons, because they think it’s the most natural way of representing a language.

However, on phase two, the client wants to add three more languages. Northern Sami, Skolt Sami and Romani. Designer is a little confused, but then googles and finds out that there actually is a Romani flag. For the Sami languages of course Sami flag is the flag of choice. But there are two Sami languages. How to differentiate them with an icon? Our designer just uses the same icon for both languages.

On phase three, the client wants to add Meänkieli and Inari Sami. Now our designer doesn’t know what flag to use. There’s the flag of Tornedalians, but how to differentiate the third Sami language from the two others?

What to do if there will be more Sami languages? What to do if the client wants to have the content in Sign Language or Southern Ostrobothnia dialect? There are no flags for them.

This may not be an everyday example about the problems you will run into when using flags as icons for languages, but it should make clear that using a flag can lead to problems.

How others do it?

Infopankki language navigation screenshot

Infopankki is an information website for immigrants in Finland. Content is in 15 different languages. They are not using flags to represent languages, but local names for the languages instead. Finnish language is written as Suomi and Serbo-Croatian as Srpskohrvatski in the navigation. When you hover the mouse cursor over the language navigation, it shows the name of the language in Finnish, which makes it easier for Finns to recognise the different language options (e.g. in case you need to print the page in Arabic).


BBC Language Selection screenshot

BBC lists language names both in English and in local script, with some exceptions. Next to Spanish it says Mundo, which means The World. Spanish content is therefore global news content in Spanish.

Next to Portuguese, it says Brasil, which means that the Portuguese content is related to location of Brazil, not Portugal. However, the URL for BBC Brasil is [cci][/cci]. Confusing? Yes.

BBC is mixing the language and the location in the same navigation. Sometimes the website is global in that language, sometimes it’s localized.


Reuters language navigation screenshot

Reuters has localized sites instead of languages. When selecting an edition, you are also selecting a location and a language. Latin America and Spain are here two different sites with different content.


Lutron language selection screenshot

Lutron uses a combination of location and language. User selects first location and then language. But why are they listing Japan and Asia as a different location and why is US English under Europe? Confusing? Yes.


SBB language selection screenshot

Swiss railway company SBB takes a little bit different approach and uses two-letter language codes. This method should be avoided, because people may not be familiar with the codes and some of them can be misleading.

Google Translate

Google Translate language selection screenshot

Google Translate uses a simple alphabetical list of languages for target language, while the source language is auto detected by default. The size of this list is very compact, although it contains 66 different languages!

Belgian rail

Belgian rail language selection screenshot

Belgian rail is using a splash screen with four different language selections. Selecting a language is very easy, but in the main site, they are using two-letter country codes, just like SBB. They don’t take much space, but again, all users are not familiar with them.


Ebay location selection screenshot

Localized Ebay sites have a navigation, which uses flags to represent a location. This is a correct way to do it, although sometimes there can be issues with the term country, because some countries are not universally recognized as sovereign states and their status is politically controversial (e.g. Taiwan, Palestine).


H&M region and language selection screenshot

H&M uses a combination of region and language. Some regions have more than one localized sites, while most of them only have one local site. The name of the region is written in English and in available local languages.

Detecting language automatically

There are techniques to detect language automatically and in ideal world this would be the way to do it. User shouldn’t need to select a language.

Too bad that the world is far from ideal and auto detection is very error prone. You could use geolocation to locate the user in Finland and offer Finnish as the default language, but there’s still quite big chance to guess wrong. User can be a Swedish speaker or a foreigner who just happens to be in Finland.

Combination of geolocation and browser language preferences could still be used to narrow down the selection of languages on websites that are localized in several different languages, but a fallback option should always be available. Language selection should be clearly visible on every page on the site.

In this case, the user could get the site in Finnish, because it probably is the correct result in about 90% of the cases, but it certainly is advisable to offer Swedish and English as secondary languages and keep the language selection easily accessible in case where user wants to read the content in some other language.

How you should do it?

There’s no simple answer for this question.

Sometimes the location is more important than the language. Especially web shops are often location based, not language based. Ebay has a Finnish site, but it’s only in Finnish. Swedish site assumes the user is located in Sweden, so Swedish-speaking Finns have to use the Finnish or the international site.

It should be made clear to the user if they are selecting a language, a location or both at the same time.

Language names should be presented in more than one language. Use a combination of main (or active) language of the site together with local script. For English website, languages could be listed in a following way: Finnish / Suomi, Russian / Pусский, Swedish / Svenska.

Avoid two-letter language codes, because they are not familiar to majority of users.

Use alphabetical order. It makes easier to find the correct language and it’s politically neutral.

Place the language selection where it’s easy to find. Site header and footer are common places.

If there are only a few languages, there’s no need to hide them in a drop-down menu. Just print the language names on the page.

For localized websites in different languages, select first a location and offer different languages for selected location if available. All location and language options can also be shown in the same view, as H&M does.

Fear not the length of the list. Google Translate has 66 languages and they all fit perfectly in a small box.


Associated form elements and labels in ASP.NET WebForms

The following checkboxes have one big important difference:

Choose wisely, my friend!

First checkbox is associated with its label, second is not. Try clicking them. Which one is easier to use?

Form elements and labels should always be associated with each other using the [cci]for[/cci] attribute on [cci]

Control association has two important purposes: usability and accessibility. From usability perspective, bigger targets are easier to click (or tap). Therefore label is easier to hit than small checkbox or radio button. From accessibility perspective, visually impaired users will not know what the form element does if there is no associated label. Just add the [cci]for[/cci] attributes and everything works as expected. Simple, huh?

Not always. We have this thing called ASP.NET WebForms.

In ASP.NET WebForms the server side label control [cci][/cci] is a different beast. It will render a [cci][/cci] by default. I’ve seen many forms that don’t have any semantic labels, just spans. The reason for this is, that [cci][/cci] needs an [cci]AssociatedControlID[/cci] attribute to create association with a form element. Like this:

[ccN lang=”asp”]