Sélecteur de langue

Le sélecteur de langue est la paire EN / FR à l’extrémité droite de l’en-tête du site. Chaque option est un simple lien vers la page courante dans cette langue, et la langue active est mise en évidence. Il occupe le même endroit visible sur chaque page — en haut à droite, à côté de la recherche — pour que la lectrice ou le lecteur sache toujours où changer de langue.

Quand l’utiliser#

• Une seule instance, rendue par l’en-tête du site sur chaque page; les pages et les gabarits n’ajoutent jamais la leur
• Deux langues, deux liens — une paire de liens est plus petite et plus claire qu’un menu déroulant ou un groupe de boutons radio, et chaque option nomme directement sa langue
• Quand la page courante n’a pas de traduction, l’option mène à la page d’accueil de cette langue plutôt qu’à une erreur 404 ou à un contrôle désactivé — les deux options restent utilisables partout
• Pas pour basculer autre chose que la langue; les autres actions de l’en-tête (recherche, navigation) ont leurs propres composants

Implémentation#

<nav class="language-switcher" aria-label="Langue">
  {{ $page := . }}
  {{ range hugo.Sites }}
    {{ $site := . }}
    {{ $translation := where $page.AllTranslations "Lang" $site.Language.Lang }}
    {{ $href := $site.Home.RelPermalink }}
    {{ with index $translation 0 }}{{ $href = .RelPermalink }}{{ end }}
    <a class="language-link {{ if eq $site.Language.Lang $page.Lang }}language-link-active{{ end }}" href="{{ $href }}"{{ if eq $site.Language.Lang $page.Lang }} aria-current="true"{{ end }}>{{ upper $site.Language.Lang }}</a>
  {{ end }}
</nav>

<nav class="language-switcher" aria-label="Langue">
  <a class="language-link" href="/en/docs/site-implementation/components/language-toggle/">EN</a>
  <a class="language-link language-link-active" href="/fr/docs/site-implementation/components/selecteur-de-langue/" aria-current="true">FR</a>
</nav>

Le sélecteur vit directement dans layouts/partials/header.html, dans le groupe d’actions de l’en-tête, et n’accepte aucune option. Il parcourt hugo.Sites, résout la traduction de la page courante pour chaque langue avec AllTranslations et se rabat sur la page d’accueil de cette langue lorsqu’aucune traduction n’existe. Il n’y a ni JavaScript ni fichier CSS distinct; le style vient des classes .language-switcher, .language-link et .language-link-active dans assets/css/site.css.

Accessibilité#

• Le sélecteur est un point de repère <nav>, localisé par la clé i18n languageSwitcher, pour que les lecteurs d’écran le distinguent de la navigation principale
• Chaque option est un simple lien dont le texte nomme la langue (EN, FR) — les lecteurs d’écran identifient chaque option par le texte du lien; c’est une nav de liens, pas un groupe de boutons radio, donc aucun role ni aria-checked n’entre en jeu
• Le lien de la langue active porte aria-current="true" en plus de la classe language-link-active, pour que la langue courante soit annoncée et pas seulement stylée
• Clavier : Tab atteint chaque lien et Entrée le suit — pas de JavaScript, pas de gestion de touches particulière
• Évitez de pointer une option vers une erreur 404 ou de la désactiver lorsqu’aucune traduction n’existe; le repli vers la page d’accueil de la langue garde les deux options toujours utilisables