HTML language switcher accessibility

Viewed 6585

Is there any aria-something or a role to add in a language switch link ? For exemple, I put two links in the footer to change the current language.

<a href="/language/switch/fr">Fr</a>
<a href="/language/switch/uk">Uk</a>

I there any semantic tag to add to this links ?

2 Answers

Example:

<a href="/language/switch/fr" lang="fr" hreflang="fr">Fr</a>

See https://www.nomensa.com/blog/2010/7-tips-for-multi-lingual-website-accessibility for more info.

lang attribute doc:

The lang global attribute helps define the language of an element: the language that non-editable elements are written in, or the language that the editable elements should be written in by the user.

hreflang attribute doc:

Hints at the human language of the linked URL. No built-in functionality. Allowed values are the same as the global lang attribute.

Not sure what is the rest of your code but if you don't have any text like Choose language before these links then it is advisable to add an aria-label to each link describing what the link is doing, like:

<a href="/language/switch/fr" aria-label="Visit our perfect site in French">Fr</a>

This way the screen-readers will override the link text and read out loud the aria-label which is very helpful for blind users or users with visual impairments.

A piece of advice: Using the full name of the language instead of the initials can help communicate clearly what the lang is in case of users who have the auto-translate ON. Check this article for more.

Related