What is the correct semantics for language switching navigation?

Question

I am coding a multilingual site and I have following navigation:

 <nav id="language">
    <ul>
      <li><a href="/en/" hreflang="en">en</a></li>
      <li><a href="/de/" hreflang="de">de</a></li>
      <li>fr</li>
    </ul>
    </nav>

Can I improve semantics? With Microdata or tags attributes e.g

Answer 1

abbr elements

You should add abbr, giving the full language name in the corresponding language:

<nav id="language">
  <ul>
    <li><a href="/en/" hreflang="en"><abbr lang="en" title="English">en</abbr></a></li>
    <li><a href="/de/" hreflang="de"><abbr lang="de" title="Deutsch">de</abbr></a></li>
    <li><abbr lang="fr" title="Français">fr</abbr></li>
  </ul>
</nav>

title attribute for a

You could add a title attribute to a with a content like: "Switch to the English translation of this page"

heading for nav

You could give this nav section a heading like "Translations of this page" (for the English page).

If you don't want it to be visible on the page, hide it visually so that it is still read to screenreader users (e.g. with the clip method).

(If you provide such a heading, you probably don't need the title attribute on a anymore.)

additionally: link element (in head)

For bots, you could link the translations with link elements in the head of your pages:

<link rel="alternate" href="/de/" hreflang="de" />
<link rel="alternate" href="/en/" hreflang="en" />

Answer 2

I think perhaps changing en to Change site language to English would improve semantics. As it stands en is pretty cryptic without the context.