Project

General

Profile

Bug #54696

a11y: avoir une couleur de fond contrastée pour les liens du nav-skip

Added by Serghei Mihai 9 days ago. Updated 3 days ago.

Status:
Solution déployée
Priority:
Normal
Assignee:
Target version:
-
Start date:
09 Jun 2021
Due date:
% Done:

0%

Estimated time:
Patch proposed:
Yes
Planning:
No

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.


Files

Associated revisions

Revision 552dae93 (diff)
Added by Serghei Mihai 8 days ago

a11y: use cell background for nav skip links (#54696)

And thus be sure there is enough contrast between background and link color.

Revision 85431078 (diff)
Added by Serghei Mihai 8 days ago

grandlyon-glc: change nav links color to have more contrast (#54696)

History

#2

Updated by Serghei Mihai 9 days ago

#3

Updated by Thomas Jund 9 days ago

  • Assignee changed from Serghei Mihai to 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.

#4

Updated by Serghei Mihai 9 days ago

  • Assignee changed from Benjamin Dauvergne to Serghei Mihai
  • Status changed from Solution proposée to En cours

Un backouground noir pour nav-skip et les liens blancs?

#5

Updated by Thomas Jund 9 days ago

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.

#6

Updated by Serghei Mihai 8 days ago

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.

#7

Updated by Serghei Mihai 8 days ago

En rajoutant aussi un petit padding aux liens.
Testé sur quelques intégrations en local et cela me semble bien.

#9

Updated by Thomas Jund 8 days ago

  • Status changed from Solution proposée to Solution validée

Partons là-dessus (j'aurais eu une préférence pour le padding en em :) )

#10

Updated by Serghei Mihai 8 days ago

  • Status changed from Solution validée to 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.
#11

Updated by Serghei Mihai 8 days ago

Avec padding de 0.25em

#12

Updated by Frédéric Péters 3 days ago

  • Status changed from Résolu (à déployer) to Solution déployée

Also available in: Atom PDF