HTML 语言切换器的可访问性

HTML language switcher accessibility

是否有任何 aria-something 或角色可以添加到语言切换中 link? 例如,我在页脚中放了两个 link 来更改当前语言。

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

我有任何语义标签可以添加到这个 link 吗?

示例:

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

有关详细信息,请参阅 https://www.nomensa.com/blog/2010/7-tips-for-multi-lingual-website-accessibility

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.

不确定您的代码的其余部分是什么,但是如果您在这些 link 之前没有任何像 Choose language 这样的文本,那么建议为每个 link 描述 link 正在做什么,例如:

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

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

一条建议:使用语言的全名而不是首字母可以帮助在自动翻译开启的用户的情况下清楚地传达语言是什么。查看 this article 了解更多。