La détection automatique de prefers-reduced-motion a déjà été traitée sur ce blog : elle permet de respecter le réglage système du visiteur dès son arrivée. Mais tous les visiteurs ne configurent pas ce réglage au niveau de leur système d’exploitation, et certains veulent pouvoir ajuster le contraste ou les animations directement depuis le site, sans toucher aux paramètres globaux de leur ordinateur.
Ce billet propose une solution complémentaire : un panneau de préférences visible sur le site, dont le choix du visiteur est mémorisé et respecté à chaque nouvelle visite, y compris quand il diffère du réglage système détecté.
Le problème à résoudre
Un visiteur peut vouloir des animations réduites sur ce site précis sans avoir désactivé les animations sur l’ensemble de son système, par exemple parce qu’il sait que ce site en particulier utilise des transitions trop rapides à son goût. Se reposer uniquement sur la préférence système ne couvre donc pas tous les cas d’usage.
Le panneau de préférences
Un bouton discret, accessible depuis le pied de page et le menu principal, ouvre un panneau avec deux réglages indépendants : contraste renforcé et mouvement réduit. Ce panneau reste un composant interactif classique, avec les mêmes exigences qu’une modale : focus déplacé à l’ouverture, piège à focus actif, fermeture au clavier avec Échap.
Le script de mémorisation
Le choix est stocké dans un cookie de préférence, avec une durée de conservation de trente jours, puis appliqué via une classe posée sur l’élément racine du document :
function definirPreference(nom, valeur) {
document.cookie = nom + '=' + valeur + ';path=/;max-age=' + (30 * 24 * 60 * 60);
document.documentElement.classList.toggle('preference-' + nom, valeur === 'actif');
}
function lirePreference(nom) {
var correspondance = document.cookie.match(new RegExp('(^| )' + nom + '=([^;]+)'));
return correspondance ? correspondance[2] : null;
}
document.addEventListener('DOMContentLoaded', function () {
['contraste-renforce', 'mouvement-reduit'].forEach(function (nom) {
var valeur = lirePreference(nom);
if (valeur) {
document.documentElement.classList.toggle('preference-' + nom, valeur === 'actif');
}
});
});
L’ordre de priorité entre système et choix manuel
La préférence système détectée via prefers-reduced-motion reste appliquée par défaut, mais un choix manuel enregistré dans le cookie doit toujours pouvoir la surclasser, dans les deux sens : un visiteur qui a réduit les animations au niveau système, mais qui active manuellement les animations complètes sur ce site précis, voit son choix manuel respecté.
@media (prefers-reduced-motion: reduce) {
* { animation-duration: 0.01ms !important; }
}
html.preference-mouvement-reduit * {
animation-duration: 0.01ms !important;
}
html.preference-mouvement-reduit.preference-mouvement-reduit-desactive * {
animation-duration: revert !important;
}
Appliquer le contraste renforcé sans dupliquer toute la feuille de style
Plutôt que de dupliquer chaque règle de couleur, la classe de contraste renforcé surcharge uniquement les variables CSS de couleur définies au niveau racine, ce qui propage le changement à l’ensemble des composants sans réécrire leurs styles individuels.
Rendre le panneau lui-même accessible
Un panneau de préférences d’accessibilité qui serait lui-même inaccessible au clavier serait une contradiction difficile à défendre devant un client. Chaque case à cocher du panneau est un vrai <input type="checkbox"> avec son <label> associé, et l’état appliqué est confirmé par un message annoncé dans une zone aria-live="polite".
Variante côté serveur pour les visiteurs sans JavaScript
Pour les visiteurs qui naviguent sans JavaScript actif, une variante du panneau repose sur un formulaire classique soumis en POST, qui pose le même cookie côté serveur via PHP avant de recharger la page avec les classes déjà appliquées au premier rendu, évitant tout effet de clignotement visuel au chargement.
Un réglage de confort qui s’oublie à chaque visite finit par ne plus être utilisé du tout. La mémorisation n’est pas un détail technique, c’est ce qui rend le réglage utile dans la durée.
En résumé
Mémoriser les préférences de contraste et de mouvement d’un visiteur va au-delà de la simple détection de prefers-reduced-motion : cela suppose un panneau de réglage manuel, un stockage persistant qui survit à la navigation, une priorité claire entre réglage système et choix explicite, et un panneau lui-même parfaitement utilisable au clavier.
