Semantic markup for language switcher

Question

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

Answer 1

Content

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

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

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

Placement

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.

Markup

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.

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

Using ul inside of nav is appropriate.

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

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.

Using nofollow is unusual for such links.

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").

Example

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