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

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>

title 属性 a

您可以使用以下内容添加title属性a:"切换到此页面的英文翻译"

往...去 nav

您可以将此nav部分标题为"此页面的翻译"(英文页面).

如果您不希望它在页面上可见,请以可视方式隐藏它,以便仍然可以读取屏幕阅读器用户(例如,使用该clip方法).

(如果您提供此类标题,则可能不再需要该title属性a.)

另外:link元素(in head)

对于机器人,您可以将翻译链接到页面link中的元素head:

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