HTML 语言切换器可访问性

Question

在语言切换链接中是否有任何 aria-something 或角色要添加？ 例如，我在页脚中放置了两个链接来更改当前语言。

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

我有任何语义标签要添加到这个链接吗？

Answer 1

例：

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

有关更多信息，请参见https://www.nomensa.com/blog/2010/7-tips-for-multi-lingual-website-accessibility

Answer 2

不确定您的代码的其余部分是什么，但如果您在这些链接之前没有任何文本，例如Choose language ，那么建议为每个链接添加一个 aria-label 来描述链接正在做什么，例如：

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

这样，屏幕阅读器将覆盖链接文本并大声读出 aria-label，这对于盲人用户或有视觉障碍的用户非常有帮助。

一条建议：使用语言的全名而不是首字母可以帮助清楚地传达语言是什么，以防用户打开自动翻译。 查看 这篇文章了解更多。