Le bloc Sélecteur de langue permet à vos visiteurs de passer d’une langue à l’autre. Chaque entrée mène à la version de la page lue dans sa langue. Cette page décrit ses réglages, l’habillage de l’entrée, la présentation dans un menu et le cas d’une traduction absente.
Ajouter le bloc
Insérez le bloc Sélecteur de langue (Ajouter un bloc), ou tapez langue dans la recherche des blocs. Posez-le dans l’en-tête ou le pied de page du site pour qu’il soit sur toutes les pages (Écrire une fois l’en-tête, le menu et le pied de page).
Le bloc liste les langues de contenu du site, dans l’ordre de l’écran des langues. Chaque entrée mène à la version de la page que le visiteur lit. Un lecteur d’un article anglais qui choisit « Français » reçoit ce même article en français.
Régler le sélecteur
Sélectionnez le bloc Sélecteur de langue, onglet Réglages, panneau Sélecteur de langue.
| Réglage | Effet | Valeur par défaut |
|---|---|---|
| Nom de la région | En haut de l’onglet Réglages, le nom que les lecteurs d’écran annoncent pour le sélecteur. Vide, il s’appelle Langue. | Vide |
| Afficher | Le nom de la langue (Français, English) ou Le code court (FR, EN). | Le nom de la langue (Français, English) |
| Affichage des langues | Côte à côte : toutes les langues en rangée. Dans un menu : un bouton qui nomme la langue de la page ouvre la liste de toutes les langues. | Côte à côte |
Sur la page publiée, chaque langue est écrite dans sa propre langue, avec une majuscule : l’allemand s’affiche « Deutsch ». Un visiteur reconnaît ainsi sa langue sans lire la vôtre.
La disposition se règle dans le panneau Mise en page flex : le sens, l’alignement et l’écart entre les langues. Le style enregistré Sélecteur de langue pose 8 px entre deux langues. Un cran choisi sur le curseur Écart remplace cet écart ; ramené à 0, le curseur rend les 8 px du style. Pour supprimer l’écart, retirez le style.
Habiller l’entrée de langue
L’apparence se règle sur l’entrée. Le sélecteur contient un seul bloc Entrée de langue, à partir duquel chaque langue est dessinée. Vous ne pouvez pas en ajouter un second.
| État | Habille |
|---|---|
| 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. |
L’entrée porte le style enregistré Entrée de langue : un texte un peu plus petit, sans soulignement au repos, souligné au survol et au focus. La langue de la page est en couleur principale et en gras.
Dans l’éditeur, le sélecteur s’affiche comme sur la page : la langue de la page d’abord, dans son état Actif, puis les autres. Un clic sur l’une d’elles sélectionne l’entrée. Sur un site d’une seule langue, l’éditeur montre la vôtre et deux exemples pris parmi English, Français et Español.
Présenter les langues dans un menu
Avec Dans un menu, le sélecteur montre un bouton qui nomme la langue de la page. Un clic, ou Entrée au clavier, ouvre la liste de toutes les langues. Cette présentation convient à un en-tête chargé ou à un pied de page.
| Bloc | Rôle | Réglages |
|---|---|---|
| Entrée de langue | Chaque langue de la liste. | L’onglet Styles, avec l’état Actif pour la langue de la page. |
| Bouton du menu de langue | Le bouton qui nomme la langue de la page et ouvre la liste. | L’onglet Styles, ses icônes et ses animations. Ses états sont Par défaut, Survol, Focus et Actif, celui du menu ouvert. |
| Menu de langue | La surface sur laquelle la liste s’ouvre. | L’onglet Styles et la disposition Mise en page flex. |
- Le bouton arrive avec une flèche vers le bas à la fin, qui devient une flèche vers le haut à l’état Actif. Ses icônes se règlent dans le panneau Icônes de l’onglet Styles, comme sur un Bouton : une au début, une à la fin, chacune par état.
- Le bouton porte le style Bouton du menu de langue : un texte un peu plus petit, de l’espace intérieur et des coins arrondis. Il prend un fond léger au survol, au focus et menu ouvert.
- Le menu porte le style Menu de langue : un fond clair et un texte sombre, l’inverse en mode sombre. Il a des coins arrondis, une ombre et range les langues en colonne.
- En présentation Côte à côte, le bouton et le menu ne s’affichent pas. Leur habillage est gardé pour le jour où vous repassez en menu.
Le menu s’ouvre sous le bouton. En bas de page, sans place dessous, il s’ouvre vers le haut ; au bord droit de l’écran, vers l’intérieur. Il se referme par un second clic, un clic ailleurs dans la page, la touche Échap ou quand le focus le quitte. Il ne s’ouvre jamais au survol.
Quand une traduction manque
- Une langue dans laquelle la page n’existe pas reste dans la liste. Son entrée mène à l’accueil de cette langue.
- Une traduction en brouillon ne compte pas : tant qu’elle n’est pas publiée, l’entrée de sa langue mène à l’accueil.
- Sur une page qui n’est pas un contenu, toutes les entrées mènent à l’accueil de leur langue. C’est le cas de l’accueil, d’une liste, d’une page de résultats de recherche ou d’une page d’erreur.
La liste montre toujours toutes les langues, celle de la page comprise. Le visiteur sait ainsi dans quelle langue il lit.
Sur téléphone
Côte à côte, les langues suivent la disposition du panneau Mise en page flex, écran par écran. Dans un en-tête de téléphone, Dans un menu ne prend que la place d’un bouton, quel que soit le nombre de langues.
Accessibilité
- Chaque lien déclare la langue de sa destination : un lecteur d’écran prononce « English » à l’anglaise.
- La langue de la page est signalée à l’écran et aux technologies d’assistance.
- Le sélecteur est annoncé comme une zone de navigation nommée Langue. Si la page a deux sélecteurs, donnez à chacun un Nom de la région.
- Dans un menu, le bouton est un vrai bouton : il s’atteint au clavier, s’actionne avec
EntréeouEspaceet dit si la liste est ouverte.Échapreferme la liste et rend le focus au bouton.
Un visiteur qui ne sait pas que votre page existe dans sa langue ne cherche pas de sélecteur. Le bloc Suggestion de langue lui propose cette page dans sa langue.