Bug #54696
a11y: avoir une couleur de fond contrastée pour les liens du nav-skip
0%
Description
Il s'agit des liens "Aller au contenu" et "Aller au menu" qui ont la couleur par défaut des tous les liens (#666), mais celle-ci ne fait pas assez contraste avec la bordure rouge.
Fichiers
Révisions associées
grandlyon-glc: change nav links color to have more contrast (#54696)
Historique
Mis à jour par Serghei Mihai il y a presque 3 ans
- Fichier 0001-grandlyon-glc-change-nav-links-color-to-have-more-co.patch 0001-grandlyon-glc-change-nav-links-color-to-have-more-co.patch ajouté
- Statut changé de Nouveau à Solution proposée
- Assigné à mis à Serghei Mihai
- Patch proposed changé de Non à Oui
Mis à jour par Thomas Jund (congés, retour le 29/04) il y a presque 3 ans
- Assigné à changé de Serghei Mihai à Benjamin Dauvergne
Je me demande si plutôt que de specifier un couleur pour le thème GLC, il ne serait pas préférable de corriger ce manque de contraste / visilibilté dans le core pour tous les thèmes.
Le bloc skip-nav n'a pas de background. Il se superpose donc systématiquement avec le header, dont potentiellement avec son logo ou son background (qui peut être une image). Impossible de garantir un bon contraste.
Donc je serais d'avis de patcher le problème en appliquant un background à la nav-skip dans le core.
Mis à jour par Serghei Mihai il y a presque 3 ans
- Statut changé de Solution proposée à En cours
- Assigné à changé de Benjamin Dauvergne à Serghei Mihai
Un backouground noir pour nav-skip et les liens blancs?
Mis à jour par Thomas Jund (congés, retour le 29/04) il y a presque 3 ans
Je conserverais les liens "couleur lien" :)
Pour le background, j'ai d'abord pensé à `$body-background` mais cette variable n'est pas specifique à la couleur, elle peut ramener une image.
Alors pour récupérer uniquement la couleur on peut par l'héritage : `background-color; inherit`;
On peut considérer que sauf exeption, le contrast body background color / link-color est fait pour fonctionner.
J'ai aussi pensé à la fonction sass `text-color($color)̀ qu'on a dans `_utils.scss`, elle donnera un background noir ou blanc en fonction de la luminosité de la couleur du lien.
Et enfin, si on veut être certain d'un contraste minimum, on peut tester ça avec Sass et retourner un @warn si le contraste est insuffisant.
Mis à jour par Serghei Mihai il y a presque 3 ans
Thomas Jund a écrit :
J'ai aussi pensé à la fonction sass `text-color($color)̀ qu'on a dans `_utils.scss`, elle donnera un background noir ou blanc en fonction de la luminosité de la couleur du lien.
En faisant quelques essais je me dis que $cell-background pourrait convenir car elle est toujours contrastée avec la couleur des liens.
Mis à jour par Serghei Mihai il y a presque 3 ans
- Fichier 0001-a11y-use-cell-background-for-nav-skip-links-54696.patch 0001-a11y-use-cell-background-for-nav-skip-links-54696.patch ajouté
- Sujet changé de grandlyon-glc: avoir une couleur plus contrastée pour les liens du nav-skip à a11y: avoir une couleur de fond contrastée pour les liens du nav-skip
- Statut changé de En cours à Solution proposée
En rajoutant aussi un petit padding aux liens.
Testé sur quelques intégrations en local et cela me semble bien.
Mis à jour par Serghei Mihai il y a presque 3 ans
Mis à jour par Thomas Jund (congés, retour le 29/04) il y a presque 3 ans
- Statut changé de Solution proposée à Solution validée
Partons là-dessus (j'aurais eu une préférence pour le padding en em :) )
Mis à jour par Serghei Mihai il y a presque 3 ans
- Statut changé de Solution validée à Résolu (à déployer)
commit 552dae9300a1ffc6b4ab0bf2ffb08cc576880779 (origin/main)
Author: Serghei Mihai <smihai@entrouvert.com>
Date: Wed Jun 9 14:57:20 2021 +0200
a11y: use cell background for nav skip links (#54696)
And thus be sure there is enough contrast between background and link color.
Mis à jour par Frédéric Péters il y a presque 3 ans
- Statut changé de Résolu (à déployer) à Solution déployée
a11y: use cell background for nav skip links (#54696)
And thus be sure there is enough contrast between background and link color.