语言切换器的语义标记化

Question

语言切换器的语义标记化

10

您将使用哪种标记来创建一个语言切换器元素？
它应该放在 <header> 和 .skiplink 之前吗？
它是否应该有标题？
有什么现成的例子可以看吗？

以下是我目前正在使用的：

 <header>
        <div><a href="#content" class="skiplink">Skip to content</a></div>
        <h1>
            <a href="/">Site Name - the best site</a>                      
        </h1>
        </header>

                <ul class="langSwitch">
<li class="langPl"><img src="/gfx/pl.png" alt="Polski" /></li>
<li class="langEn"><a rel="nofollow" href="/en" hreflang="en" lang="en" xml:lang="en"><img src="/gfx/en.png" alt="English" /></a></li>
<li class="langDe"><a rel="nofollow" href="/de" hreflang="de" lang="de" xml:lang="de"><img src="/gfx/de.png" alt="Deutsch" /></a></li>

- Sfisioza

1

你可以在这里看一下：http://stackoverflow.com/questions/31652346/html5-should-hreflang-always-point-to-a-direct-translation，我问了类似的问题，这个链接将来可能会有用。 - Jacek Kowalewski

1个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- unor · Accepted Answer

内容

和你已经在做的一样，应该使用对应目标语言的语言名称，而不是当前语言。

如果你正在使用 img，那么很可能你正在包含国旗。你不应该这样做。它们象征着国家而不是语言。

如果你想的话，可以使用语言图标（也可以参见旧版本）。

位置

它应该放在靠近页面顶部的地方，这样文本浏览器和屏幕阅读器就不需要跨越外语内容来到达语言切换器，或者知道有翻译。

但我认为它应该放在跳转链接之后（特别是如果有许多翻译），因为跳转链接正好具有此功能：跳过我不想在每个页面中重复的内容。

标记

使用nav元素。你可以给它一个显式的标题（这更多是关于可用性的问题），但你不必；如果你不提供标题，这个分区元素在大纲中将没有标题。

这个nav可以是，但不一定是body-header的子元素。

在nav中使用ul是合适的。

使用rel-alternate和hreflang来表示这些链接是翻译链接：

如果使用了alternate关键字，并且该属性的值与根元素的语言不同，则表示引用的文档是翻译文档。

对于这样的链接，使用nofollow是不寻常的。

如果你使用HTML5（而不是XHTML5），你可以省略xml:lang属性（在HTML5中它没有任何效果；只有为了“简化迁移”才允许）。

例子

<nav>
  <h1>Translations of this page</h1> <!-- could be omitted → usability question -->
  <ul>
    <li>English</li> <!-- could be omitted → usability question -->
    <li><a rel="alternate" href="/pl" hreflang="pl" lang="pl">Polski</a></li>
    <li><a rel="alternate" href="/de" hreflang="de" lang="de">Deutsch</a></li>
  </ul>
</nav>