Indicating the language of a link destination

Answer

Pros and cons

If a visitor to a web page follows a link, only to find out that they cannot read the target document, this wastes time and, if it happens enough, introduces fatigue. Eventually they may lack confidence when faced with links that actually do go to pages they can read.

If you add some text or graphic to the link indicating that the target document is in another language, it may allow the reader to decide in advance whether or not to follow the link, according to their language skill, and therefore avoid these problems.

There are, however, potential problems with this approach if a newly translated version of the target document becomes available at a later date.

Assume, for example that a French page has used this approach some time ago to point to a second page which at that time was only available in English. Later, the target page is translated into French. Unless the first French page is updated, it will now be incorrectly warning French readers that the second page is in English, and possibly discouraging them from following a link to what is now actually a perfectly legible document.

You also need to consider how to communicate to the reader whether the target document is available in other languages. For example, if the user is reading a page in Hungarian, and the link goes to information that is not available in Hungarian, but is available in both English and German, what do you signal to the reader? It may be that the reader would prefer the German version over the English, or vice versa. This gets more problematic the greater the number of alternative translations available.

You need to assess these pros or cons when deciding whether or not to mark links in this way.

Using hreflang with CSS to indicate the language

If you do decide that you want to indicate the language of a resource at the end of a link, one way people have done this in the past is to use an hreflang attribute and some CSS to provide the information to the reader.

In HTML, the hreflang attribute on an a element is supposed to indicate the language of the document at the other end of the link. Note that the HTML spec says that hreflang information should not be used by the browser to affect the choice of language version. When fetching the resource, browsers must use only language information associated with the resource to determine its language, not metadata included in the link to the resource.

Taking into account the pros and cons mentioned earlier, hreflang could provide a means of indicating to the reader the language of the resource at the end of the link for simple cases. However, there are also significant problems.

For instance, if a resource is available in multiple languages via server-side content negotiation, it is not possible to express the range of languages that are available, since the hreflang attribute accepts only a single language as its value.

Implementation details

Here is an example of how hreflang has been used in the past. The following content has a link that points to a page in Swedish.

There is also a page describing why a DOCTYPE is useful^[sv].

You could achieve this with the following markup:

<p>There is also a page describing <a href="swedish-doc.html" hreflang="sv">why a DOCTYPE is useful</a>.</p>

The code to enable this in CSS may be something like:

a[hreflang]:after { 
    content: " [" attr(hreflang) "]"; 
    color: #999;
    vertical-align: super;
    font-size: 70%;
    }

See live demo.

For each a element with an hreflang attribute, the CSS adds the value of that attribute in square parentheses after the link.

You could just as easily append text or even a graphic after the link by associating it with the content property, rather than the attr(hreflang). This might be better if you are not sure that readers will recognize the ISO abbreviations.

Here is the CSS. You would need style rules for each language you are dealing with.

a[hreflang]:after { 
    color: #999;
    vertical-align: super;
    font-size: 70%;
    }
a[hreflang = 'sv']:after { 
    content: " [Swedish]"; 
    }
a[hreflang = 'fi']:after { 
    content: " [Finnish]"; 
    } 
etc.

See live demo.

For Swedish, the displayed result would be:

There is also a page describing why a DOCTYPE is useful^[Swedish].

Don't use flags to indicate languages!

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 well onto these permutations.

In addition, flags have nationalistic connotations that may be unwelcome for people of other countries, even though they speak the same language.

While flags can be very appropriate for sites that are distinguished on the basis of region (eg. the amazon.co.uk site vs. the amazon.ca site), you should normally avoid them when dealing with links to pages that are just translations.