HTML language switcher accessibility

Question

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 ?

Answer 1

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

Answer 2

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.