Cet article explique comment laisser vos visiteurs changer de langue et proposer à chacun la sienne. Vous saurez poser un sélecteur de langue dans votre en-tête et un bandeau qui suggère la bonne version d’une page.
Avant de commencer
- Votre site doit avoir au moins deux langues de contenu et vos pages leurs traductions liées. Traduire une page explique comment les lier.
- Votre site ne redirige jamais un visiteur vers une langue d’office. Il lui propose sa langue et le visiteur choisit.
- Deux blocs s’en chargent. Le Sélecteur de langue sert le visiteur qui veut changer de langue. La Suggestion de langue prévient celui qui ne sait pas que la page existe dans la sienne.
Sur un site d’une seule langue, les deux blocs n’affichent rien sur la page. Dans l’éditeur, leurs réglages affichent Ce bloc apparaît dès que le site a au moins deux langues de contenu. Ajoutez-en une dans Langues, puis revenez. Vous pouvez les poser avant d’ajouter votre deuxième langue.
Poser un sélecteur de langue
Pour que le sélecteur figure sur chaque page qui affiche votre en-tête, posez-le dans cet en-tête.
- Dans le menu de l’administration, ouvrez Gabarits > Compositions, puis votre en-tête.
- Ajoutez le bloc Sélecteur de langue à l’endroit voulu. Ajouter un bloc explique comment.
- Dans l’onglet Réglages, panneau Sélecteur de langue, choisissez ce que montre chaque langue et comment les langues se présentent.
- Dans le bloc, sélectionnez l’Entrée de langue.
- Réglez son apparence dans l’onglet Styles.
- Publiez l’en-tête.
| Réglage | Choix | Valeur par défaut |
|---|---|---|
| Afficher | Le nom de la langue (Français, English) ou Le code court (FR, EN). | Le nom de la langue |
| Affichage des langues | Avec Côte à côte, toutes les langues sont en rangée. Avec Dans un menu, un bouton nomme la langue de la page et ouvre la liste. | Côte à côte |
Chaque langue s’écrit dans sa propre langue avec une majuscule, par exemple « Deutsch » pour l’allemand. Un visiteur reconnaît ainsi la sienne sans lire la vôtre. Les langues suivent l’ordre du tableau des langues.
Régler l’apparence des langues
Toutes les langues sont dessinées à partir d’une seule Entrée de langue : vous réglez l’apparence une fois. L’onglet Styles de l’entrée a quatre états.
| État | Langue habillée |
|---|---|
| Par défaut | Une langue que le visiteur peut choisir. |
| Survol | La langue sous le pointeur. |
| Focus | La langue atteinte au clavier. |
| Actif | La langue de la page en cours. |
Le sélecteur arrive avec un texte un peu plus petit et un soulignement au survol et au focus. La langue de la page s’affiche dans votre couleur principale et en gras.
Présenter les langues dans un menu
Avec Dans un menu, un bouton nomme la langue de la page. Un clic ou la touche Entrée ouvre la liste de toutes les langues. Cette présentation convient à un pied de page ou à un en-tête chargé.
| Élément | Réglages |
|---|---|
| Entrée de langue | L’apparence de chaque langue de la liste. |
| Bouton du menu de langue | L’apparence du bouton et ses icônes, dans le panneau Icônes. L’état Actif habille le bouton menu ouvert. |
| Menu de langue | L’apparence de la surface qui s’ouvre et la disposition des langues. |
Le bouton arrive avec une flèche vers le bas. Menu ouvert, elle pointe vers le haut. Le menu s’ouvre sous le bouton ou, en bas de page, vers le haut. Il se ferme par un second clic, un clic ailleurs, la touche Échap ou quand le focus le quitte. Il ne s’ouvre jamais au survol.
Savoir où mène chaque langue
| Page lue | Destination |
|---|---|
| Un contenu traduit et publié dans cette langue | Sa traduction. |
| Un contenu sans traduction publiée dans cette langue | L’accueil de cette langue. |
| L’accueil, une liste, une recherche ou la page 404 | L’accueil de cette langue. |
Une traduction en brouillon ne compte pas : sa langue mène à l’accueil tant qu’elle n’est pas publiée. Chaque lien annonce sa langue aux lecteurs d’écran.
Le sélecteur est annoncé aux lecteurs d’écran comme une zone de navigation nommée Langue. Si une page porte deux sélecteurs, donnez à chacun un nom. Le champ Nom de la région est en haut de l’onglet Réglages.
Proposer la langue du visiteur
Un visiteur qui lit l’anglais arrive de Google sur la version française d’une page qui existe en anglais. Le bloc Suggestion de langue lui affiche dans sa langue un bandeau qui mène à la même page en anglais.
- Ouvrez le gabarit ou la composition qui porte le haut de vos pages.
- Ajoutez le bloc Suggestion de langue en haut, au-dessus ou juste sous l’en-tête. Il n’a aucun réglage.
- Réglez son apparence dans l’onglet Styles, avec les états Par défaut, Survol et Focus.
- Pour ajouter des icônes, choisissez-les dans le panneau Icônes de l’onglet Styles : une au début du bandeau et une à la fin du lien.
- Publiez le gabarit ou la composition.
Dans l’éditeur, le bandeau s’affiche dans votre langue avec une langue d’exemple. Sur votre site, son texte et la langue proposée dépendent de chaque visiteur.
Savoir quand le bandeau s’affiche
Le bandeau ne s’affiche que si toutes ces conditions sont remplies. Sinon, il n’occupe aucune place.
- La page est un contenu qui a une traduction ou l’accueil d’un site de plusieurs langues.
- La traduction est publiée et n’est pas protégée par un mot de passe.
- Le navigateur du visiteur demande une autre langue avant celle de la page.
- Le visiteur n’est pas un robot. Les moteurs de recherche ne reçoivent jamais le bandeau.
La langue proposée est la première de la liste du navigateur qui existe pour la page. Le pays du visiteur ne sert qu’à départager deux variantes d’une même langue, comme l’anglais britannique et l’anglais américain. Une autre variante de la langue de la page n’est jamais proposée.
Le bandeau n’a pas de bouton de fermeture. Quand le visiteur suit le lien, la page est dans sa langue et le bandeau disparaît.
Lire le texte du bandeau
Le bandeau est écrit dans la langue qu’il propose.
| Langue proposée | Texte affiché |
|---|---|
| Anglais | « View this page in your preferred language. » et le lien « Switch to English » |
| Français | « Voir cette page dans votre langue préférée. » et le lien « Passer en français » |
Pour une autre langue, le bandeau reste en anglais tant que vous ne l’avez pas traduit. Seul le nom de la langue s’écrit dans sa langue, par exemple « Switch to Deutsch ». Traduire vos libellés et vos messages explique comment le traduire.