link-in-text-block

Les liens dans un bloc de texte doivent se distinguer du texte environnant sans reposer uniquement sur la couleur

automaticWCAG 1.4.1 (A)confiance : highgravité : seriousperceivable

Vérifie qu’un lien placé dans un bloc de texte se distingue visuellement du texte qui l’entoure par un indice autre que la couleur (soulignement, graisse ou style de police, bordure, fond, icône), et pose la question pour les liens distingués seulement par une différence de couleur >=3:1, qui ont aussi besoin d’un indice au survol et au focus.

Applicabilité. S’applique aux liens (<a href> et éléments dont l’attribut role se résout en link : son premier jeton de rôle connu, sans tenir compte de la casse, est link) qui dessinent du texte (du texte autre que des espaces dans l’arbre aplati du lien et, lorsque la page a une mise en page, une boîte d’une certaine surface) et dont l’élément parent immédiat contient aussi, à côté du lien, du texte comportant une lettre ou un chiffre : un nœud texte enfant direct, ou du texte dans un élément en ligne sur la même ligne qui n’est pas un lien, n’est pas dessiné de façon invisible et n’est pas un élément d’un parent flex ou grid (c.-à-d. que le lien se trouve en ligne dans un bloc de texte, et non comme élément autonome, p. ex. pas comme seul contenu d’un <li> de navigation, ni comme l’un d’une rangée de liens séparés par « | » ou « · »). Un élément personnalisé auquel ses ElementInternals donnent le rôle link (this.attachInternals().role), sans attribut role qui en nomme un autre, compte comme un élément natif doté de ce rôle.

Attendu. Un lien dans un bloc de texte doit se distinguer visuellement du texte environnant par au moins un moyen autre que la couleur :

  • text-decoration: underline, OU
  • un font-weight ou font-style différent de celui du texte environnant, OU
  • une autre marque visible sur le lien lui-même : une bordure, un box-shadow ou un outline, une couleur de fond différente de celle de l’entourage, une image de fond, une image ou un svg à l’intérieur, ou un ::before/::after qui dessine quelque chose (un contenu propre, ou une boîte vide qui peint un arrière-plan, une bordure, un outline ou une ombre, comme le fait un soulignement dessiné de cette façon), OU
  • une marque sur tout son contenu : gras, italique, souligné, bordé, un arrière-plan différent de celui du texte environnant (une puce de code, <mark>), ou surélevé ou abaissé (le <sup> d’une note de bas de page).

Un lien qui n’a rien de tout cela se distingue par la seule couleur. Lorsque sa couleur contraste d’au moins 3:1 avec le texte environnant, la technique G183 n’est satisfaite que si le survol et le focus apportent aussi un indice autre que la couleur, ce qu’une analyse statique ne peut pas voir : le lien est donc signalé comme cantTell. En dessous de 3:1, avec un contraste calculable de façon fiable, la couleur est manifestement le seul indice et le lien échoue. Le rapport entre la couleur du lien et celle du texte ne dépend d’aucun arrière-plan : là où seul l’arrière-plan, ou un effet appliqué de la même façon aux deux, empêche de le mesurer, deux couleurs de texte opaques le déterminent quand même. Marge (contrast-ratio) : parmi les liens distingués par la seule couleur qui atteignent 3:1, celui qui en est le plus proche, avec son ratio non arrondi. Ces liens donnent aussi lieu à une question (l’indice au survol et au focus) : la marge apparaît donc sur un résultat cantTell ou fail. Seul un lien à moins de 10 % de 3:1 (jusqu’à 3.3:1) compte comme proche. measuredCount compte les liens dont la couleur est le seul indice.

Ce que rapporte un constat.

  • metrics.ratio (un lien distingué uniquement par la couleur) : le contraste entre la couleur du texte du lien et celle du texte environnant, sous forme de rapport (3 pour 3:1), comparé à metrics.threshold (3).
  • metrics.ratioBeforeOpacity (un lien distingué uniquement par la couleur, sous ANCESTOR_OPACITY) : ce rapport avant que l’opacité d’un ancêtre n’atténue de la même façon le lien et le texte, à la place de metrics.ratio. L’atténuation rapproche les deux couleurs, si bien que le rapport affiché peut être plus faible : en dessous de 3:1, le lien échoue tout de même, à 3:1 ou plus, il donne lieu à une question sans pencher vers pass, et il ne donne aucune marge.
  • colors.linkForegroundHex, colors.surroundingTextForegroundHex (un lien distingué uniquement par la couleur) : la couleur du texte du lien et celle du texte environnant, en hexadécimal.
  • colorScheme (un lien doté de sa propre couleur de fond, sur le canevas d’une page qui prend en charge le clair et le sombre) : 'light' ou 'dark', le jeu de couleurs dans lequel ce fond ne le distingue pas du canevas qui l’entoure, alors qu’il le fait dans l’autre ; le rapport et les couleurs sont ceux de ce jeu de couleurs. Absent lorsqu’il reste en dessous dans chaque jeu de couleurs mesuré.
  • colorSchemesChecked (le même lien) : les jeux de couleurs dans lesquels il a été comparé, lorsque la page prend en charge les deux et que l’un n’a pas pu être mesuré (ses couleurs ou les arrière-plans qui l’entourent peuvent changer avec le jeu de couleurs). Un binding peut relancer l’analyse avec le navigateur dans l’autre jeu de couleurs.

Ces champs de data.details aident à lire et à reproduire un constat. À part reasonCode et les quelques champs que la page Schéma de sortie donne comme stables, ils ne constituent pas un contrat stable : un champ peut être renommé ou supprimé dans une version mineure, ne vous appuyez donc pas dessus.

Marge. Cette règle mesure contrast-ratio sous forme de rapport, et la valeur doit atteindre le seuil. Quand une réussite est passée près du seuil, le champ margin du résultat désigne l’élément qui s’en est le plus approché tout en le respectant, si bien qu’un résultat qu’un petit changement ferait basculer se voit avant de basculer. Contrairement aux champs d’un constat, c’est un contrat stable. Voir Schéma de sortie.

Exemples

pass
<p>Read <a href="#" style="text-decoration:underline">this underlined link</a> for more information.</p>

Le lien est souligné, ce qui le distingue du texte environnant par autre chose que la couleur.

fail
<p style="color:#222222; background:#ffffff;">Read <a href="#" style="text-decoration:none; color:#2a2a2a;">this link</a> for more information.</p>

La seule différence avec le texte environnant est un changement de couleur d’un contraste d’environ 1,1:1, bien en dessous du minimum de 3:1, sans soulignement ni changement de graisse ou de style.

can't tell
<p style="color:#000000;">Read <a href="#" style="text-decoration:none; color:#d00000;">this link</a> for more information.</p>

La couleur du lien contraste de plus de 3:1 avec le texte, mais la couleur est son seul indice. La technique G183 exige aussi un indice autre que la couleur au survol et au focus, qu’une personne vérifie.

Comment vérifier

Quand cette règle ne peut pas trancher, elle renvoie cantTell et laisse la question à une personne. Chaque question qu’elle peut poser figure ici sous son code de raison, avec les étapes pour y répondre. Un constat porte les mêmes étapes dans howToCheck, dans la langue de l’analyse. Voir Schéma de sortie.

ANCESTOR_OPACITY

  1. Repérez le lien indiqué par le rapport dans son paragraphe et regardez-le à côté du texte environnant.
  2. Vérifiez si le lien se distingue par un soulignement, du gras, de l’italique, une bordure ou une autre marque ; lisez les couleurs à l’écran, car l’atténuation les modifie.
  3. Si seule la couleur diffère, utilisez la pipette du sélecteur de couleur des outils de développement pour lire la couleur du lien et celle du texte telles qu’elles sont dessinées, et vérifiez que leur contraste est d’au moins 3:1.
  4. Survolez ensuite le lien avec le pointeur et atteignez-le avec Tab, puis vérifiez qu’un soulignement ou une autre marque non liée à la couleur apparaît.

Réussite. Le lien a un indice non lié à la couleur, comme un soulignement, du gras ou une bordure, ou sa couleur contraste avec le texte d’au moins 3:1 et le survol et le focus ajoutent un indice non lié à la couleur.

Échec. Le lien n’a aucun indice non lié à la couleur et ne se distingue du texte que par la couleur, avec moins de 3:1 ou sans indice non lié à la couleur au survol et au focus, ce qui ne respecte pas le critère WCAG 1.4.1 (F73).

BACKGROUND_FILTER_OR_BACKDROP_FILTER

  1. Repérez le lien indiqué par le rapport dans son paragraphe et regardez-le à côté du texte environnant.
  2. Vérifiez si le lien se distingue par un soulignement, du gras, de l’italique, une bordure ou une autre marque ; lisez les couleurs à l’écran, car le filtre les modifie.
  3. Si seule la couleur diffère, utilisez la pipette du sélecteur de couleur des outils de développement pour lire la couleur du lien et celle du texte telles qu’elles sont dessinées, et vérifiez que leur contraste est d’au moins 3:1.
  4. Survolez ensuite le lien avec le pointeur et atteignez-le avec Tab, puis vérifiez qu’un soulignement ou une autre marque non liée à la couleur apparaît.

Réussite. Le lien a un indice non lié à la couleur, comme un soulignement, du gras ou une bordure, ou sa couleur contraste avec le texte d’au moins 3:1 et le survol et le focus ajoutent un indice non lié à la couleur.

Échec. Le lien n’a aucun indice non lié à la couleur et ne se distingue du texte que par la couleur, avec moins de 3:1 ou sans indice non lié à la couleur au survol et au focus, ce qui ne respecte pas le critère WCAG 1.4.1 (F73).

BACKGROUND_IMAGE_OR_GRADIENT

  1. Repérez le lien indiqué par le rapport dans son paragraphe et regardez-le à côté du texte environnant.
  2. Vérifiez si le lien se distingue par un soulignement, du gras, de l’italique, une bordure ou une autre marque, et pas seulement par sa couleur sur l’image d’arrière-plan.
  3. Si seule la couleur diffère, utilisez la pipette du sélecteur de couleur des outils de développement pour lire la couleur du lien et celle du texte telles qu’elles sont dessinées, et vérifiez que leur contraste est d’au moins 3:1.
  4. Survolez ensuite le lien avec le pointeur et atteignez-le avec Tab, puis vérifiez qu’un soulignement ou une autre marque non liée à la couleur apparaît.

Réussite. Le lien a un indice non lié à la couleur, comme un soulignement, du gras ou une bordure, ou sa couleur contraste avec le texte d’au moins 3:1 et le survol et le focus ajoutent un indice non lié à la couleur.

Échec. Le lien n’a aucun indice non lié à la couleur et ne se distingue du texte que par la couleur, avec moins de 3:1 ou sans indice non lié à la couleur au survol et au focus, ce qui ne respecte pas le critère WCAG 1.4.1 (F73).

BACKGROUND_NOT_OPAQUE_AT_ROOT

  1. Repérez le lien indiqué par le rapport dans son paragraphe ; la page ne définit aucun arrière-plan opaque : ce qui s’affiche autour est le canevas que peint le navigateur ou, dans un cadre, la page qui l’entoure.
  2. Affichez la page là où elle apparaît : dans la page qui l’intègre, sans couleurs forcées, et dans chaque jeu de couleurs qu’elle prend en charge (clair et sombre).
  3. Dans chaque contexte, vérifiez si la couleur d’arrière-plan du lien se distingue de l’arrière-plan qui l’entoure, ou si un soulignement ou une autre marque non liée à la couleur distingue le lien.

Réussite. Dans tous les contextes où la page s’affiche, l’arrière-plan du lien se distingue de celui qui l’entoure, ou une autre marque non liée à la couleur distingue le lien.

Échec. Dans un des contextes, l’arrière-plan du lien se confond avec celui qui l’entoure et seule une différence de couleur de moins de 3:1 distingue le lien, ce qui ne respecte pas le critère WCAG 1.4.1 (F73).

BACKGROUND_OVERLAP

  1. Repérez le lien indiqué par le rapport dans son paragraphe et regardez-le à côté du texte environnant.
  2. Vérifiez si le lien se distingue par un soulignement, du gras, de l’italique, une bordure ou une autre marque, et pas seulement par sa couleur.
  3. Si seule la couleur diffère, utilisez la pipette du sélecteur de couleur des outils de développement pour lire la couleur du lien et celle du texte telles qu’elles sont dessinées, et vérifiez que leur contraste est d’au moins 3:1.
  4. Survolez ensuite le lien avec le pointeur et atteignez-le avec Tab, puis vérifiez qu’un soulignement ou une autre marque non liée à la couleur apparaît.

Réussite. Le lien a un indice non lié à la couleur, comme un soulignement, du gras ou une bordure, ou sa couleur contraste avec le texte d’au moins 3:1 et le survol et le focus ajoutent un indice non lié à la couleur.

Échec. Le lien n’a aucun indice non lié à la couleur et ne se distingue du texte que par la couleur, avec moins de 3:1 ou sans indice non lié à la couleur au survol et au focus, ce qui ne respecte pas le critère WCAG 1.4.1 (F73).

COLOR_NOT_COMPUTABLE

  1. Repérez le lien indiqué par le rapport dans son paragraphe et regardez-le à côté du texte environnant.
  2. Vérifiez si le lien se distingue à l’écran par un soulignement, du gras, de l’italique, une bordure ou une autre marque.
  3. Si seule la couleur diffère, utilisez la pipette du sélecteur de couleur des outils de développement pour lire la couleur du lien et celle du texte telles qu’elles sont dessinées, et vérifiez que leur contraste est d’au moins 3:1.
  4. Survolez ensuite le lien avec le pointeur et atteignez-le avec Tab, puis vérifiez qu’un soulignement ou une autre marque non liée à la couleur apparaît.

Réussite. Le lien a un indice non lié à la couleur, comme un soulignement, du gras ou une bordure, ou sa couleur contraste avec le texte d’au moins 3:1 et le survol et le focus ajoutent un indice non lié à la couleur.

Échec. Le lien n’a aucun indice non lié à la couleur et ne se distingue du texte que par la couleur, avec moins de 3:1 ou sans indice non lié à la couleur au survol et au focus, ce qui ne respecte pas le critère WCAG 1.4.1 (F73).

CONTRAST_HELPERS_UNAVAILABLE

  1. Repérez le lien indiqué par le rapport dans son paragraphe et regardez-le à côté du texte environnant.
  2. Vérifiez si le lien se distingue par un soulignement, du gras, de l’italique, une bordure ou une autre marque.
  3. Si seule la couleur diffère, utilisez la pipette du sélecteur de couleur des outils de développement pour lire la couleur du lien et celle du texte telles qu’elles sont dessinées, et vérifiez que leur contraste est d’au moins 3:1.
  4. Survolez ensuite le lien avec le pointeur et atteignez-le avec Tab, puis vérifiez qu’un soulignement ou une autre marque non liée à la couleur apparaît.

Réussite. Le lien a un indice non lié à la couleur, comme un soulignement, du gras ou une bordure, ou sa couleur contraste avec le texte d’au moins 3:1 et le survol et le focus ajoutent un indice non lié à la couleur.

Échec. Le lien n’a aucun indice non lié à la couleur et ne se distingue du texte que par la couleur, avec moins de 3:1 ou sans indice non lié à la couleur au survol et au focus, ce qui ne respecte pas le critère WCAG 1.4.1 (F73).

ELEMENT_OPACITY

  1. Repérez le lien indiqué par le rapport dans son paragraphe et regardez-le à côté du texte environnant.
  2. Vérifiez si le lien se distingue par un soulignement, du gras, de l’italique, une bordure ou une autre marque ; lisez sa couleur à l’écran, car sa propre opacity la modifie.
  3. Si seule la couleur diffère, utilisez la pipette du sélecteur de couleur des outils de développement pour lire la couleur du lien et celle du texte telles qu’elles sont dessinées, et vérifiez que leur contraste est d’au moins 3:1.
  4. Survolez ensuite le lien avec le pointeur et atteignez-le avec Tab, puis vérifiez qu’un soulignement ou une autre marque non liée à la couleur apparaît.

Réussite. Le lien a un indice non lié à la couleur, comme un soulignement, du gras ou une bordure, ou sa couleur contraste avec le texte d’au moins 3:1 et le survol et le focus ajoutent un indice non lié à la couleur.

Échec. Le lien n’a aucun indice non lié à la couleur et ne se distingue du texte que par la couleur, avec moins de 3:1 ou sans indice non lié à la couleur au survol et au focus, ce qui ne respecte pas le critère WCAG 1.4.1 (F73).

ENGINE_EXCEPTION

  1. Repérez le lien indiqué par le rapport dans son paragraphe et regardez-le à côté du texte environnant.
  2. Vérifiez si le lien se distingue par un soulignement, du gras, de l’italique, une bordure ou une autre marque.
  3. Si seule la couleur diffère, utilisez la pipette du sélecteur de couleur des outils de développement pour lire la couleur du lien et celle du texte telles qu’elles sont dessinées, et vérifiez que leur contraste est d’au moins 3:1.
  4. Survolez ensuite le lien avec le pointeur et atteignez-le avec Tab, puis vérifiez qu’un soulignement ou une autre marque non liée à la couleur apparaît.

Réussite. Le lien a un indice non lié à la couleur, comme un soulignement, du gras ou une bordure, ou sa couleur contraste avec le texte d’au moins 3:1 et le survol et le focus ajoutent un indice non lié à la couleur.

Échec. Le lien n’a aucun indice non lié à la couleur et ne se distingue du texte que par la couleur, avec moins de 3:1 ou sans indice non lié à la couleur au survol et au focus, ce qui ne respecte pas le critère WCAG 1.4.1 (F73).

  1. Repérez le lien indiqué par le rapport dans son paragraphe ; le rapport indique son contraste avec le texte environnant.
  2. Survolez le lien avec le pointeur et vérifiez si un soulignement ou une autre marque non liée à la couleur apparaît.
  3. Cliquez juste avant le lien et appuyez sur Tab jusqu’à ce qu’il ait le focus, puis vérifiez de nouveau la présence d’une marque non liée à la couleur.

Réussite. Le survol comme le focus ajoutent au lien un indice non lié à la couleur, comme un soulignement.

Échec. Le survol ou le focus ne change que la couleur : seule la couleur distingue donc le lien, ce qui ne respecte pas le critère WCAG 1.4.1 (G183, F73).

MIX_BLEND_MODE

  1. Repérez le lien indiqué par le rapport dans son paragraphe et regardez-le à côté du texte environnant.
  2. Vérifiez si le lien se distingue par un soulignement, du gras, de l’italique, une bordure ou une autre marque ; lisez les couleurs à l’écran, car la fusion les modifie.
  3. Si seule la couleur diffère, utilisez la pipette du sélecteur de couleur des outils de développement pour lire la couleur du lien et celle du texte telles qu’elles sont dessinées, et vérifiez que leur contraste est d’au moins 3:1.
  4. Survolez ensuite le lien avec le pointeur et atteignez-le avec Tab, puis vérifiez qu’un soulignement ou une autre marque non liée à la couleur apparaît.

Réussite. Le lien a un indice non lié à la couleur, comme un soulignement, du gras ou une bordure, ou sa couleur contraste avec le texte d’au moins 3:1 et le survol et le focus ajoutent un indice non lié à la couleur.

Échec. Le lien n’a aucun indice non lié à la couleur et ne se distingue du texte que par la couleur, avec moins de 3:1 ou sans indice non lié à la couleur au survol et au focus, ce qui ne respecte pas le critère WCAG 1.4.1 (F73).

PSEUDO_ELEMENT_COLOR

  1. Repérez le lien indiqué par le rapport dans son paragraphe et regardez-le à côté du texte environnant.
  2. Vérifiez si le lien se distingue par un soulignement, du gras, de l’italique, une bordure ou une autre marque ; s’il se trouve sur la première ligne ou la première lettre du paragraphe, comparez-le avec le texte de cette ligne.
  3. Si seule la couleur diffère, utilisez la pipette du sélecteur de couleur des outils de développement pour lire la couleur du lien et celle du texte telles qu’elles sont dessinées, et vérifiez que leur contraste est d’au moins 3:1.
  4. Survolez ensuite le lien avec le pointeur et atteignez-le avec Tab, puis vérifiez qu’un soulignement ou une autre marque non liée à la couleur apparaît.

Réussite. Le lien a un indice non lié à la couleur, comme un soulignement, du gras ou une bordure, ou sa couleur contraste avec le texte d’au moins 3:1 et le survol et le focus ajoutent un indice non lié à la couleur.

Échec. Le lien n’a aucun indice non lié à la couleur et ne se distingue du texte que par la couleur, avec moins de 3:1 ou sans indice non lié à la couleur au survol et au focus, ce qui ne respecte pas le critère WCAG 1.4.1 (F73).

SELECT_OPTION_COLOR

  1. Repérez la liste déroulante indiquée par le rapport et ouvrez sa liste d’options.
  2. Regardez l’option indiquée par le rapport à côté du texte des autres options.
  3. Vérifiez si elle se distingue par autre chose que la couleur (un soulignement, du gras, une marque) ; si seule la couleur diffère, lisez les deux couleurs avec la pipette du sélecteur de couleur et vérifiez que le contraste est d’au moins 3:1.

Réussite. L’option se distingue par un indice non lié à la couleur, ou sa couleur contraste avec le reste du texte d’au moins 3:1, avec un indice non lié à la couleur au focus.

Échec. Seule la couleur distingue l’option, avec moins de 3:1 ou sans autre indice, ce qui ne respecte pas le critère WCAG 1.4.1 (F73).

TEXT_DECORATION_NOT_RESOLVABLE

  1. Repérez le lien indiqué par le rapport dans son paragraphe et regardez-le à côté du texte environnant.
  2. Vérifiez si le lien est souligné à l’écran, ou s’il se distingue par du gras, de l’italique, une bordure ou une autre marque.
  3. Si seule la couleur diffère, utilisez la pipette du sélecteur de couleur des outils de développement pour lire la couleur du lien et celle du texte telles qu’elles sont dessinées, et vérifiez que leur contraste est d’au moins 3:1.
  4. Survolez ensuite le lien avec le pointeur et atteignez-le avec Tab, puis vérifiez qu’un soulignement ou une autre marque non liée à la couleur apparaît.

Réussite. Le lien a un indice non lié à la couleur, comme un soulignement, du gras ou une bordure, ou sa couleur contraste avec le texte d’au moins 3:1 et le survol et le focus ajoutent un indice non lié à la couleur.

Échec. Le lien n’a aucun indice non lié à la couleur et ne se distingue du texte que par la couleur, avec moins de 3:1 ou sans indice non lié à la couleur au survol et au focus, ce qui ne respecte pas le critère WCAG 1.4.1 (F73).

TEXT_SHADOW

  1. Repérez le lien indiqué par le rapport dans son paragraphe et regardez-le à côté du texte environnant.
  2. Vérifiez si le lien se distingue par un soulignement, du gras, de l’italique, une bordure ou une autre marque ; une ombre partagée avec le texte ne compte pas.
  3. Si seule la couleur diffère, utilisez la pipette du sélecteur de couleur des outils de développement pour lire la couleur du lien et celle du texte telles qu’elles sont dessinées, et vérifiez que leur contraste est d’au moins 3:1.
  4. Survolez ensuite le lien avec le pointeur et atteignez-le avec Tab, puis vérifiez qu’un soulignement ou une autre marque non liée à la couleur apparaît.

Réussite. Le lien a un indice non lié à la couleur, comme un soulignement, du gras ou une bordure, ou sa couleur contraste avec le texte d’au moins 3:1 et le survol et le focus ajoutent un indice non lié à la couleur.

Échec. Le lien n’a aucun indice non lié à la couleur et ne se distingue du texte que par la couleur, avec moins de 3:1 ou sans indice non lié à la couleur au survol et au focus, ce qui ne respecte pas le critère WCAG 1.4.1 (F73).

TEXT_STROKE

  1. Repérez le lien indiqué par le rapport dans son paragraphe et regardez-le à côté du texte environnant.
  2. Vérifiez si le lien se distingue par un soulignement, du gras, de l’italique, une bordure ou une autre marque ; lisez les couleurs à l’écran, là où le contour est dessiné.
  3. Si seule la couleur diffère, utilisez la pipette du sélecteur de couleur des outils de développement pour lire la couleur du lien et celle du texte telles qu’elles sont dessinées, et vérifiez que leur contraste est d’au moins 3:1.
  4. Survolez ensuite le lien avec le pointeur et atteignez-le avec Tab, puis vérifiez qu’un soulignement ou une autre marque non liée à la couleur apparaît.

Réussite. Le lien a un indice non lié à la couleur, comme un soulignement, du gras ou une bordure, ou sa couleur contraste avec le texte d’au moins 3:1 et le survol et le focus ajoutent un indice non lié à la couleur.

Échec. Le lien n’a aucun indice non lié à la couleur et ne se distingue du texte que par la couleur, avec moins de 3:1 ou sans indice non lié à la couleur au survol et au focus, ce qui ne respecte pas le critère WCAG 1.4.1 (F73).

Voir le code source