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

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>

我能通过使用Microdata或标签属性来改善语义吗？

- mica

---

我会使用带有<kbd>的链接。至于微数据，可以在schema.org上搜索适合的内容。 - nice ass

我不会使用<nav>，因为其中包含的链接并不是真正的“主要导航”，而更适合<menu>元素，但遗憾的是它并没有得到完全支持。 - Ian Devlin

@OneTrickPony：你到底为什么要在这里使用 kbd？ - unor

@IanDevlin：请注意，“主要导航”这个注释只是一个注释。我认为在这里使用nav是完全可以的（而且有用！）。它符合“页面上链接到其他页面或页面内部部分的部分”的定义，我也认为它是主要的，因为这是导航到翻译的主要/唯一方式。 - unor

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属性

你可以添加一个类似于“切换到该页面的英语版本”的内容到a的title属性中。

nav的标题

你可以给这个nav部分一个标题，比如“此页面的翻译”（对于英文页面）。

如果你不希望它在页面上可见，可以视觉上隐藏它，以便屏幕阅读器用户仍然可以阅读它（例如使用clip方法）。

（如果你提供了这样的标题，可能就不再需要a的title属性了。）

另外：在head中添加link元素

对于机器人，你可以在页面的head中使用link元素将翻译链接起来：

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

- unor

---

请注意，您可以直接提交站点地图而不是放置链接元素。https://support.google.com/webmasters/answer/189077?hl=en - dayuloli

Answer 2

您应该在链接上添加lang和hreflang属性，目标值是IETF语言标签（bcp47），请参考维基百科有关水的文章中指向其他语言版本的链接：

<a lang="de" hreflang="de" title="Wasser" href="//de.wikipedia.org/wiki/Wasser">Deutsch</a>

注意：lang属性与链接无关。它指定标签内容的语言（维基百科也把它放在标签和

头标签中）。而hreflang属性则指定所链接页面的语言。

- kr1

Answer 3

我认为将en更改为更改网站语言为英语可能会提高语义学。目前，没有上下文的情况下，en还是相当晦涩难懂的。

- Jonas G. Drange