Étiquettes ou instructions :
Comprendre le CS 3.3.2
3.3.2 Étiquettes ou instructions : des étiquettes sont présentées ou des instructions sont fournies quand un contenu requiert une saisie utilisateur. (Niveau A)
Objectif de ce critère de succès
L'objectif de ce critère de succès est d'aider les utilisateurs à éviter les erreurs quand une saisie est nécessaire. Pour aider à éviter ces erreurs, il est nécessaire de présenter une bonne interface utilisateur qui fournit des instructions et des indications simples qui permettent d'entrer des informations. Certains utilisateurs en situation de handicap auront plus de chances de commettre des erreurs que les utilisateurs n'ayant pas de handicap ou bien le rattrapage d'erreurs leur sera plus difficile, ce qui fait de l'évitement d'erreur une stratégie importante pour les utilisateurs en situation de handicap. Les personnes ayant des limitations fonctionnelles comptent sur des formulaires et des procédures bien documentés pour interagir avec une page. Les utilisateurs aveugles doivent connaître exactement quelle information doit être saisie dans les champs d'un formulaire et quels sont les choix disponibles. Des instructions simples visuellement rattachées aux champs de formulaires peuvent aider les utilisateurs ayant des limitations cognitives ou ceux accédant à une page en utilisant un agrandisseur d'écran.
L'objectif de ce critère de succès n'est pas de surcharger la page d'informations pas forcément nécessaires, mais de donner des instructions et des indications importantes qui seront profitables aux personnes en situation de handicap. Trop d'informations ou d'instructions peuvent être aussi rédhibitoires que si elles étaient insuffisantes. Le but est d'être sûr que suffisamment d'informations sont fournies à l'utilisateur afin qu'il termine son action sans une trop grande confusion ou sans devoir trop naviguer.
Avantages spécifiques du critère de succès 3.3.2 :
Les éléments de type label associés à des éléments de saisie permettent de s'assurer que l'information concernant le champ de saisie est lue par les lecteurs d'écran quand le champ de saisie reçoit le focus.
Les étiquettes des champs proches des champs associés aident les utilisateurs d'agrandisseurs d'écrans car le champ et l'étiquette sont plus facilement visibles dans la zone grossie de la page.
Fournir des exemples de formats de données attendus aide les utilisateurs ayant une limitation cognitive, des difficultés de langage ou d'apprentissage à saisir les informations correctement.
Identifier clairement des champs obligatoires évite aux personnes utilisant uniquement le clavier d'envoyer un formulaire incomplet et d'avoir à parcourir de nouveau l'intégralité du formulaire pour retrouver le champ incomplet et fournir l'information manquante.
Exemples pour le critère de succès 3.3.2
Un champ qui nécessite que l'utilisateur saisisse l'abréviation sur deux caractères d'un état américain possède un lien à proximité qui affichera une liste alphabétique des noms des états avec leur abréviation correcte.
Un champ de saisie d'une date contient un texte initial qui renseigne sur le format correct de la date.
Un champ dans lequel le prénom doit être saisi possède de façon claire l'étiquette « prénom » et le champ pour le nom de famille possède de façon claire l'étiquette « nom de famille » afin d'éviter la confusion dans le choix du nom à donner.
Un numéro de téléphone américain sépare le code régional, le code du central téléphonique et le numéro en trois champs distincts. Des parenthèses entourent le code régional, et un trait d'union sépare les champs du code du central de celui du numéro. Alors que la ponctuation fournit des indications visuelles pour ceux qui sont familiers avec le format de la numérotation américaine, la ponctuation n'est pas suffisante en tant qu'étiquette des champs. La simple étiquette « numéro de téléphone » ne peut pas suffire pour étiqueter les trois champs. Pour régler cela, les trois champs sont regroupés dans un
fieldsetavec lalegend« Numéro de téléphone ». Les étiquettes visuelles concernant les champs (au-delà de la ponctuation) ne peuvent être affichées, ainsi des étiquettes invisibles sont fournies avec un attribut « title » pour chacun des trois champs. Les valeurs d'attribut pour les trois champs seront respectivement « code régional », « code du central téléphonique » et « numéro ».
Ressources liées
Les ressources sont présentées dans un but d'information seulement, il ne s'agit pas d'une approbation.
(Aucune ressource n'est actuellement documentée)
Techniques et échecs pour le critère de succès 3.3.2 - Étiquettes ou instructions
Chaque élément numéroté dans cette section représente une technique ou une combinaison de techniques que le groupe de travail des WCAG considère comme suffisante pour satisfaire à ce critère de succès. Les techniques énumérées satisfont le critère de succès seulement si toutes les exigences de conformité aux WCAG 2.0 ont été appliquées.
Techniques suffisantes
G131 : Fournir des étiquettes descriptives (en anglais) ET l'un des éléments suivants :
G89 : Fournir de l'information sur le format des données attendu et des exemples (en anglais)
G162 : Positionner les étiquettes afin de maximiser la prévisibilité des relations (en anglais)
H90 : Indiquer les champs de formulaire obligatoires (en anglais) (HTML)
FLASH10 : Indiquer les éléments de formulaire obligatoires dans Flash (en anglais) (Flash)
FLASH29 : Définir la propriété label pour les éléments de formulaire (en anglais) (Flash)
G167 : Utiliser un bouton adjacent pour identifier visuellement la fonction d'un champ (en anglais)
Note : les techniques à la fin de la liste ci-dessus doivent être considérées « en dernier ressort » et utilisées uniquement quand les autres techniques ne peuvent pas être implémentées dans la page. Les techniques précédentes sont préférables car elles améliorent l'accessibilité pour un plus grand nombre d'utilisateurs.
Techniques supplémentaires (recommandées) pour 3.3.2
Bien qu'elles ne soient pas nécessaires à la conformité, les techniques supplémentaires suivantes devraient être envisagées afin de rendre le contenu plus accessible. Toutes ces techniques ne peuvent pas être utilisées ou ne seraient pas efficaces dans toutes les situations.
ARIA2 : Identifier les champs obligatoires avec la propriété required (en anglais) (ARIA)
Fournir des formulaires dont la présentation est linéaire et regrouper les éléments similaires (lien à venir)
Échecs fréquents pour le CS 3.3.2
Le groupe de travail des WCAG considère les erreurs fréquentes suivantes comme des échecs du critère de succès 3.3.2.
Mots clés
- étiquette
texte ou autre composant avec un équivalent textuel qui est restitué à l'utilisateur pour permettre d'identifier un composant dans un contenu Web
Note 1 : une étiquette est présentée à tous les utilisateurs alors que le nom peut être masqué et seulement restitué par une technologie d'assistance. Dans de nombreux cas (mais pas tous) le nom et l'étiquette sont identiques.
Note 2 : le terme étiquette n'est pas limité à l'élément label en HTML.