Le Sélecteur d’apparence laisse chaque visiteur choisir le mode clair ou sombre, le Sélecteur d’animations réduire les animations du site. Cette page décrit leurs réglages, l’habillage de leur option, l’effet du choix et leur comportement au clavier.
Ajouter le bloc
Les deux réglages ont chacun leur bloc :
| Bloc | Options, dans l’ordre | Icônes |
|---|---|---|
| Sélecteur d’apparence | Système, le réglage du système du visiteur. Clair, toujours le mode clair. Sombre, toujours le mode sombre. | Un écran, un soleil et une lune |
| Sélecteur d’animations | Système, le réglage du système du visiteur. Réduites, les animations réduites. | Un écran et un symbole pause |
Insérez-les (Ajouter un bloc), ou tapez mode sombre ou animation dans la recherche des blocs. Posez-les dans l’en-tête ou le pied de page du site pour qu’ils soient sur toutes les pages (Écrire une fois l’en-tête, le menu et le pied de page).
Le choix du visiteur vaut pour toutes les pages du site, jusqu’à ce qu’il en change. Système est l’option retenue tant qu’il n’a rien choisi. Le sélecteur d’animations ne propose pas d’imposer les animations à un visiteur qui les a réduites dans son système.
Régler le sélecteur
Sélectionnez le sélecteur, onglet Réglages, panneau Sélecteur d’apparence ou Sélecteur d’animations.
| Réglage | Effet | Valeur par défaut |
|---|---|---|
| Afficher | Son icône, Son nom ou Son icône et son nom. Quoi qu’il soit affiché, un lecteur d’écran annonce chaque option par son nom. | Son icône |
Le nom des options s’écrit dans la langue de la page. Sur le sélecteur d’animations, l’aide du réglage rappelle qu’un choix recharge la page une fois.
La disposition se règle dans le panneau Mise en page flex : le sens, l’alignement et l’écart entre les options. Le bloc arrive dessiné en pilule par son style enregistré, Sélecteur d’apparence ou Sélecteur d’animations. Ce style pose une bordure fine, des coins tout ronds, 2 px d’espace intérieur et 2 px entre deux options. Un cran choisi sur le curseur Écart remplace cet écart ; ramené à 0, il rend les 2 px du style.
Habiller l’option
L’apparence se règle sur l’option. Chaque sélecteur contient un seul bloc Option de préférence, à partir duquel toutes ses options sont dessinées. Vous ne pouvez pas en ajouter un second.
| État | Habille |
|---|---|
| Par défaut | Une option que le visiteur peut choisir. |
| Survol | L’option sous le pointeur. |
| Focus | L’option atteinte au clavier. |
| Actif | L’option que le visiteur a retenue. |
L’option porte le style enregistré Option de préférence : le pointeur en forme de main et des coins tout ronds. Son espace intérieur est de 4 px en haut et en bas et de 8 px sur les côtés. L’option retenue est posée sur un fond léger et en gras.
Dans l’éditeur, le sélecteur s’affiche avec toutes ses options, nommées dans la langue de votre éditeur. Système y est retenue, dans son état Actif : c’est l’option que vous réglez. Un clic sur une autre option la sélectionne.
Pour réunir les deux sélecteurs, posez-les dans un même Conteneur en rangée et réglez l’écart entre eux sur ce conteneur. Chaque sélecteur garde sa pilule.
L’effet du choix
| Option | Effet |
|---|---|
| Clair ou Sombre | Toute la page passe dans ce mode sans rechargement. Cela touche son fond et son texte, la valeur sombre de vos couleurs et les couleurs des blocs réglées avec Mode clair / sombre. Un bloc dont la couleur n’a pas de variante sombre la garde dans les deux modes. |
| Réduites | Le site se comporte comme si le système du visiteur demandait moins de mouvement. Les apparitions s’affichent d’emblée et rien ne suit le pointeur ni le défilement. Un carrousel ne défile plus seul et un diaporama qui a une navigation ne tourne plus. Une vidéo d’ambiance reste sur son image et les icônes animées se figent. La page se recharge une fois. |
| Système | Le site suit de nouveau le réglage du système du visiteur. |
- Un visiteur connecté à un compte du site retrouve son choix sur tous ses appareils. Un visiteur sans compte le garde le temps de sa visite, sur l’appareil où il l’a fait.
- Chaque page est servie avec le choix déjà appliqué : un visiteur en mode sombre ne voit pas la page passer par le clair.
- Le site garde le choix dans la session qu’il ouvre pour chaque visite. Il n’ajoute aucun cookie et ne transmet rien à un tiers. Votre bandeau de consentement n’a pas à le proposer (Régler le bandeau de consentement).
- Le choix peut ne pas être enregistré, sur une page restée ouverte plus d’une journée par exemple. Il ne vaut alors que pour la page en cours et un message le dit au visiteur.
Sur téléphone
Le sélecteur garde la largeur de son contenu. Réglé sur Son icône, il prend le moins de place : c’est le réglage d’un en-tête de téléphone.
Accessibilité
- Le sélecteur se parcourt au clavier comme un groupe de boutons radio : une seule tabulation l’atteint, sur l’option retenue, puis les flèches changent de choix. Une touche maintenue n’avance que d’une option.
- Sur le sélecteur d’animations, les flèches passent d’une option à l’autre sans choisir :
EspaceouEntréechoisit et recharge la page. Après le rechargement, le focus revient sur l’option retenue. Un lecteur d’écran annonce avant le choix que l’option recharge la page. - Un lecteur d’écran annonce le groupe, Apparence ou Animations, puis chaque option et celle qui est cochée.
- Sans JavaScript, le sélecteur affiche l’option retenue mais ne permet pas d’en changer.