COMPRÉHENSIBLE : Règle 3.3 Aide à la saisie

Comprendre la règle 3.3 (en anglais)

Prévention des erreurs

Le problème

Comme cette règle se situe sous le principe de compréhension, il est aisé de comprendre que les personnes ayant des limitations cognitives sont celles auxquelles on a d'abord pensé.

La prévention des erreurs intéresse toutefois toutes les personnes ayant des limitations fonctionnelles quelle qu'en soit la nature. En effet, pour diverses raisons, ces personnes rencontrent des difficultés en ce qui a trait à leurs interactions avec les contenus Web et en particulier avec les formulaires.

La prévention des erreurs est une façon de leur faciliter la tâche en leur permettant de réussir du premier coup et d'éviter d'avoir à refaire des opérations qui, pour plusieurs, exigent plus de temps et plus d'efforts que pour les personnes sans limitations fonctionnelles.

La solution

• Les étiquettes de formulaire doivent être placées à proximité immédiate des champs de formulaire correspondants : au-dessus ou à gauche pour les zones de texte ou de liste et à droite ou à gauche des cases à cocher et des boutons radio ;
  • Pour un utilisateur d'un logiciel de grossissement, la disposition verticale d'un formulaire avec les étiquettes des champs de type texte et liste déroulante placés immédiatement au-dessus du champ correspondant est l'idéal, parce que même en plus fort grossissement, l'utilisateur pourra voir à la fois l'étiquette et le champ dans sa zone de visualisation.
• Les longs formulaires devraient être subdivisés en section à l'aide des en-têtes de section ;
• Les groupes de boutons radio et les groupes de cases à cocher doivent être identifiés à l'aide des élément <fieldset> et <legend> ;
  • Un lecteur d'écran comme JAWS répétera alors le contenu de l'élément <legend> pour chacun des champs inclus dans le <fieldset>.
• Il est aussi possible d'imbriquer des <fieldset>, mais il est important de tenir compte que JAWS ne redonnera que la <legend> hiérarchiquement la plus proche du champ actif.
  • De plus, si le <fieldset> imbriqué se termine avant la fin du <fieldset> parent, c'est la <legend> du <fieldset> imbriqué qui sera répétée pour les champs restants dans le <fieldset> parent ;
  • Il faut donc être prudent et bien tester le résultat avec un lecteur d'écran afin d'éviter les mauvaises surprises.

Exemple de code

<fieldset> <legend>Indiquez votre sexe :</legend> <p> <input id="masc" name=“sexe" type="radio" checked="checked" value="masculin" /> <label for="masc">Masculin</label> </p> <p> <input id="fem" name=“sexe" type="radio" value="féminin" /> <label for="fem">Féminin</label> </p> </fieldset>

• On ne peut signaler les erreurs dans un formulaire seulement par un indice visuel comme un encadrement différent, une couleur différente ou un surlignement ;
• Les erreurs détectées doivent être expliquées en texte et l’attention doit y être déplacée ;
  • Il est aussi facilitant de donner, pour chaque erreur, un lien vers le champs à corriger.
• Si la validation se fait champ par champ, on peut afficher un dailogue d’alerte pour aviser l’utilisateur des erreurs détectées ;
• Un lien d'aide peut être offert sur chaque page de formulaire ;
• Il est de bonne pratique de donner de l'information sur le format des données attendu et des exemples ;
  • Ces consignes doivent être intégrées aux <label> même si on leur donne une apparence différente de l'étiquette.
• Il est possible de prévoir une période de temps dont la durée serait déclarée et où la transaction pourrait être mise à jour ou annulée par l'utilisateur suite à la soumission du formulaire ;
• On peut aussi utiliser javascript pou offrir un rapport de validation comme dans les techniques :
  • SCR18 : fournir une validation et des alertes côté client (en anglais) et
  • SCR32 : fournir une validation et ajouter un texte décrivant les erreurs côté client via le DOM.

Les règles qui s'appliquent

WCAG 2.0

3.3.1 Identification des erreurs : si une erreur de saisie est détectée automatiquement, l'élément en erreur est identifié et l'erreur est décrite à l'utilisateur sous forme de texte. (Niveau A)

Comment satisfaire à 3.3.1 (en anglais) | Comprendre 3.3.1 (en anglais)

Techniques suffisantes

Situation A: If a form contains fields for which information from the user is mandatory.

1. G83: Providing text descriptions to identify required fields that were not completed
2. SCR18: Providing client-side validation and alert (Scripting)

Situation B: If information provided by the user is required to be in a specific data format or of certain values.

1. G84: Providing a text description when the user provides information that is not in the list of allowed values
2. G85: Providing a text description when user input falls outside the required format or values
3. SCR18: Providing client-side validation and alert (Scripting)
4. SCR32: Providing client-side validation and adding error text via the DOM (Scripting)
5. FLASH12: Providing client-side validation and adding error text via the accessible description (Flash)

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)

Comment satisfaire à 3.3.2 (en anglais) | Comprendre 3.3.2 (en anglais)

Techniques suffisantes

1. G131: Providing descriptive labels AND one of the following:
   • G89: Providing expected data format and example
   • G184: Providing text instructions at the beginning of a form or set of fields that describes the necessary input
   • G162: Positioning labels to maximize predictability of relationships
   • G83: Providing text descriptions to identify required fields that were not completed
   • H90: Indicating required form controls (HTML)
   • FLASH10: Indicating required form controls in Flash (Flash)
2. H44: Using label elements to associate text labels with form controls (HTML)
3. FLASH32: Using auto labeling to associate text labels with form controls (Flash)
4. FLASH29: Setting the label property for form components (Flash)
5. FLASH25: Labeling a form control by setting its accessible name (Flash)
6. H71: Providing a description for groups of form controls using fieldset and legend elements (HTML)
7. FLASH8: Adding a group name to the accessible name of a form control (Flash)
8. H65: Using the title attribute to identify form controls when the label element cannot be used (HTML)
9. G167: Using an adjacent button to label the purpose of a field

Note: The techniques at the end of the above list should be considered "last resort" and only used when the other techniques cannot be applied to the page. The earlier techniques are preferred because they increase accessibility to a wider user group.

Erreurs fréquentes à éviter

• F82: Failure of Success Criterion 3.3.2 by visually formatting a set of phone number fields but not including a text label

3.3.3 Suggestion après une erreur : si une erreur de saisie est automatiquement détectée et que des suggestions de corrections sont connues, ces suggestions sont alors proposées à l'utilisateur à moins que cela puisse compromettre la sécurité ou la finalité du contenu. (Niveau AA)

Comment satisfaire à 3.3.3 (en anglais) | Comprendre 3.3.3 (en anglais)

Techniques suffisantes

Situation A: If a mandatory field contains no information:

1. G83: Providing text decriptions to identify required fields that were not completed

Situation B: If information for a field is required to be in a specific data format:

1. G85: Providing a text description when user input falls outside the required format or values
2. G177: Providing suggested correction text
3. SCR18: Providing client-side validation and alert (Scripting)
4. SCR32: Providing client-side validation and adding error text via the DOM (Scripting)
5. FLASH12: Providing client-side validation and adding error text via the accessible description (Flash)

Situation C: Information provided by the user is required to be one of a limited set of values:

1. G84: Providing a text description when the user provides information that is not in the list of allowed values
2. G177: Providing suggested correction text
3. SCR18: Providing client-side validation and alert (Scripting)
4. SCR32: Providing client-side validation and adding error text via the DOM (Scripting)
5. FLASH12: Providing client-side validation and adding error text via the accessible description (Flash)

3.3.4 Prévention des erreurs (juridiques, financières, de données) : pour les pages Web qui entraînent des engagements juridiques ou des transactions financières de la part de l'utilisateur, qui modifient ou effacent des données contrôlables par l'utilisateur dans des systèmes de stockages de données, qui enregistrent les réponses de l'utilisateur à un test ou un examen, au moins l'une des conditions suivantes est vraie : (Niveau AA)

1. Réversible : les actions d'envoi sont réversibles.
2. Vérifiée : les données saisies par l'utilisateur sont vérifiées au niveau des erreurs de saisie et la possibilité est donnée à l'utilisateur de les corriger.
3. Confirmée : un mécanisme est disponible pour revoir, confirmer et corriger les informations avant leur soumission finale.

Comment satisfaire à 3.3.4 (en anglais) | Comprendre 3.3.4 (en anglais)

Techniques suffisantes

Situation A: If an application causes a legal transaction to occur, such as making a purchase or submitting an income tax return:

1. G164: Providing a stated period of time after submission of the form when the order can be updated or canceled by the user
2. G98: Providing the ability for the user to review and correct answers before submitting
3. G155: Providing a checkbox in addition to a submit button

Situation B: If an action causes information to be deleted:

1. G99: Providing the ability to recover deleted information
2. G168: Requesting confirmation to continue with selected action
3. G155: Providing a checkbox in addition to a submit button

Situation C: If the Web page includes a testing application:

1. G98: Providing the ability for the user to review and correct answers before submitting
2. G168: Requesting confirmation to continue with selected action

3.3.5 Aide : une aide contextuelle est disponible. (Niveau AAA)

 

Comment satisfaire à 3.3.5 (en anglais) | Comprendre 3.3.5 (en anglais)

Techniques suffisantes

Situation A: If a form requires text input:

1. G71: Providing a help link on every Web page
2. G193: Providing help by an assistant in the Web page
3. G194: Providing spell checking and suggestions for text input
4. G184: Providing text instructions at the beginning of a form or set of fields that describes the necessary input

Situation B: If a form requires text input in an expected data format:

1. G89: Providing expected data format and example
2. G184: Providing text instructions at the beginning of a form or set of fields that describes the necessary input

3.3.6 Prévention des erreurs (toutes) : pour des pages Web demandant à l'utilisateur de soumettre des informations, au moins l'une des conditions suivantes est vraie : (Niveau AAA)

1. Réversible : les actions d'envoi sont réversibles.
2. Vérifiée : les données saisies par l'utilisateur sont vérifiées au niveau des erreurs de saisie et la possibilité est donnée à l'utilisateur de les corriger.
3. Confirmée : un mécanisme est disponible pour revoir, confirmer et corriger les informations avant leur soumission finale.

Comment satisfaire à 3.3.6 (en anglais) | Comprendre 3.3.6 (en anglais)

Techniques suffisantes

1. Following the sufficient techniques for Success Criterion 3.3.4 for all forms that require the user to submit information.

SGQRI

008-01 : Accessibilité d'un site Web

• 21 d) être conçu pour que toute étiquette soit positionnée à proximité immédiate du champ auquel elle est associée ;
• 21 e) être conçu pour que tout champ dans un formulaire soit exempt d’une valeur textuelle par défaut ; ne sont pas considérées comme valeur textuelle par défaut les données saisies dans un formulaire et ramenées à la personne à des fins de validation ;
• 21 g) si une erreur de saisie est détectée de façon automatique, indiquer tout élément erroné et décrire l’erreur sous forme de texte avec les suggestions de correction lorsqu’elles sont connues ;
• 21 h) être conçu pour qu’une personne qui engage sa responsabilité, exerce un droit ou effectue un paiement, puisse réviser et corriger, s’il y lieu, l'information avant de confirmer son opération.

008-02 : Accessibilité d'un document téléchargeable

• 14 b) Une étiquette doit être positionnée à proximité immédiate du champ auquel elle est associée.
• 14 d) Un champ de formulaire doit éviter d’incorporer du texte remplaçable.
• 14 e) Si une erreur de saisie est détectée de façon automatique, l’élément erroné est identifié et l’erreur est décrite à l’utilisateur sous forme de texte avec les suggestions de correction lorsqu’elles sont connues.

008-03 : Accessibilité du multimédia dans un site Web

• 12. En matière de navigation dans une animation vectorielle :
  
  • b) une information contextuelle sur l’utilisation de l’animation et compatible avec les technologies d’adaptation informatiques doit être mise à la disposition des utilisateurs.
• 15. En matière de formulaire dans une animation vectorielle :
  • c) une étiquette doit être positionnée à proximité immédiate du champ auquel elle est associée ;
  • e) si une erreur de saisie est détectée de façon automatique, l’élément erroné est identifié et l’erreur est décrite à l’utilisateur en texte avec les suggestions de correction lorsqu’elles sont connues ;
    
  • f) tout procédé ou dispositif qui permet à l'internaute d'engager une responsabilité vis-à-vis de la loi, d'effectuer un paiement ou de transmettre des renseignements nominatifs doit offrir les possibilités suivantes :
    
    • l’internaute peut annuler cette opération ;
    • l'internaute peut réviser et corriger au besoin l'information avant de confirmer cette opération ;
    • l’internaute doit confirmer cette opération

Aide à la navigation

• Revenir à la table des matières principal
• Aller à la section suivante