Contraste des champs de formulaire
Silktide vérifie que les champs de formulaire, comme les zones de texte et les menus déroulants, se détachent visuellement de la zone qui les entoure. Un champ qui se fond dans la page est difficile à repérer 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ù saisir du texte. Les formulaires sont généralement la partie la plus déterminante d’un site web (contact, paiement, inscription) ; des champs introuvables se traduisent directement par des demandes et des ventes perdues. C’est également une de exigence.
Comment corriger
- Donnez au contrôle une bordure ou un contour visible avec un d’au moins 3:1 par rapport au fond 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 au moins 3:1 avec l’arrière-plan *\/
input { background: #fff; border: 1px solid #767676; }
- À défaut, remplissez le contrôle lui-même avec une couleur qui contraste d’au moins 3:1 avec son environnement.
Comment Silktide teste cela
- Trouver chaque champ de saisie texte, zone de texte et menu déroulant visibles (
<input>,<textarea>et<select>) sur la page, en ignorant tout élément que vous avez exclu du contrôle. - Ignorer les types de champs dont l’apparence est dessinée 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 masqués.
- Déterminer la couleur d’arrière-plan effective du contrôle et celle de la zone qui l’entoure, en tenant compte de la transparence et des éléments parents.
- Valider le contrôle si son remplissage contraste d’au moins 3:1 avec l’arrière-plan environnant. Sinon, tester chacune des couleurs de bordure et de contour du contrôle par rapport à l’arrière-plan environnant, et valider 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 ces effets n’est donc pas pris en compte. De même, un contrôle positionné 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, la constatation.
Les boutons, cases à cocher et boutons radio ne sont pas vérifiés
Les boutons n’ont pas besoin d’une limite visible tant que leur libellé est lisible, et les cases à cocher ainsi que les boutons radio sont généralement dessinés par le navigateur ; ce contrôle les exclut donc délibérément.
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 le remplacement visible est évalué comme n’importe quel autre élément lorsque c’est possible.