语言切换器的语义标记

Question

• 您将使用哪种标记用于语言切换器元素？
• 是否应该放在<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>

Answer 1

内容

正如您所做的那样，您应该使用相应的目标语言提供语言名称，而不是使用当前语言。

当您使用img时，您可能会包含国旗。你shouldn’t do that。它们象征着国家，而不是语言。

如果您愿意，可以使用 a Language Icon（另请参阅old version）。

展示位置

它应该放在顶部附近，这样文本浏览器和屏幕阅读器浏览器就不必通过外语内容来到达语言切换器了。要知道首先有翻译。

但是我会说它应该在跳过链接后放置（特别是如果有很多翻译），因为跳过链接正是这个工作：跳过我不想要的内容每页重复一次。

标记

使用nav element。你可以给它一个明确的标题（这更像是一个可用性问题），但你不必这样做;如果你不提供，那么这个分区元素将在大纲中无标题。

此nav可能（但不一定是）body - header的孩子。

在ul内使用nav是合适的。

使用rel-alternate and hreflang作为链接，因为它表明这些是指向翻译的链接：

  

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

使用nofollow对于此类链接不常见。

如果您使用HTML5（不是XHTML5），you could omit the xml:lang attribute（它在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>