语言切换器的语义标记

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,您可能会包含国旗.你不应该这样做.它们象征着国家,而不是语言.

如果你喜欢,你可以使用的一个语言图标(另见旧版本).

放置

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

但我要说它应该放在后的skiplink(尤其是如果有很多译本),作为skiplink正好具有这个职位:略过,我不想重复每一页的内容.

标记

使用nav元素.你可以给它一个明确的标题(这更像是一个可用性问题),但你不必这样做; 如果你不提供一个,这个分区元素将在大纲中无标题.

这nav可能,但不一定是body- 的孩子header.

使用ul里面nav是合适的.

使用rel- alternate和hreflang链接,因为它表明这些是翻译的链接:

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

使用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>