html - 语言切换导航的正确语义是什么？

Question

我正在编写一个多语言网站，我有以下导航:

 <nav id="language">
    <ul>
      <li><a href="/en/" hreflang="en">en</a></li>
      <li><a href="/de/" hreflang="de">de</a></li>
      <li>fr</li>
    </ul>
    </nav>

我可以改进语义吗？使用微数据或标签属性，例如

Answer 1

abbr 元素

您应该添加abbr，以相应的语言给出完整的语言名称:

<nav id="language">
  <ul>
    <li><a href="/en/" hreflang="en"><abbr lang="en" title="English">en</abbr></a></li>
    <li><a href="/de/" hreflang="de"><abbr lang="de" title="Deutsch">de</abbr></a></li>
    <li><abbr lang="fr" title="Français">fr</abbr></li>
  </ul>
</nav>

a 的

title 属性

您可以将 title 属性添加到 a，内容如下:“切换到此页面的英文翻译”

前往nav

你可以给这个 nav 部分一个标题，比如“Translations of this page”(英文页面)。

如果您不希望它在页面上可见，请在视觉上隐藏它，以便屏幕阅读器用户仍能阅读它(例如使用 clip 方法)。

(如果您提供这样的标题，您可能不再需要 a 上的 title 属性。)

另外:link元素(在head中)

对于机器人，您可以将翻译与页面的 head 中的 link 元素链接起来:

<link rel="alternate" href="/de/" hreflang="de" />
<link rel="alternate" href="/en/" hreflang="en" />