Contraste des contrôles de formulaire
Silktide vérifie que les champs de formulaire, comme les zones de texte et les menus déroulants, se démarquent visuellement de leur environnement. Un champ qui se fond dans la page est difficile à trouver et à utiliser pour les personnes ayant une basse vision.
Pourquoi c’est important
Pour remplir un formulaire, il faut d’abord voir où se trouvent les champs. Un champ blanc sans bordure sur une page blanche est invisible pour de nombreuses personnes ayant une basse vision — elles ne savent pas où cliquer ni où taper. Les formulaires sont souvent la partie la plus déterminante d’un site Web (contact, paiement, inscription), donc des champs introuvables se traduisent directement par des demandes de renseignements et des ventes perdues. Il s’agit également d’une exigence de .
Comment corriger
- Donnez au contrôle une bordure ou un contour visible avec un d’au moins 3:1 par rapport à l’arrière-plan qui l’entoure. C’est généralement une modification d’une seule ligne dans votre feuille de style.
\/* Champ invisible sur une page blanche *\/
input { background: #fff; border: 1px solid #f2f2f2; }
\/* Corrigé : la bordure contraste d’au moins 3:1 avec l’arrière-plan *\/
input { background: #fff; border: 1px solid #767676; }
- Sinon, remplissez le contrôle lui-même avec une couleur qui contraste d’au moins 3:1 avec son environnement.
Comment Silktide vérifie cela
- Repérer sur la page chaque champ de texte visible, zone de texte et menu déroulant (
<input>,<textarea>et<select>), en ignorant tout élément que vous avez exclu de la vérification. - Ignorer les types d’entrée dont l’apparence est rendue par le navigateur ou le système d’exploitation : cases à cocher, boutons radio, boutons d’envoi/réinitialisation/image, sélecteurs de fichiers et champs cachés.
- Déterminer la couleur d’arrière-plan réelle du contrôle et celle de la zone qui l’entoure, en tenant compte de la transparence et des éléments parents.
- Considérer le contrôle conforme si son remplissage présente un contraste d’au moins 3:1 avec l’arrière-plan environnant. Sinon, tester chaque couleur de bordure et de contour du contrôle par rapport à l’arrière-plan environnant et le considérer conforme si l’une d’elles atteint 3:1.
- Signaler les contrôles pour lesquels rien n’atteint 3:1, en indiquant le meilleur contraste trouvé.
Dépannage
Effets que nous ne pouvons pas mesurer
Les ombres portées, les lueurs, les dégradés et les images d’arrière-plan n’ont pas de couleur unique mesurable; le contraste fourni uniquement par de tels effets n’est donc pas pris en compte. De même, un contrôle placé au-dessus de plusieurs arrière-plans différents (par exemple avec position: absolute) peut ne pas être mesurable. Si un contrôle signalé est réellement distinct, vous pouvez la constatation.
Les boutons, cases à cocher et boutons radio ne sont pas vérifiés
Les boutons n’ont pas besoin d’une délimitation visible tant que leur libellé est lisible, et les cases à cocher et les boutons radio sont habituellement dessinés par le navigateur, donc cette vérification les exclut volontairement.
Menus déroulants personnalisés
Certaines bibliothèques de composants masquent le contrôle natif et dessinent leur propre remplacement. Silktide ignore le contrôle natif masqué, et l’élément de remplacement visible est évalué comme tout autre élément lorsque c’est possible.