语言切换器的语义标记 [英] Semantic markup for language switcher

问题描述

• 您将使用哪种标记用于语言切换器元素？


• 是否应该放在< header> 和 .skiplink 之前？


• 它是否应该加上标题？


• 是否有实际的例子？

• Which markup would you use for a language switcher element?
• Should it be placed before <header> and .skiplink?
• Should it be prepended with heading?
• Any live examples?

以下是我现在使用的内容：

Here is what I'm using now:

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

推荐答案

Content

您已经这样做了，您应该使用相应的目标语言给出语言名称，而不是使用当前语言。

Content

As you already do, you should give the language names in the corresponding target languages, not in the current language.

当您使用 img 时，很可能您包含国旗。您不应该这样做。它们象征国家，而不是语言。

As you use img, it’s likely that you are including national flags. You shouldn’t do that. They symbolize countries, not languages.

如果你喜欢，你可以使用 a 语言图标（另请参阅旧版本）。

If you like, you could use the a Language Icon (see also the old version).

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

It should be placed near the top, so that text browser and screen reader browsers don’t have to fight through foreign language content to reach the language switcher, resp. to know that there are translations in the first place.

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

But I’d say it should be placed after the skiplink (especially if there are many translations), as the skiplink has exactly this job: skip over content that I don’t want to be repeated for every page.

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

Use the nav element. You could give it an explicit heading (this is more a usability question), but you don’t have to; if you don’t provide one, this sectioning element will be untitled in the outline.

这个 nav 但不一定是正文的孩子 - 标题。

This nav may, but doesn’t have to be, a child of the body-header.

在 nav 内使用 ul 是合适的。

使用 rel - alternate 和 hreflang ，因为它表明这些是链接翻译：

Use rel-alternate and hreflang for the links, as it indicates that these are links to translations:

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

If the alternate keyword is used with the hreflang attribute, and that attribute's value differs from the root element's language, it indicates that the referenced document is a translation.

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

Using nofollow is unusual for such links.

如果您使用HTML5（不是XHTML5）， xml：lang 属性（它对HTML5没有任何影响;只允许轻松迁移）。

If you use HTML5 (not XHTML5), you could omit the xml:lang attribute (it doesn’t have any effect in HTML5; it’s only to allowed to "ease migration").

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

这篇关于语言切换器的语义标记的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！