Zone de texte Dans un formulaire, une zone de texte permet de saisir du texte sur plusieurs lignes, comme un commentaire. Exemples Les exemples ci-dessous reproduisent les zones de texte incluant celle avec un compteur et une longueur maximale et celle avec un texte d’aide à la saisie. Les champs en erreur peuvent être vus en laissant vides les zones de texte et en cliquant sur Suivant. Zone de texte Texte pour une consigne Zone de texte avec compteur et longueur maximale Zone de texte avec consigne et aide à la saisie Texte pour une consigneTexte d’aide à la saisie Zone de texte (facultatif) Laisser ce champ vide Accessibilité L’étiquette de la zone de texte doit être à proximité de la zone de texteL’étiquette de la zone de texte doit être codée dans une balise <label>La balise <label> doit être liée à la zone de texteLa bordure du champ doit avoir un taux de contraste d’au moins 3:1 avec l’arrière-plan Information complémentaire au champ Ne pas oublier que tout texte apportant de l’information complémentaire à la zone de texte (un signe de $, une consigne, le message d’erreur) doit y être lié. Pour ce faire, il faut : Ajouter l’attribut aria-describedby sur la zone de texteAjouter l’attribut id sur la balise contenant le texte (<p>, <span>, <div>)Lier l’attribut aria-describedby à l’attribut id (aria-describedby="id du texte") Compteur de caractères restants Dans le cas où la zone de texte a un compteur de caractères restants, le décompte doit être annoncé au lecteur d’écran (présence de l’attribut aria-live qui est alimenté par le compteur). Il faut également que le compteur soit lié à la zone de texte, c’est-à-dire que la zone de texte possède l’attribut aria-describedby qui est lié à l’attribut id du compteur.
