From 7b01d8fee8480e1f37260cb3d6eca9bd4d1e422b Mon Sep 17 00:00:00 2001 From: MewenLeHo Date: Mon, 30 Dec 2024 13:42:00 +0100 Subject: [PATCH 01/20] Add french guidelines for WCAG 2.2 3.3.8 AA and 3.3.9 AAA --- src/fr/web/developper/formulaires.md | 159 ++++++++++++++++++++++++--- 1 file changed, 144 insertions(+), 15 deletions(-) diff --git a/src/fr/web/developper/formulaires.md b/src/fr/web/developper/formulaires.md index f863b38ad..fe0ab75fc 100644 --- a/src/fr/web/developper/formulaires.md +++ b/src/fr/web/developper/formulaires.md @@ -12,12 +12,12 @@ abstract: "Formulaires, recommendations d'accessibilité web lors du développem ## Rendre accessibles les champs de formulaire -**Cible :** tout le monde, et en particulier les personnes déficientes visuelles et cognitives, avec un déficit d’attention et les utilisateurs de tactiles (mobile et tablette). +**Cible :** tout le monde, et en particulier les personnes déficientes visuelles et cognitives, avec un déficit d’attention et les utilisateurs de tactiles (mobile et tablette). **Quand :** lors de la conception et lors du développement. -**Description :** +**Description :** -Chaque champ de formulaire doit être accompagné d’un libellé ou d'instructions permettant d’identifier le rôle du champ, le type de donnée et le format attendu. +Chaque champ de formulaire doit être accompagné d’un libellé ou d'instructions permettant d’identifier le rôle du champ, le type de donnée et le format attendu. Ces informations doivent être proches visuellement du champ afin que l'utilisateur fasse facilement le lien entre eux (notamment pour les utilisateurs de zoom, de loupe logicielle, voire sur mobile). @@ -47,19 +47,19 @@ Ne pas respecter ces recommandations est un point bloquant pour tout utilisateur Pour les champs avec auto-complétion, facilite la tâche aux déficients moteur et cognitif, les dyslexiques. Cela permet d’éviter les erreurs de saisie et un gain de temps pour tous. -**Exemple valide :** +**Exemple valide :** ![capture d’écran d’un formulaire valide](../../images/formulaire.png) ![capture d’écran d’un formulaire label proche du champ](../../images/v_label.jpg) -**Exemple non-valide :** +**Exemple non-valide :** ![capture d’écran d’un formulaire auquel il manque un label](../../images/formulaire2.png) ![capture d’écran d’un formulaire label loin du champ](../../images/nv_label.jpg) **Exemple de formulaire accessible :** - + Consulter [l’exemple de formulaire accessible](../../exemples-de-composants/formulaires/) pour plus d’informations. -**Référence WCAG :** +**Référence WCAG :** - 2.4.6 Headings and Labels - 3.3.2 Labels or Instructions - 3.3.5 Help @@ -70,10 +70,10 @@ Consulter [l’exemple de formulaire accessible](../../exemples-de-composants/fo ## Détecter, identifier les erreurs et suggérer des corrections -**Cible :** tout le monde, et en particulier les personnes déficientes visuelles, cognitives, avec des difficultés pour lire ou ayant un déficit d’attention et les seniors. +**Cible :** tout le monde, et en particulier les personnes déficientes visuelles, cognitives, avec des difficultés pour lire ou ayant un déficit d’attention et les seniors. **Quand :** lors de la conception et lors du développement. -**Description :** +**Description :** Les erreurs sont automatiquement détectées, l’utilisateur est averti par la modification du titre de la page, l’élément de formulaire en erreur est identifié et l’erreur est décrite à l’utilisateur sous forme de texte. Si besoin, une correction est suggérée. @@ -89,18 +89,147 @@ L’identification du champ en erreur ainsi qu’une éventuelle suggestion de c Guider l’utilisateur en cas d’erreurs permet d’améliorer la compréhension et la correction des erreurs, pour tous les utilisateurs, en particulier pour les novices sur internet, les seniors et les personnes déficientes cognitives. -**Exemple valide :** -![capture d’écran d’un formulaire affichant des messages d’erreur à la saisie valides](../../images/formulaire-ok.png) +**Exemple valide :** +![capture d’écran d’un formulaire affichant des messages d’erreur à la saisie valides](../../images/formulaire-ok.png) -**Exemple non-valide :** +**Exemple non-valide :** ![capture d’écran d’un formulaire affichant des messages d’erreur à la saisie non-valides](../../images/formulaire-ko.png) -  +  **Exemple de formulaire accessible :** - + Consulter [l’exemple de formulaire accessible](../../exemples-de-composants/formulaires/) pour plus d’informations. -**Référence WCAG :** +**Référence WCAG :** - 3.3.1 Error Identification - 3.3.3 Error Suggestion - 3.3.4 Error Prevention (Legal, Financial, Data) + + + + +## Authentification accessible + +**Cible :** tout le monde, et en particulier les personnes déficientes visuelles et cognitives, avec un déficit d’attention et les utilisateurs de tactiles (mobile et tablette). +**Quand :** lors de la conception et lors du développement. + +**Description :** + +Chaque champ de formulaire doit être accompagné d’un libellé ou d'instructions permettant d’identifier le rôle du champ, le type de donnée et le format attendu. + +Ces informations doivent être proches visuellement du champ afin que l'utilisateur fasse facilement le lien entre eux (notamment pour les utilisateurs de zoom, de loupe logicielle, voire sur mobile). + +Chaque libellé (ou instructions) doit être inclus dans une balise `label`, elle-même associée au champ de formulaire grâce à un attribut `for` renseigné, reprenant la valeur de l’`id` du champ. + +Dans certains cas, il semble inutile d’accompagner le champ de formulaire d’un libellé car son rôle est évident (champ de recherche accompagné d’un bouton en forme de loupe par exemple, case à cocher pour sélectionner une ligne dans un tableau de données). Dans ce cas, prévoir au minimum un attribut `title`. Un libellé peut être également ajouté (reprenant la valeur du `title`), celui doit être associé au champ de formulaire et rendu invisible à l’écran (utiliser une classe de masquage accessible). + +À noter que l’attribut `title` positionné sur une balise de champ de formulaire fait office de libellé tout comme les attributs `aria-label` et `aria-labelledby` (cf. [les attributs ARIA qui peuvent vous sauver](../../../articles/attributs-aria-qui-peuvent-vous-sauver/)) dans cet ordre de préférence. + +L'attribut `autocomplete` doit être présent et pertinent pour tous les champs listés dans 7. Input Purposes for User Interface Components. + +**À vérifier :** + +S’assurer que le libellé du champ (étiquette) est suffisamment proche du champ associé. + +Aligner tous les libellés à gauche lorsque le nombre de caractères séparant le libellé le plus long de celui le plus court ne dépasse pas 6 caractères ; au-delà, aligner tous les libellés à droite. + +Si cela est pertinent, les champs ont un attribut `autocomplete` afin que l’utilisateur ait la possibilité d’utiliser une liste de propositions pré-enregistrées ou en auto-complétion. + +Pour les boutons radio et les cases à cocher, l’utilisation de la balise `label` est, parfois, à compléter par un autre dispositif (`title`, `aria-labelledby`, `aria-label` ou parfois, `fieldset` et `legend`). + +Pour les champs obligatoires, ceci doit être précisé dans le `label` via un texte explicite ("obligatoire"), si cette identification n'est pas réalisée de manière explicite, il faut en expliquer la signification comme, "Tous les champs obligatoires sont marqués d'un *",placée en début de formulaire, et/ou une propriété `aria-required`, `required`. + +**Objectif utilisateur :** + +Ne pas respecter ces recommandations est un point bloquant pour tout utilisateur de synthèse vocale mais aussi de loupe logicielle car il ne sait pas quelles valeurs entrer dans les champs. Pour les utilisateurs de mobiles et les déficients moteurs, cela permet d’activer ou de cliquer plus facilement sur les éléments de formulaire. + +Pour les champs avec auto-complétion, facilite la tâche aux déficients moteur et cognitif, les dyslexiques. Cela permet d’éviter les erreurs de saisie et un gain de temps pour tous. + +**Exemple valide :** +![capture d’écran d’un formulaire valide](../../images/formulaire.png) +![capture d’écran d’un formulaire label proche du champ](../../images/v_label.jpg) + +**Exemple non-valide :** +![capture d’écran d’un formulaire auquel il manque un label](../../images/formulaire2.png) +![capture d’écran d’un formulaire label loin du champ](../../images/nv_label.jpg) + +**Exemple de formulaire accessible :** + +Consulter [l’exemple de formulaire accessible](../../exemples-de-composants/formulaires/) pour plus d’informations. + +**Référence WCAG :** +- 2.4.6 Headings and Labels +- 3.3.2 Labels or Instructions +- 3.3.5 Help +- 1.3.5 Identify input purpose + + + + +## Détecter, identifier les erreurs et suggérer des corrections + +**Cible :** tout le monde, en particulier les personnes avec des déficiences cognitives. +**Quand :** dès la conception et pendant le développement. + +**Description :** + +Pour être accessible, aucune étape du processus d'authentification ne doit être basée sur les fonctions cognitives de l'utilisateur (ex : mémoriser un identifiant et mot de passe, saisir un mot de passe qui doit être recopié sans erreur, reproduire un schéma gestuel sur un écran tactile, résoudre une énigme), sauf si cette étape fournit au moins l'un des moyens suivants : +- une **méthode alternative d'authentification** qui ne repose pas sur la réalisation d'un test cognitif - critères 3.3.8 et 3.3.9 +- un **mécanisme** qui **aide** l'utilisateur à réaliser le test cognitif demandé pour s'authentifier (ex : gestionnaires de mots de passe qui permettent à l'utilisateur de moins faire appel à sa mémoire, possibilité de copier-coller son mot de passe pour éviter la difficulté de re saisir ce qui l'a déjà été) - critères 3.3.8 et 3.3.9 +- un test cognitif de **reconnaissance d'objets courants** (images, vidéo, audio) - critère 3.3.8 +- un test cognitif d'**identification d'un contenu personnel non textuel** (images, vidéo, audio) **préalablement fourni au site web par l'utilisateur** - critère 3.3.8 + +**Bonnes pratiques :** + +Le respect du critère 3.3.9 (AAA) repose sur la non-utilisation dans le processus d'authentification des méthodes basées sur : +- la reconnaissance d'objets courants (images, vidéo, audio) +- l'identification d'un contenu personnel non textuel (images, vidéo, audio) préalablement fourni au site web par l'utilisateur. + +**À vérifier :** + +Pour un système d'authentification par la saisie d'un identifiant et d'un mot de passe, s'assurer que : +- l'agent utilisateur (navigateur et applications de gestion de mots de passe) permet le **remplissage automatique des champs "identifiant" et "mot de passe"** +**ou** + - l'utilisateur peut **copier** son identifiant puis son mot de passe à partir d'une source locale (ex : application de gestion de mots de passe) pour ensuite les **coller** respectivement dans les champs correspondants du formulaire d'authentification ou dans une interface en ligne de commande. Le **format demandé** par les champs "identifiant" et "mot de passe" doit être le **même que celui des informations** copiées pour éviter à l'utilisateur de devoir transcrire (i.e., saisir et copier) ces informations. + +Pour un système d'authentification à 2 facteurs (double authentification), s'assurer : +- qu'il ne soit pas demandé à l'utilisateur de recopier un **code de vérification**. L'utilisateur doit disposer à minima de l'une des **aides** suivantes : + - possibilité de copier-coller le code de vérification à partir d'une application de gestion de mots de passe, d'une application de message textuel ou d'une clé de sécurité logicielle, + - ou permettre à l'agent utilisateur de remplir le champ automatiquement. +Note : lorsqu'un code de vérification doit être reçu ou généré par un deuxième appareil (ex : SMS reçu sur un mobile), la possibilité de pouvoir envoyer ce code de vérification au premier appareil n'est pas à évaluer dans ce critère. +**ou** +- que le système d'authentification à 2 facteurs ne repose pas sur des codes, mais par exemple sur une clé USB d'authentification, une application tierce (qui peut être ou non sur un 2ème appareil) qui demande à l'utilisateur de confirmer qu'il est bien à l'origine de la requête, une méthode d'authentification proposée par le système d'exploitation de l'appareil. + +Pour un système d'authentification dont l'une des étapes est un **captcha**, s'assurer qu'il y a une méthode qui n'inclut pas de test cognitif (retenir, recopier un mot, reconnaitre une image donnée par le site web), sauf si cela repose sur la reconnaissance d'objets ou l'identification d'un contenu personnel non textuel. +- Si l'authentification à double facteur se fait par la reconnaissance d'un contenu personnel non textuel, les conditions de sécurité doivent permettre d'éviter à une tierce personne de deviner quelle est l'image à reconnaitre. +- Dans le cas où l'utilisateur est obligé de transcrire du texte (ex : création pour la 1ère fois d'un mot de passe qui sera ensuite enregistré dans un logiciel de gestion de mot de passe), la possibilité de montrer les caractères saisis doit être proposée. + +**Objectif utilisateur :** + +Permettre aux utilisateurs ayant des problèmes cognitifs (mémoire, dyslexie, dyscalculie, capacités cognitives limitées) de s'authentifier . + +**Exemples valides (AA et AAA) :** + +Système d'**authentification à 2 facteurs** : authentification sur le navigateur web d'un ordinateur qui nécessite un **code de vérification reçu par SMS sur le téléphone mobile**. Dans la plupart des cas, il est possible d'envoyer le code sur l'appareil où il peut ensuite être copié-collé, par exemple en le copiant-collant dans un mail sur le téléphone pour l'envoyer sur l'ordinateur ou en passant une application de presse-papier. + +Un site web utilise un **couple identifiant** (nom d'utilisateur ou adresse mail) et **mot de passe pour** l'authentification de la connexion (satisfaisant au critère de réussite "1.3.5 But de l'entrée" et au critère de réussite "4.1.2 : Nom, rôle, valeur"). Le navigateur de l'utilisateur ou une extension de gestionnaire de mot de passe tiers intégrée peut identifier la fonction de ces 2 champs et **remplir automatiquement l'identifiant** et le mot de passe. + +Un site web utilise **WebAuthn** pour que l'utilisateur puisse s'**authentifier avec son appareil plutôt qu'avec son nom d'utilisateur et son mot de passe**. L'appareil de l'utilisateur peut utiliser n'importe quelle modalité disponible. Les méthodes les plus courantes sur les ordinateurs portables et les téléphones sont la reconnaissance faciale, les empreintes digitales et le code PIN (numéro d'identification personnel). Le site web n'impose aucune utilisation particulière, il est supposé que l'utilisateur choisira la méthode qui lui convient. + +Un site web offre la possibilité de se connecter avec un fournisseur tiers en utilisant la méthode **OAuth**. + +Un site web qui requiert une **authentification à deux facteurs** offre **plusieurs options pour le deuxième facteur**, y compris une méthode basée sur une clé USB où l'utilisateur clique simplement sur un bouton pour entrer un code valable pendant une durée limitée. + +Un site web qui requiert une **authentification à deux facteurs** affiche un **QR code** qui peut être scanné par une application sur l'appareil de l'utilisateur pour confirmer son identité. + +Un site web qui requiert une **authentification à deux facteurs** envoie une notification à l'appareil de l'utilisateur. L'utilisateur doit utiliser le **mécanisme d'authentification de son appareil** (par exemple, un code PIN défini par l'utilisateur, une empreinte digitale, une reconnaissance faciale) pour confirmer son identité. + +**Exemple non-valide :** + +Exemple qui empêche un utilisateur de saisir un mot de passe ou un code de vérification dans le même format que celui dans lequel il a initialement été créé : +- Un formulaire qui demande à l'utilisateur de saisir les 4 derniers chiffres de son identifiant dans 4 champs différents. + Exception : l'utilisateur peut copier son code puis le coller dans un premier champ. Les caractères seront automatiquement répartis dans les champs suivants. + +**Référence WCAG :** +- 3.3.8 Accessible Authentication (Minimum) +- 3.3.9 Accessible Authentication (Enhanced) From 0cbe9beacaf5a27bc77616e98fa20aa8c58fce18 Mon Sep 17 00:00:00 2001 From: MewenLeHo Date: Mon, 30 Dec 2024 14:00:17 +0100 Subject: [PATCH 02/20] Fix titles --- src/fr/web/developper/formulaires.md | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/src/fr/web/developper/formulaires.md b/src/fr/web/developper/formulaires.md index fe0ab75fc..969b78866 100644 --- a/src/fr/web/developper/formulaires.md +++ b/src/fr/web/developper/formulaires.md @@ -108,7 +108,7 @@ Consulter [l’exemple de formulaire accessible](../../exemples-de-composants/fo -## Authentification accessible +## Détecter, identifier les erreurs et suggérer des corrections **Cible :** tout le monde, et en particulier les personnes déficientes visuelles et cognitives, avec un déficit d’attention et les utilisateurs de tactiles (mobile et tablette). **Quand :** lors de la conception et lors du développement. @@ -166,7 +166,7 @@ Consulter [l’exemple de formulaire accessible](../../exemples-de-composants/fo -## Détecter, identifier les erreurs et suggérer des corrections +## Authentification accessible **Cible :** tout le monde, en particulier les personnes avec des déficiences cognitives. **Quand :** dès la conception et pendant le développement. From 457fd2e1102ef93ec63fd7a7009f0f56dd1ffab0 Mon Sep 17 00:00:00 2001 From: MewenLeHo Date: Mon, 30 Dec 2024 15:21:03 +0100 Subject: [PATCH 03/20] Fix --- src/fr/web/developper/formulaires.md | 6 +----- 1 file changed, 1 insertion(+), 5 deletions(-) diff --git a/src/fr/web/developper/formulaires.md b/src/fr/web/developper/formulaires.md index 969b78866..447706b9d 100644 --- a/src/fr/web/developper/formulaires.md +++ b/src/fr/web/developper/formulaires.md @@ -7,9 +7,6 @@ abstract: "Formulaires, recommendations d'accessibilité web lors du développem

S’assurer que l’utilisateur puisse efficacement compléter les formulaires

- - - ## Rendre accessibles les champs de formulaire **Cible :** tout le monde, et en particulier les personnes déficientes visuelles et cognitives, avec un déficit d’attention et les utilisateurs de tactiles (mobile et tablette). @@ -39,7 +36,7 @@ Si cela est pertinent, les champs ont un attribut `autocomplete` afin que l’ut Pour les boutons radio et les cases à cocher, l’utilisation de la balise `label` est, parfois, à compléter par un autre dispositif (`title`, `aria-labelledby`, `aria-label` ou parfois, `fieldset` et `legend`). -Pour les champs obligatoires, ceci doit être précisé dans le `label` via un texte explicite ("obligatoire"), si cette identification n'est pas réalisée de manière explicite, il faut en expliquer la signification comme, "Tous les champs obligatoires sont marqués d'un *",placée en début de formulaire, et/ou une propriété `aria-required`, `required`. +Pour les champs obligatoires, ceci doit être précisé dans le `label` via un texte explicite ("obligatoire"), si cette identification n'est pas réalisée de manière explicite, il faut en expliquer la signification comme, "Tous les champs obligatoires sont marqués d'un *", placée en début de formulaire, et/ou une propriété `aria-required`, `required`. **Objectif utilisateur :** @@ -108,7 +105,6 @@ Consulter [l’exemple de formulaire accessible](../../exemples-de-composants/fo -## Détecter, identifier les erreurs et suggérer des corrections **Cible :** tout le monde, et en particulier les personnes déficientes visuelles et cognitives, avec un déficit d’attention et les utilisateurs de tactiles (mobile et tablette). **Quand :** lors de la conception et lors du développement. From e657aaaa966e3e36f9039935e0d95f796706b91f Mon Sep 17 00:00:00 2001 From: MewenLeHo Date: Mon, 30 Dec 2024 16:43:17 +0100 Subject: [PATCH 04/20] Add english guidelines for WCAG 2.2 3.3.8 AA and 3.3.9 AAA + fix somes typos --- src/en/web/develop/forms.md | 108 +++++++++++++++++++++------ src/fr/web/developper/formulaires.md | 6 +- 2 files changed, 88 insertions(+), 26 deletions(-) diff --git a/src/en/web/develop/forms.md b/src/en/web/develop/forms.md index 0067cdb10..da7978f1d 100644 --- a/src/en/web/develop/forms.md +++ b/src/en/web/develop/forms.md @@ -7,17 +7,14 @@ abstract: "Forms, web accessibility dev recommandations"

Ensure that the user can effectively complete the forms

- - - ## Make form fields accessible -**Target:** everyone and especially people with visual impairments, cognitive limitations, experiencing attention difficulties and mobile and tablet users. +**Target:** everyone and especially people with visual impairments, cognitive limitations, experiencing attention difficulties and mobile and tablet users. **When:** during design and development. -**Description:** +**Description:** -Each form input must be associated with a label identifying the function of the field, the type of data and the expected format. +Each form input must be associated with a label identifying the function of the field, the type of data and the expected format. This label should be visually close to the field so we can easily mentally link them (especially for people using zoom or software magnifier or even mobile users). @@ -36,7 +33,7 @@ Align all labels to the left when the number of characters separating the longes If relevant, the fields have an `autocomplete` attribute so that the user can use a list of pre-recorded or auto-complete proposals. -For radio and check box buttons, in addition to the label tag you can use other tags (`title`, `aria-labelledby`, `aria-label` or, in some cases, `fieldset` and `legend`). +For radio and check box buttons, in addition to the label tag you can use other tags (`title`, `aria-labelledby`, `aria-label` or, in some cases, `fieldset` and `legend`). For required fields, this should be specified in the label using an image, a text symbol (`*` for example) or text and / or the `aria-required` property. @@ -45,31 +42,28 @@ For required fields, this should be specified in the label using an image, a tex Not meeting this requirement is a blocking point for all users using speech synthesis. For mobile users and motor deficient it allows to click on the form elements more easily. For fields with auto-completion, this avoids users input errors. -**Do:** +**Do:** ![screenshot of a valid form](../../images/formulaire.png) - +   -**Don’t:** +**Don’t:** ![screenshot of a form with a missing label](../../images/formulaire2.png) **Example of an accessible form:** - + See [the example of an accessible form](../../components-examples/forms/) for more details. -**Reference WCAG :** +**Reference WCAG :** - 3.3.2 Labels or Instructions - 3.3.5 Help - 1.3.5 Identify input purpose - - - ## Detect, identify errors and suggest corrections - -**Target:** everyone and particularly people with visual impairments, cognitive limitations, reading or attention difficulties and elderly people. + +**Target:** everyone and particularly people with visual impairments, cognitive limitations, reading or attention difficulties and elderly people. **When:** as of design and during development. **Description:** @@ -78,7 +72,7 @@ The errors are automatically detected, the user is warned by a page title change Finally, the wording of the error messages should be explicit. -For web pages that involve important actions (legal commitment, financial transaction, modification or deletion of important data, response to a test or examination ...), the action must be reversible or go through a confirmation step to verify or correct the entry in case of error. +For web pages that involve important actions (legal commitment, financial transaction, modification or deletion of important data, response to a test or examination...), the action must be reversible or go through a confirmation step to verify or correct the entry in case of error. **Checklist:** @@ -88,10 +82,10 @@ Identifying the invalid field, as well as displaying a suggestion of correction Guide users when errors happen to improve the understanding and help them correct the errors, especially for internet beginners, elderly people and cognitively deficient. -**Do:** -![screenshot of a form that displays relevant error messages](../../images/formulaire-ok.png) +**Do:** +![screenshot of a form that displays relevant error messages](../../images/formulaire-ok.png) -**Don’t:** +**Don’t:** ![screenshot of a form displaying irrelevant error messages](../../images/formulaire-ko.png) @@ -99,7 +93,75 @@ Guide users when errors happen to improve the understanding and help them correc See [the accessible form example](../../components-examples/forms/) for more details. -**Reference WCAG :** +**Reference WCAG :** - 3.3.1 Error Identification - 3.3.3 Error Suggestion -- 3.3.4 Error Prevention (Legal, Financial, Data) \ No newline at end of file +- 3.3.4 Error Prevention (Legal, Financial, Data) + +## Accessible authentification + +**Target:** everyone, especially people with cognitive disabilities. +**When:** right from the design and during development. + +**Description:** + +To be accessible, no step in the authentication process should be based on the user cognitive functions (i.e., memorizing and transcribing a username and password, performing a gesture pattern on a touch screen, solving an enigma), unless that provides at least one of the following: +- An alternative authentication method which does not rely on a cognitive function test - criteria 3.3.8 and 3.3.9 +- A mechanism to assist the user in completing the cognitive function test required to authenticate (i.e., password managers to reduce memory need, possibility to copy and paste to reduce the cognitive burden of re-typing) - criteria 3.3.8 and 3.3.9 +- A cognitive function test to recognize common objects (images, videos, audios) - criteria 3.3.8 and 3.3.9 +- A cognitive function test to identify non-text personal content (images, videos, audios) previously provided to the website by the user - criteria 3.3.8 and 3.3.9 + +**Good practice:** + +Compliance with criterion 3.3.9 (AAA) is based on the non-use in the authentication process of methods based on: +- recognition of current objects (images, video, audio) +- identification of non-textual personal content (images, video, audio) previously supplied to the website by the user + +**Checklist:** + +For authentication by login and password, make sure: +- the user agent (browser and password management applications) **automatically fills in the "login" and "password" fields** +**or** +- the user can **copy** his login and password from a local source (e.g., password management application) and **paste** them into the corresponding fields on the authentication form or in a command-line interface. The **format requested** by the "login" and "password" fields must be the **same as the copied informations**, to avoid the user having to transcribe (i.e., enter and copy) these informations. + +For a 2-factor authentication system (double authentication), make sure: +- the user is not asked to copy a verification code. The user must have at least one of the following **aids**: + - the possibility of copying and pasting the **verification code** from a password management application, a text message application or a software security key, + - or allow the user agent to fill in the field automatically. +Note: When a verification code must be received or generated by a second device (e.g., SMS received on a cell phone), the ability to send this verification code to the first device is not to be evaluated in this criterion. +or +- the **2-factor authentication** system **does not rely on codes**, but for example on a USB authentication key, a third-party application (which may or may not be on a 2nd device) asking the user to confirm that he is at the origin of the request, or an authentication method proposed by the device operating system. + +For an authentication system in which one of the steps is a **captcha**, make sure there is a method that doesn't include a cognitive test (remembering, copying a word, recognizing an image given by the website), unless it's based on object recognition or the identification of non-textual personal content. +- If the two-factor authentication is based on recognition of non-textual personal content, the security conditions must prevent a third party from guessing which image is to be recognized. +- If the user is required to transcribe text (e.g., when creating a password for the first time, which will then be stored in password management software), the possibility of showing the characters entered must be proposed. + +**Users' goal:** + +Allow users with cognitive disabilities (memory, dyslexia, dyscalculia, limited cognitive abilities) to authenticate. + +**Do (AA et AAA):** + +**2-factor authentication system**: authentication on a computer's web browser that requires a **verification code received by SMS on the mobile phone**. In most cases, the code can be send to the device, where it can then be copied and pasted, for example by copying and pasting it into an email on the phone and sending it to the computer, or by using a clipboard application. + +A website uses a **login/password** for login authentication (satisfying Success Criteria "1.3.5 Purpose of entry" and Success Criteria "4.1.2: Name, role, value"). The user's browser or an integrated third-party password manager extension can identify the function of these 2 fields and **automatically fill** in the login and password. + +A website uses **WebAuthn** to allow the user **authenticate with their device rather than their login and password**. The user's device can use any available method. The most common methods on laptops and phones are facial recognition, fingerprints and PIN (Personal Identification Number). The website does not require any particular use; it is assumed that the user will choose the most appropriate method. + +A website offers the possibility of connecting with a third-party provider using the **OAuth** method. + +A website requiring two-factor authentication offers several options for the second factor, including a USB key-based method where the user simply clicks a button to enter a code valid for a limited time. + +A website requiring two-factor authentication displays a QR code that can be scanned by an app on the user's device to confirm identity. + +A website requiring two-factor authentication sends a notification to the user's device. The user must use their device's authentication mechanism (e.g., user-defined PIN, fingerprint, facial recognition) to confirm their identity. + +**Don't:** + +Examples that prevent a user from entering a password or verification code in the same format in which it was initially created: +- A form that asks the user to enter the last 4 digits of their username into 4 different fields. + Exception: the user can copy the code and paste it into the first field. The characters will be automatically distributed into the following fields. + +**Reference WCAG:** +- 3.3.8 Accessible Authentication (Minimum) +- 3.3.9 Accessible Authentication (Enhanced) \ No newline at end of file diff --git a/src/fr/web/developper/formulaires.md b/src/fr/web/developper/formulaires.md index 447706b9d..8f69ef5b5 100644 --- a/src/fr/web/developper/formulaires.md +++ b/src/fr/web/developper/formulaires.md @@ -180,7 +180,7 @@ Pour être accessible, aucune étape du processus d'authentification ne doit êt Le respect du critère 3.3.9 (AAA) repose sur la non-utilisation dans le processus d'authentification des méthodes basées sur : - la reconnaissance d'objets courants (images, vidéo, audio) - l'identification d'un contenu personnel non textuel (images, vidéo, audio) préalablement fourni au site web par l'utilisateur. - +<> **À vérifier :** Pour un système d'authentification par la saisie d'un identifiant et d'un mot de passe, s'assurer que : @@ -202,11 +202,11 @@ Pour un système d'authentification dont l'une des étapes est un **captcha**, s **Objectif utilisateur :** -Permettre aux utilisateurs ayant des problèmes cognitifs (mémoire, dyslexie, dyscalculie, capacités cognitives limitées) de s'authentifier . +Permettre aux utilisateurs ayant des problèmes cognitifs (mémoire, dyslexie, dyscalculie, capacités cognitives limitées) de s'authentifier. **Exemples valides (AA et AAA) :** -Système d'**authentification à 2 facteurs** : authentification sur le navigateur web d'un ordinateur qui nécessite un **code de vérification reçu par SMS sur le téléphone mobile**. Dans la plupart des cas, il est possible d'envoyer le code sur l'appareil où il peut ensuite être copié-collé, par exemple en le copiant-collant dans un mail sur le téléphone pour l'envoyer sur l'ordinateur ou en passant une application de presse-papier. +Système d'**authentification à 2 facteurs** : authentification sur le navigateur web d'un ordinateur qui nécessite un **code de vérification reçu par SMS sur le téléphone mobile**. Dans la plupart des cas, il est possible d'envoyer le code sur l'appareil où il peut ensuite être copié-collé, par exemple en le copiant-collant dans un mail sur le téléphone pour l'envoyer sur l'ordinateur ou en passant une application de presse-papier. Un site web utilise un **couple identifiant** (nom d'utilisateur ou adresse mail) et **mot de passe pour** l'authentification de la connexion (satisfaisant au critère de réussite "1.3.5 But de l'entrée" et au critère de réussite "4.1.2 : Nom, rôle, valeur"). Le navigateur de l'utilisateur ou une extension de gestionnaire de mot de passe tiers intégrée peut identifier la fonction de ces 2 champs et **remplir automatiquement l'identifiant** et le mot de passe. From 796475500437e6464767d8d44a8706997b2f0e70 Mon Sep 17 00:00:00 2001 From: MewenLeHo Date: Mon, 30 Dec 2024 17:07:49 +0100 Subject: [PATCH 05/20] Fix --- src/en/web/develop/forms.md | 2 +- src/fr/web/developper/formulaires.md | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/src/en/web/develop/forms.md b/src/en/web/develop/forms.md index da7978f1d..9268cab6c 100644 --- a/src/en/web/develop/forms.md +++ b/src/en/web/develop/forms.md @@ -129,7 +129,7 @@ For a 2-factor authentication system (double authentication), make sure: - the possibility of copying and pasting the **verification code** from a password management application, a text message application or a software security key, - or allow the user agent to fill in the field automatically. Note: When a verification code must be received or generated by a second device (e.g., SMS received on a cell phone), the ability to send this verification code to the first device is not to be evaluated in this criterion. -or +**or** - the **2-factor authentication** system **does not rely on codes**, but for example on a USB authentication key, a third-party application (which may or may not be on a 2nd device) asking the user to confirm that he is at the origin of the request, or an authentication method proposed by the device operating system. For an authentication system in which one of the steps is a **captcha**, make sure there is a method that doesn't include a cognitive test (remembering, copying a word, recognizing an image given by the website), unless it's based on object recognition or the identification of non-textual personal content. diff --git a/src/fr/web/developper/formulaires.md b/src/fr/web/developper/formulaires.md index 8f69ef5b5..66a090243 100644 --- a/src/fr/web/developper/formulaires.md +++ b/src/fr/web/developper/formulaires.md @@ -180,7 +180,7 @@ Pour être accessible, aucune étape du processus d'authentification ne doit êt Le respect du critère 3.3.9 (AAA) repose sur la non-utilisation dans le processus d'authentification des méthodes basées sur : - la reconnaissance d'objets courants (images, vidéo, audio) - l'identification d'un contenu personnel non textuel (images, vidéo, audio) préalablement fourni au site web par l'utilisateur. -<> + **À vérifier :** Pour un système d'authentification par la saisie d'un identifiant et d'un mot de passe, s'assurer que : From 0804c0a77efb6164740a77a3946b2e1a2037ab07 Mon Sep 17 00:00:00 2001 From: MewenLeHo Date: Mon, 30 Dec 2024 17:08:20 +0100 Subject: [PATCH 06/20] Fix --- src/fr/web/developper/formulaires.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/fr/web/developper/formulaires.md b/src/fr/web/developper/formulaires.md index 66a090243..40f60bfd3 100644 --- a/src/fr/web/developper/formulaires.md +++ b/src/fr/web/developper/formulaires.md @@ -186,7 +186,7 @@ Le respect du critère 3.3.9 (AAA) repose sur la non-utilisation dans le process Pour un système d'authentification par la saisie d'un identifiant et d'un mot de passe, s'assurer que : - l'agent utilisateur (navigateur et applications de gestion de mots de passe) permet le **remplissage automatique des champs "identifiant" et "mot de passe"** **ou** - - l'utilisateur peut **copier** son identifiant puis son mot de passe à partir d'une source locale (ex : application de gestion de mots de passe) pour ensuite les **coller** respectivement dans les champs correspondants du formulaire d'authentification ou dans une interface en ligne de commande. Le **format demandé** par les champs "identifiant" et "mot de passe" doit être le **même que celui des informations** copiées pour éviter à l'utilisateur de devoir transcrire (i.e., saisir et copier) ces informations. +- l'utilisateur peut **copier** son identifiant puis son mot de passe à partir d'une source locale (ex : application de gestion de mots de passe) pour ensuite les **coller** respectivement dans les champs correspondants du formulaire d'authentification ou dans une interface en ligne de commande. Le **format demandé** par les champs "identifiant" et "mot de passe" doit être le **même que celui des informations** copiées pour éviter à l'utilisateur de devoir transcrire (i.e., saisir et copier) ces informations. Pour un système d'authentification à 2 facteurs (double authentification), s'assurer : - qu'il ne soit pas demandé à l'utilisateur de recopier un **code de vérification**. L'utilisateur doit disposer à minima de l'une des **aides** suivantes : From 3a47a5b4932fa0f1454fd7d9c58cea267a0ebbaf Mon Sep 17 00:00:00 2001 From: MewenLeHo Date: Tue, 31 Dec 2024 10:01:40 +0100 Subject: [PATCH 07/20] Fix semantic --- src/en/web/develop/forms.md | 10 +++++++--- src/fr/web/developper/formulaires.md | 4 ++++ 2 files changed, 11 insertions(+), 3 deletions(-) diff --git a/src/en/web/develop/forms.md b/src/en/web/develop/forms.md index 9268cab6c..bc65e1ad6 100644 --- a/src/en/web/develop/forms.md +++ b/src/en/web/develop/forms.md @@ -55,7 +55,7 @@ For fields with auto-completion, this avoids users input errors. See [the example of an accessible form](../../components-examples/forms/) for more details. -**Reference WCAG :** +**Reference WCAG:** - 3.3.2 Labels or Instructions - 3.3.5 Help - 1.3.5 Identify input purpose @@ -93,7 +93,7 @@ Guide users when errors happen to improve the understanding and help them correc See [the accessible form example](../../components-examples/forms/) for more details. -**Reference WCAG :** +**Reference WCAG:** - 3.3.1 Error Identification - 3.3.3 Error Suggestion - 3.3.4 Error Prevention (Legal, Financial, Data) @@ -121,7 +121,9 @@ Compliance with criterion 3.3.9 (AAA) is based on the non-use in the authenticat For authentication by login and password, make sure: - the user agent (browser and password management applications) **automatically fills in the "login" and "password" fields** + **or** + - the user can **copy** his login and password from a local source (e.g., password management application) and **paste** them into the corresponding fields on the authentication form or in a command-line interface. The **format requested** by the "login" and "password" fields must be the **same as the copied informations**, to avoid the user having to transcribe (i.e., enter and copy) these informations. For a 2-factor authentication system (double authentication), make sure: @@ -129,7 +131,9 @@ For a 2-factor authentication system (double authentication), make sure: - the possibility of copying and pasting the **verification code** from a password management application, a text message application or a software security key, - or allow the user agent to fill in the field automatically. Note: When a verification code must be received or generated by a second device (e.g., SMS received on a cell phone), the ability to send this verification code to the first device is not to be evaluated in this criterion. + **or** + - the **2-factor authentication** system **does not rely on codes**, but for example on a USB authentication key, a third-party application (which may or may not be on a 2nd device) asking the user to confirm that he is at the origin of the request, or an authentication method proposed by the device operating system. For an authentication system in which one of the steps is a **captcha**, make sure there is a method that doesn't include a cognitive test (remembering, copying a word, recognizing an image given by the website), unless it's based on object recognition or the identification of non-textual personal content. @@ -162,6 +166,6 @@ Examples that prevent a user from entering a password or verification code in th - A form that asks the user to enter the last 4 digits of their username into 4 different fields. Exception: the user can copy the code and paste it into the first field. The characters will be automatically distributed into the following fields. -**Reference WCAG:** +**Reference WCAG:** - 3.3.8 Accessible Authentication (Minimum) - 3.3.9 Accessible Authentication (Enhanced) \ No newline at end of file diff --git a/src/fr/web/developper/formulaires.md b/src/fr/web/developper/formulaires.md index 40f60bfd3..694dc0800 100644 --- a/src/fr/web/developper/formulaires.md +++ b/src/fr/web/developper/formulaires.md @@ -185,7 +185,9 @@ Le respect du critère 3.3.9 (AAA) repose sur la non-utilisation dans le process Pour un système d'authentification par la saisie d'un identifiant et d'un mot de passe, s'assurer que : - l'agent utilisateur (navigateur et applications de gestion de mots de passe) permet le **remplissage automatique des champs "identifiant" et "mot de passe"** + **ou** + - l'utilisateur peut **copier** son identifiant puis son mot de passe à partir d'une source locale (ex : application de gestion de mots de passe) pour ensuite les **coller** respectivement dans les champs correspondants du formulaire d'authentification ou dans une interface en ligne de commande. Le **format demandé** par les champs "identifiant" et "mot de passe" doit être le **même que celui des informations** copiées pour éviter à l'utilisateur de devoir transcrire (i.e., saisir et copier) ces informations. Pour un système d'authentification à 2 facteurs (double authentification), s'assurer : @@ -193,7 +195,9 @@ Pour un système d'authentification à 2 facteurs (double authentification), s'a - possibilité de copier-coller le code de vérification à partir d'une application de gestion de mots de passe, d'une application de message textuel ou d'une clé de sécurité logicielle, - ou permettre à l'agent utilisateur de remplir le champ automatiquement. Note : lorsqu'un code de vérification doit être reçu ou généré par un deuxième appareil (ex : SMS reçu sur un mobile), la possibilité de pouvoir envoyer ce code de vérification au premier appareil n'est pas à évaluer dans ce critère. + **ou** + - que le système d'authentification à 2 facteurs ne repose pas sur des codes, mais par exemple sur une clé USB d'authentification, une application tierce (qui peut être ou non sur un 2ème appareil) qui demande à l'utilisateur de confirmer qu'il est bien à l'origine de la requête, une méthode d'authentification proposée par le système d'exploitation de l'appareil. Pour un système d'authentification dont l'une des étapes est un **captcha**, s'assurer qu'il y a une méthode qui n'inclut pas de test cognitif (retenir, recopier un mot, reconnaitre une image donnée par le site web), sauf si cela repose sur la reconnaissance d'objets ou l'identification d'un contenu personnel non textuel. From 3577b3967a9495ee7277851a0933a1230639becd Mon Sep 17 00:00:00 2001 From: MewenLeHo Date: Tue, 31 Dec 2024 10:39:43 +0100 Subject: [PATCH 08/20] Fix --- src/en/web/develop/forms.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/en/web/develop/forms.md b/src/en/web/develop/forms.md index bc65e1ad6..fe2d56413 100644 --- a/src/en/web/develop/forms.md +++ b/src/en/web/develop/forms.md @@ -166,6 +166,6 @@ Examples that prevent a user from entering a password or verification code in th - A form that asks the user to enter the last 4 digits of their username into 4 different fields. Exception: the user can copy the code and paste it into the first field. The characters will be automatically distributed into the following fields. -**Reference WCAG:** +**WCAG reference:** - 3.3.8 Accessible Authentication (Minimum) - 3.3.9 Accessible Authentication (Enhanced) \ No newline at end of file From 73cb86d6f2014514d908ee7adb5c7ddd0ad13aa3 Mon Sep 17 00:00:00 2001 From: MewenLeHo Date: Tue, 31 Dec 2024 14:48:19 +0100 Subject: [PATCH 09/20] Add french tests for WCAG 2.2 3.3.8 AA and 3.3.9 AAA --- .../json/checklist/tests-concepteur-fr.json | 21 +++++++++++++++++++ 1 file changed, 21 insertions(+) diff --git a/src/assets/json/checklist/tests-concepteur-fr.json b/src/assets/json/checklist/tests-concepteur-fr.json index 7d545fc1c..21f58a945 100644 --- a/src/assets/json/checklist/tests-concepteur-fr.json +++ b/src/assets/json/checklist/tests-concepteur-fr.json @@ -559,6 +559,27 @@ "raccourcis": "", "profils": ["Concepteur"] }, + { + "themes":"Formulaires", + "title":"Vérifier l'accessibilité du parcours d'authentification", + "type": [], + "tests": [ + "Cas 1 - Pour chaque champ de formulaire qui attend la saisie d'un mot de passe ou d'un code : faire le parcours d'authentification.", + "Cas 2 - Pour chaque parcours d'authentification à double facteur, faire le parcours d'authentification.", + "Cas 3 - Pour chaque parcours d'authentification dont l'une des étapes est un captcha, s'assurer qu'une alternative qui ne repose pas sur un test cognitif est proposée." + ], + "verifier": [ + "Cas 1 - Vérifier que le champ de saisie permet au choix :
  • à l'utilisateur de coller le mot de passe en entier ou le code de vérification
  • le remplissage automatique des champs
dans le format initial (exemple : respect des majuscules et minuscules) de création de ce mot de passe ou code de vérification.", + "Tous les cas - Vérifier que le processus d'authentification proposé ne repose pas sur un test cognitif (exemple : mémoriser ou saisir un identifiant et un mot de passe qui doivent être recopiés sans erreur) tel que le critère 3.3.8 ou 3.3.9 le décrit. " + ], + "resultat": [ + "Cas 1 - Vérifier que le champ de saisie permet au choix :
  • à l'utilisateur de coller le mot de passe en entier ou le code de vérification
  • le remplissage automatique des champs
dans le format initial (exemple : respect des majuscules et minuscules) de création de ce mot de passe ou code de vérification.", + "Tous les cas - Le processus d'authentification proposé ne repose pas sur un test cognitif (exemple : mémoriser ou saisir un identifiant et un mot de passe qui doivent être recopiés sans erreur) tel que le critère 3.3.8 ou 3.3.9 le décrit." + ], + "exception": "", + "raccourcis": "", + "profils": ["Concepteur"] + }, { "themes":"Tactile et interactions", "title":"Proposer une alternative aux gestuelles complexes", From 772d55cf615262f9445ddc57debce9cc7051b317 Mon Sep 17 00:00:00 2001 From: MewenLeHo Date: Tue, 31 Dec 2024 16:56:59 +0100 Subject: [PATCH 10/20] Add english tests for WCAG 2.2 3.3.8 AA and 3.3.9 AAA --- .../json/checklist/tests-concepteur-en.json | 21 +++++++++++++++++++ .../json/checklist/tests-concepteur-fr.json | 2 +- 2 files changed, 22 insertions(+), 1 deletion(-) diff --git a/src/assets/json/checklist/tests-concepteur-en.json b/src/assets/json/checklist/tests-concepteur-en.json index d59612cab..76b0d7703 100644 --- a/src/assets/json/checklist/tests-concepteur-en.json +++ b/src/assets/json/checklist/tests-concepteur-en.json @@ -559,6 +559,27 @@ "raccourcis": "", "profils": ["Designer"] }, + { + "themes":"Forms", + "title":"Ensure that the authentication process is easy to use, secure and do not rely only on a cognitive function test", + "type": [], + "tests": [ + "Case 1 - For each form field that requires a password or code to be entered: complete the authentication pathway.", + "Case 2 - For each two-factor authentication path, complete the authentication pathway.", + "Case 3 - For each authentication journey where one of the steps is a CAPTCHA, ensure that a non cognitive alternative is proposed." + ], + "verifier": [ + "Case 1 - Check that the input field allows for the following options:
  • the user to paste in the whole password or the verification code
  • the automatic filling of field
in the original format (e.g., case-sensitive) in which the password or verification code was created.", + "All cases - Check that the proposed authentication process does not rely on a cognitive test (e.g., memorizing or entering an login/password which must be accurately reproduced) as described in criteria 3.3.8 or 3.3.9." + ], + "resultat": [ + "Case 1 - Check that the input field allows for the following options:
  • the user to paste in the whole password or the verification code
  • the automatic filling of field
in the original format (e.g., case-sensitive) in which the password or verification code was created.", + "All cases - Check that the proposed authentication process does not rely on a cognitive test (e.g., memorizing or entering an login/password which must be accurately reproduced) as described in criteria 3.3.8 or 3.3.9." + ], + "exception": "", + "raccourcis": "", + "profils": ["Designer"] + }, { "themes": "Touch and interactions", "title": "Provide an alternative to complex gestures", diff --git a/src/assets/json/checklist/tests-concepteur-fr.json b/src/assets/json/checklist/tests-concepteur-fr.json index 21f58a945..539bc6b07 100644 --- a/src/assets/json/checklist/tests-concepteur-fr.json +++ b/src/assets/json/checklist/tests-concepteur-fr.json @@ -561,7 +561,7 @@ }, { "themes":"Formulaires", - "title":"Vérifier l'accessibilité du parcours d'authentification", + "title":"S'assurer que le processus d'authentification est facile à utiliser, sécurisé et ne repose pas exclusivement sur les fonction cognitives", "type": [], "tests": [ "Cas 1 - Pour chaque champ de formulaire qui attend la saisie d'un mot de passe ou d'un code : faire le parcours d'authentification.", From c017d5ed3afcbef4fcd939576e643cea5a788727 Mon Sep 17 00:00:00 2001 From: MewenLeHo Date: Tue, 7 Jan 2025 17:21:15 +0100 Subject: [PATCH 11/20] Fix after conflict and merge --- src/fr/web/developper/formulaires.md | 61 +--------------------------- 1 file changed, 2 insertions(+), 59 deletions(-) diff --git a/src/fr/web/developper/formulaires.md b/src/fr/web/developper/formulaires.md index 06f4d6b69..ff965f85e 100644 --- a/src/fr/web/developper/formulaires.md +++ b/src/fr/web/developper/formulaires.md @@ -44,11 +44,11 @@ Ne pas respecter ces recommandations est un point bloquant pour tout utilisateur Pour les champs avec auto-complétion, facilite la tâche aux déficients moteur et cognitif, les dyslexiques. Cela permet d’éviter les erreurs de saisie et un gain de temps pour tous. -**Exemples valides :** +**Exemples valides :** ![capture d’écran d’un formulaire valide](../../images/formulaire.png) ![capture d’écran d’un formulaire label proche du champ](../../images/v_label.jpg) -**Exemples non-valides :** +**Exemples non-valides :** ![capture d’écran d’un formulaire auquel il manque un label](../../images/formulaire2.png) ![capture d’écran d’un formulaire label loin du champ](../../images/nv_label.jpg) @@ -105,63 +105,6 @@ Consulter [l’exemple de formulaire accessible](../../exemples-de-composants/fo - -**Cible :** tout le monde, et en particulier les personnes déficientes visuelles et cognitives, avec un déficit d’attention et les utilisateurs de tactiles (mobile et tablette). -**Quand :** lors de la conception et lors du développement. - -**Description :** - -Chaque champ de formulaire doit être accompagné d’un libellé ou d'instructions permettant d’identifier le rôle du champ, le type de donnée et le format attendu. - -Ces informations doivent être proches visuellement du champ afin que l'utilisateur fasse facilement le lien entre eux (notamment pour les utilisateurs de zoom, de loupe logicielle, voire sur mobile). - -Chaque libellé (ou instructions) doit être inclus dans une balise `label`, elle-même associée au champ de formulaire grâce à un attribut `for` renseigné, reprenant la valeur de l’`id` du champ. - -Dans certains cas, il semble inutile d’accompagner le champ de formulaire d’un libellé car son rôle est évident (champ de recherche accompagné d’un bouton en forme de loupe par exemple, case à cocher pour sélectionner une ligne dans un tableau de données). Dans ce cas, prévoir au minimum un attribut `title`. Un libellé peut être également ajouté (reprenant la valeur du `title`), celui doit être associé au champ de formulaire et rendu invisible à l’écran (utiliser une classe de masquage accessible). - -À noter que l’attribut `title` positionné sur une balise de champ de formulaire fait office de libellé tout comme les attributs `aria-label` et `aria-labelledby` (cf. [les attributs ARIA qui peuvent vous sauver](../../../articles/attributs-aria-qui-peuvent-vous-sauver/)) dans cet ordre de préférence. - -L'attribut `autocomplete` doit être présent et pertinent pour tous les champs listés dans 7. Input Purposes for User Interface Components. - -**À vérifier :** - -S’assurer que le libellé du champ (étiquette) est suffisamment proche du champ associé. - -Aligner tous les libellés à gauche lorsque le nombre de caractères séparant le libellé le plus long de celui le plus court ne dépasse pas 6 caractères ; au-delà, aligner tous les libellés à droite. - -Si cela est pertinent, les champs ont un attribut `autocomplete` afin que l’utilisateur ait la possibilité d’utiliser une liste de propositions pré-enregistrées ou en auto-complétion. - -Pour les boutons radio et les cases à cocher, l’utilisation de la balise `label` est, parfois, à compléter par un autre dispositif (`title`, `aria-labelledby`, `aria-label` ou parfois, `fieldset` et `legend`). - -Pour les champs obligatoires, ceci doit être précisé dans le `label` via un texte explicite ("obligatoire"), si cette identification n'est pas réalisée de manière explicite, il faut en expliquer la signification comme, "Tous les champs obligatoires sont marqués d'un *",placée en début de formulaire, et/ou une propriété `aria-required`, `required`. - -**Objectif utilisateur :** - -Ne pas respecter ces recommandations est un point bloquant pour tout utilisateur de synthèse vocale mais aussi de loupe logicielle car il ne sait pas quelles valeurs entrer dans les champs. Pour les utilisateurs de mobiles et les déficients moteurs, cela permet d’activer ou de cliquer plus facilement sur les éléments de formulaire. - -Pour les champs avec auto-complétion, facilite la tâche aux déficients moteur et cognitif, les dyslexiques. Cela permet d’éviter les erreurs de saisie et un gain de temps pour tous. - -**Exemple valide :** -![capture d’écran d’un formulaire valide](../../images/formulaire.png) -![capture d’écran d’un formulaire label proche du champ](../../images/v_label.jpg) - -**Exemple non-valide :** -![capture d’écran d’un formulaire auquel il manque un label](../../images/formulaire2.png) -![capture d’écran d’un formulaire label loin du champ](../../images/nv_label.jpg) - -**Exemple de formulaire accessible :** - -Consulter [l’exemple de formulaire accessible](../../exemples-de-composants/formulaires/) pour plus d’informations. - -**Référence WCAG :** -- 2.4.6 Headings and Labels -- 3.3.2 Labels or Instructions -- 3.3.5 Help -- 1.3.5 Identify input purpose - - - - ## Authentification accessible **Cible :** tout le monde, en particulier les personnes avec des déficiences cognitives. From 28fdf8419946e11045c66114d357847970ac4259 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Mewen=20Le=20H=C3=B4?= <92363071+MewenLeHo@users.noreply.github.com> Date: Wed, 15 Jan 2025 16:53:27 +0100 Subject: [PATCH 12/20] Update src/fr/web/developper/formulaires.md Co-authored-by: Pierre-Yves Ayoul <105045667+pya35@users.noreply.github.com> --- src/fr/web/developper/formulaires.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/fr/web/developper/formulaires.md b/src/fr/web/developper/formulaires.md index ff965f85e..9774bd9f3 100644 --- a/src/fr/web/developper/formulaires.md +++ b/src/fr/web/developper/formulaires.md @@ -153,7 +153,7 @@ Permettre aux utilisateurs ayant des problèmes cognitifs (mémoire, dyslexie, d **Exemples valides (AA et AAA) :** -Système d'**authentification à 2 facteurs** : authentification sur le navigateur web d'un ordinateur qui nécessite un **code de vérification reçu par SMS sur le téléphone mobile**. Dans la plupart des cas, il est possible d'envoyer le code sur l'appareil où il peut ensuite être copié-collé, par exemple en le copiant-collant dans un mail sur le téléphone pour l'envoyer sur l'ordinateur ou en passant une application de presse-papier. +Un système d'**authentification à 2 facteurs** : authentification sur le navigateur web d'un ordinateur qui nécessite un **code de vérification reçu par SMS sur le téléphone mobile**. Dans la plupart des cas, il est possible d'envoyer le code sur l'appareil où il peut ensuite être copié-collé, par exemple en le copiant-collant dans un mail sur le téléphone pour l'envoyer sur l'ordinateur ou en passant une application de presse-papier. Un site web utilise un **couple identifiant** (nom d'utilisateur ou adresse mail) et **mot de passe pour** l'authentification de la connexion (satisfaisant au critère de réussite "1.3.5 But de l'entrée" et au critère de réussite "4.1.2 : Nom, rôle, valeur"). Le navigateur de l'utilisateur ou une extension de gestionnaire de mot de passe tiers intégrée peut identifier la fonction de ces 2 champs et **remplir automatiquement l'identifiant** et le mot de passe. From 9eeb8c1556684288184c66bbc25f4f993753eb95 Mon Sep 17 00:00:00 2001 From: MewenLeHo Date: Wed, 15 Jan 2025 18:49:22 +0100 Subject: [PATCH 13/20] Fix after review --- src/fr/web/developper/formulaires.md | 27 +++++++++++++-------------- 1 file changed, 13 insertions(+), 14 deletions(-) diff --git a/src/fr/web/developper/formulaires.md b/src/fr/web/developper/formulaires.md index 9774bd9f3..ec3fa27d5 100644 --- a/src/fr/web/developper/formulaires.md +++ b/src/fr/web/developper/formulaires.md @@ -126,26 +126,26 @@ Le respect du critère 3.3.9 (AAA) repose sur la non-utilisation dans le process **À vérifier :** -Pour un système d'authentification par la saisie d'un identifiant et d'un mot de passe, s'assurer que : -- l'agent utilisateur (navigateur et applications de gestion de mots de passe) permet le **remplissage automatique des champs "identifiant" et "mot de passe"** +- Pour un système d'authentification par la saisie d'un identifiant et d'un mot de passe, s'assurer que : + - l'agent utilisateur (navigateur et applications de gestion de mots de passe) permet le **remplissage automatique des champs "identifiant" et "mot de passe"** **ou** -- l'utilisateur peut **copier** son identifiant puis son mot de passe à partir d'une source locale (ex : application de gestion de mots de passe) pour ensuite les **coller** respectivement dans les champs correspondants du formulaire d'authentification ou dans une interface en ligne de commande. Le **format demandé** par les champs "identifiant" et "mot de passe" doit être le **même que celui des informations** copiées pour éviter à l'utilisateur de devoir transcrire (i.e., saisir et copier) ces informations. + - l'utilisateur peut **copier** son identifiant puis son mot de passe à partir d'une source locale (ex : application de gestion de mots de passe) pour ensuite les **coller** respectivement dans les champs correspondants du formulaire d'authentification ou dans une interface en ligne de commande. Le **format demandé** par les champs "identifiant" et "mot de passe" doit être le **même que celui des informations** copiées pour éviter à l'utilisateur de devoir transcrire (i.e., saisir et copier) ces informations. -Pour un système d'authentification à 2 facteurs (double authentification), s'assurer : -- qu'il ne soit pas demandé à l'utilisateur de recopier un **code de vérification**. L'utilisateur doit disposer à minima de l'une des **aides** suivantes : - - possibilité de copier-coller le code de vérification à partir d'une application de gestion de mots de passe, d'une application de message textuel ou d'une clé de sécurité logicielle, - - ou permettre à l'agent utilisateur de remplir le champ automatiquement. +-Pour un système d'authentification à 2 facteurs (double authentification), s'assurer : + - qu'il ne soit pas demandé à l'utilisateur de recopier un **code de vérification**. L'utilisateur doit disposer à minima de l'une des **aides** suivantes : + - possibilité de copier-coller le code de vérification à partir d'une application de gestion de mots de passe, d'une application de message textuel ou d'une clé de sécurité logicielle, + - ou permettre à l'agent utilisateur de remplir le champ automatiquement. Note : lorsqu'un code de vérification doit être reçu ou généré par un deuxième appareil (ex : SMS reçu sur un mobile), la possibilité de pouvoir envoyer ce code de vérification au premier appareil n'est pas à évaluer dans ce critère. **ou** -- que le système d'authentification à 2 facteurs ne repose pas sur des codes, mais par exemple sur une clé USB d'authentification, une application tierce (qui peut être ou non sur un 2ème appareil) qui demande à l'utilisateur de confirmer qu'il est bien à l'origine de la requête, une méthode d'authentification proposée par le système d'exploitation de l'appareil. + - que le système d'authentification à 2 facteurs ne repose pas sur des codes, mais par exemple sur une clé USB d'authentification, une application tierce (qui peut être ou non sur un 2ème appareil) qui demande à l'utilisateur de confirmer qu'il est bien à l'origine de la requête, une méthode d'authentification proposée par le système d'exploitation de l'appareil. -Pour un système d'authentification dont l'une des étapes est un **captcha**, s'assurer qu'il y a une méthode qui n'inclut pas de test cognitif (retenir, recopier un mot, reconnaitre une image donnée par le site web), sauf si cela repose sur la reconnaissance d'objets ou l'identification d'un contenu personnel non textuel. -- Si l'authentification à double facteur se fait par la reconnaissance d'un contenu personnel non textuel, les conditions de sécurité doivent permettre d'éviter à une tierce personne de deviner quelle est l'image à reconnaitre. -- Dans le cas où l'utilisateur est obligé de transcrire du texte (ex : création pour la 1ère fois d'un mot de passe qui sera ensuite enregistré dans un logiciel de gestion de mot de passe), la possibilité de montrer les caractères saisis doit être proposée. +- Pour un système d'authentification dont l'une des étapes est un **captcha**, s'assurer qu'il y a une méthode qui n'inclut pas de test cognitif (retenir, recopier un mot, reconnaitre une image donnée par le site web), sauf si cela repose sur la reconnaissance d'objets ou l'identification d'un contenu personnel non textuel. + - Si l'authentification à double facteur se fait par la reconnaissance d'un contenu personnel non textuel, les conditions de sécurité doivent permettre d'éviter à une tierce personne de deviner quelle est l'image à reconnaitre. + - Dans le cas où l'utilisateur est obligé de transcrire du texte (ex : création pour la 1ère fois d'un mot de passe qui sera ensuite enregistré dans un logiciel de gestion de mot de passe), la possibilité de montrer les caractères saisis doit être proposée. **Objectif utilisateur :** @@ -169,9 +169,8 @@ Un site web qui requiert une **authentification à deux facteurs** envoie une no **Exemple non-valide :** -Exemple qui empêche un utilisateur de saisir un mot de passe ou un code de vérification dans le même format que celui dans lequel il a initialement été créé : -- Un formulaire qui demande à l'utilisateur de saisir les 4 derniers chiffres de son identifiant dans 4 champs différents. - Exception : l'utilisateur peut copier son code puis le coller dans un premier champ. Les caractères seront automatiquement répartis dans les champs suivants. +Empêcher un utilisateur de saisir un mot de passe ou un code de vérification dans le même format que celui dans lequel il a initialement été créé : par exemple un formulaire qui demande à l'utilisateur de saisir les 4 derniers chiffres de son identifiant dans 4 champs différents. +Exception : l'utilisateur peut copier son code puis le coller dans un premier champ. Les caractères seront automatiquement répartis dans les champs suivants. **Référence WCAG :** - 3.3.8 Accessible Authentication (Minimum) From 896ffdcef864a79c4fe202b36be5482ba6c90b7d Mon Sep 17 00:00:00 2001 From: MewenLeHo Date: Thu, 16 Jan 2025 11:06:02 +0100 Subject: [PATCH 14/20] Fix after review --- src/fr/web/developper/formulaires.md | 10 ++-------- 1 file changed, 2 insertions(+), 8 deletions(-) diff --git a/src/fr/web/developper/formulaires.md b/src/fr/web/developper/formulaires.md index ec3fa27d5..decbdc1ae 100644 --- a/src/fr/web/developper/formulaires.md +++ b/src/fr/web/developper/formulaires.md @@ -126,21 +126,15 @@ Le respect du critère 3.3.9 (AAA) repose sur la non-utilisation dans le process **À vérifier :** -- Pour un système d'authentification par la saisie d'un identifiant et d'un mot de passe, s'assurer que : +- Pour un système d'authentification par la saisie d'un identifiant et d'un mot de passe, s'assurer que l'une des conditions uivantes est remplie : - l'agent utilisateur (navigateur et applications de gestion de mots de passe) permet le **remplissage automatique des champs "identifiant" et "mot de passe"** - -**ou** - - l'utilisateur peut **copier** son identifiant puis son mot de passe à partir d'une source locale (ex : application de gestion de mots de passe) pour ensuite les **coller** respectivement dans les champs correspondants du formulaire d'authentification ou dans une interface en ligne de commande. Le **format demandé** par les champs "identifiant" et "mot de passe" doit être le **même que celui des informations** copiées pour éviter à l'utilisateur de devoir transcrire (i.e., saisir et copier) ces informations. --Pour un système d'authentification à 2 facteurs (double authentification), s'assurer : +- Pour un système d'authentification à 2 facteurs (double authentification), s'assurer que l'une des conditions uivantes est remplie : - qu'il ne soit pas demandé à l'utilisateur de recopier un **code de vérification**. L'utilisateur doit disposer à minima de l'une des **aides** suivantes : - possibilité de copier-coller le code de vérification à partir d'une application de gestion de mots de passe, d'une application de message textuel ou d'une clé de sécurité logicielle, - ou permettre à l'agent utilisateur de remplir le champ automatiquement. Note : lorsqu'un code de vérification doit être reçu ou généré par un deuxième appareil (ex : SMS reçu sur un mobile), la possibilité de pouvoir envoyer ce code de vérification au premier appareil n'est pas à évaluer dans ce critère. - -**ou** - - que le système d'authentification à 2 facteurs ne repose pas sur des codes, mais par exemple sur une clé USB d'authentification, une application tierce (qui peut être ou non sur un 2ème appareil) qui demande à l'utilisateur de confirmer qu'il est bien à l'origine de la requête, une méthode d'authentification proposée par le système d'exploitation de l'appareil. - Pour un système d'authentification dont l'une des étapes est un **captcha**, s'assurer qu'il y a une méthode qui n'inclut pas de test cognitif (retenir, recopier un mot, reconnaitre une image donnée par le site web), sauf si cela repose sur la reconnaissance d'objets ou l'identification d'un contenu personnel non textuel. From fce75e2f477e720228de2037549046300e1908cb Mon Sep 17 00:00:00 2001 From: MewenLeHo Date: Thu, 16 Jan 2025 11:09:04 +0100 Subject: [PATCH 15/20] Fix after review --- src/fr/web/developper/formulaires.md | 2 ++ 1 file changed, 2 insertions(+) diff --git a/src/fr/web/developper/formulaires.md b/src/fr/web/developper/formulaires.md index decbdc1ae..ba0abb0e5 100644 --- a/src/fr/web/developper/formulaires.md +++ b/src/fr/web/developper/formulaires.md @@ -130,6 +130,7 @@ Le respect du critère 3.3.9 (AAA) repose sur la non-utilisation dans le process - l'agent utilisateur (navigateur et applications de gestion de mots de passe) permet le **remplissage automatique des champs "identifiant" et "mot de passe"** - l'utilisateur peut **copier** son identifiant puis son mot de passe à partir d'une source locale (ex : application de gestion de mots de passe) pour ensuite les **coller** respectivement dans les champs correspondants du formulaire d'authentification ou dans une interface en ligne de commande. Le **format demandé** par les champs "identifiant" et "mot de passe" doit être le **même que celui des informations** copiées pour éviter à l'utilisateur de devoir transcrire (i.e., saisir et copier) ces informations. + - Pour un système d'authentification à 2 facteurs (double authentification), s'assurer que l'une des conditions uivantes est remplie : - qu'il ne soit pas demandé à l'utilisateur de recopier un **code de vérification**. L'utilisateur doit disposer à minima de l'une des **aides** suivantes : - possibilité de copier-coller le code de vérification à partir d'une application de gestion de mots de passe, d'une application de message textuel ou d'une clé de sécurité logicielle, @@ -137,6 +138,7 @@ Le respect du critère 3.3.9 (AAA) repose sur la non-utilisation dans le process Note : lorsqu'un code de vérification doit être reçu ou généré par un deuxième appareil (ex : SMS reçu sur un mobile), la possibilité de pouvoir envoyer ce code de vérification au premier appareil n'est pas à évaluer dans ce critère. - que le système d'authentification à 2 facteurs ne repose pas sur des codes, mais par exemple sur une clé USB d'authentification, une application tierce (qui peut être ou non sur un 2ème appareil) qui demande à l'utilisateur de confirmer qu'il est bien à l'origine de la requête, une méthode d'authentification proposée par le système d'exploitation de l'appareil. + - Pour un système d'authentification dont l'une des étapes est un **captcha**, s'assurer qu'il y a une méthode qui n'inclut pas de test cognitif (retenir, recopier un mot, reconnaitre une image donnée par le site web), sauf si cela repose sur la reconnaissance d'objets ou l'identification d'un contenu personnel non textuel. - Si l'authentification à double facteur se fait par la reconnaissance d'un contenu personnel non textuel, les conditions de sécurité doivent permettre d'éviter à une tierce personne de deviner quelle est l'image à reconnaitre. - Dans le cas où l'utilisateur est obligé de transcrire du texte (ex : création pour la 1ère fois d'un mot de passe qui sera ensuite enregistré dans un logiciel de gestion de mot de passe), la possibilité de montrer les caractères saisis doit être proposée. From 83c52cb1e0524611c02e738d39fb7cc5e1f75322 Mon Sep 17 00:00:00 2001 From: MewenLeHo Date: Thu, 16 Jan 2025 11:23:35 +0100 Subject: [PATCH 16/20] Fix after review --- src/fr/web/developper/formulaires.md | 8 +++----- 1 file changed, 3 insertions(+), 5 deletions(-) diff --git a/src/fr/web/developper/formulaires.md b/src/fr/web/developper/formulaires.md index ba0abb0e5..c1b7d1409 100644 --- a/src/fr/web/developper/formulaires.md +++ b/src/fr/web/developper/formulaires.md @@ -126,20 +126,18 @@ Le respect du critère 3.3.9 (AAA) repose sur la non-utilisation dans le process **À vérifier :** -- Pour un système d'authentification par la saisie d'un identifiant et d'un mot de passe, s'assurer que l'une des conditions uivantes est remplie : +Pour un système d'authentification par la saisie d'un identifiant et d'un mot de passe, s'assurer que l'une des conditions suivantes est remplie : - l'agent utilisateur (navigateur et applications de gestion de mots de passe) permet le **remplissage automatique des champs "identifiant" et "mot de passe"** - l'utilisateur peut **copier** son identifiant puis son mot de passe à partir d'une source locale (ex : application de gestion de mots de passe) pour ensuite les **coller** respectivement dans les champs correspondants du formulaire d'authentification ou dans une interface en ligne de commande. Le **format demandé** par les champs "identifiant" et "mot de passe" doit être le **même que celui des informations** copiées pour éviter à l'utilisateur de devoir transcrire (i.e., saisir et copier) ces informations. - -- Pour un système d'authentification à 2 facteurs (double authentification), s'assurer que l'une des conditions uivantes est remplie : +Pour un système d'authentification à 2 facteurs (double authentification), s'assurer que l'une des conditions suivantes est remplie : - qu'il ne soit pas demandé à l'utilisateur de recopier un **code de vérification**. L'utilisateur doit disposer à minima de l'une des **aides** suivantes : - possibilité de copier-coller le code de vérification à partir d'une application de gestion de mots de passe, d'une application de message textuel ou d'une clé de sécurité logicielle, - ou permettre à l'agent utilisateur de remplir le champ automatiquement. Note : lorsqu'un code de vérification doit être reçu ou généré par un deuxième appareil (ex : SMS reçu sur un mobile), la possibilité de pouvoir envoyer ce code de vérification au premier appareil n'est pas à évaluer dans ce critère. - que le système d'authentification à 2 facteurs ne repose pas sur des codes, mais par exemple sur une clé USB d'authentification, une application tierce (qui peut être ou non sur un 2ème appareil) qui demande à l'utilisateur de confirmer qu'il est bien à l'origine de la requête, une méthode d'authentification proposée par le système d'exploitation de l'appareil. - -- Pour un système d'authentification dont l'une des étapes est un **captcha**, s'assurer qu'il y a une méthode qui n'inclut pas de test cognitif (retenir, recopier un mot, reconnaitre une image donnée par le site web), sauf si cela repose sur la reconnaissance d'objets ou l'identification d'un contenu personnel non textuel. +Pour un système d'authentification dont l'une des étapes est un **captcha**, s'assurer qu'il y a une méthode qui n'inclut pas de test cognitif (retenir, recopier un mot, reconnaitre une image donnée par le site web), sauf si cela repose sur la reconnaissance d'objets ou l'identification d'un contenu personnel non textuel. - Si l'authentification à double facteur se fait par la reconnaissance d'un contenu personnel non textuel, les conditions de sécurité doivent permettre d'éviter à une tierce personne de deviner quelle est l'image à reconnaitre. - Dans le cas où l'utilisateur est obligé de transcrire du texte (ex : création pour la 1ère fois d'un mot de passe qui sera ensuite enregistré dans un logiciel de gestion de mot de passe), la possibilité de montrer les caractères saisis doit être proposée. From 41865dee2d860353f602a2e9a33e1aa2fc020feb Mon Sep 17 00:00:00 2001 From: MewenLeHo Date: Thu, 16 Jan 2025 11:55:12 +0100 Subject: [PATCH 17/20] Fix EN version --- src/en/web/develop/forms.md | 17 +++++------------ 1 file changed, 5 insertions(+), 12 deletions(-) diff --git a/src/en/web/develop/forms.md b/src/en/web/develop/forms.md index 976b6084a..e3cb2ae96 100644 --- a/src/en/web/develop/forms.md +++ b/src/en/web/develop/forms.md @@ -119,21 +119,15 @@ Compliance with criterion 3.3.9 (AAA) is based on the non-use in the authenticat **Checklist:** -For authentication by login and password, make sure: +For authentication by login and password, make sure that one of the following conditions is met: - the user agent (browser and password management applications) **automatically fills in the "login" and "password" fields** - -**or** - - the user can **copy** his login and password from a local source (e.g., password management application) and **paste** them into the corresponding fields on the authentication form or in a command-line interface. The **format requested** by the "login" and "password" fields must be the **same as the copied informations**, to avoid the user having to transcribe (i.e., enter and copy) these informations. -For a 2-factor authentication system (double authentication), make sure: +For a 2-factor authentication system (double authentication), make sure that one of the following conditions is met: - the user is not asked to copy a verification code. The user must have at least one of the following **aids**: - the possibility of copying and pasting the **verification code** from a password management application, a text message application or a software security key, - or allow the user agent to fill in the field automatically. Note: When a verification code must be received or generated by a second device (e.g., SMS received on a cell phone), the ability to send this verification code to the first device is not to be evaluated in this criterion. - -**or** - - the **2-factor authentication** system **does not rely on codes**, but for example on a USB authentication key, a third-party application (which may or may not be on a 2nd device) asking the user to confirm that he is at the origin of the request, or an authentication method proposed by the device operating system. For an authentication system in which one of the steps is a **captcha**, make sure there is a method that doesn't include a cognitive test (remembering, copying a word, recognizing an image given by the website), unless it's based on object recognition or the identification of non-textual personal content. @@ -146,7 +140,7 @@ Allow users with cognitive disabilities (memory, dyslexia, dyscalculia, limited **Do (AA et AAA):** -**2-factor authentication system**: authentication on a computer's web browser that requires a **verification code received by SMS on the mobile phone**. In most cases, the code can be send to the device, where it can then be copied and pasted, for example by copying and pasting it into an email on the phone and sending it to the computer, or by using a clipboard application. +A **2-factor authentication system**: authentication on a computer's web browser that requires a **verification code received by SMS on the mobile phone**. In most cases, the code can be send to the device, where it can then be copied and pasted, for example by copying and pasting it into an email on the phone and sending it to the computer, or by using a clipboard application. A website uses a **login/password** for login authentication (satisfying Success Criteria "1.3.5 Purpose of entry" and Success Criteria "4.1.2: Name, role, value"). The user's browser or an integrated third-party password manager extension can identify the function of these 2 fields and **automatically fill** in the login and password. @@ -162,9 +156,8 @@ A website requiring two-factor authentication sends a notification to the user's **Don't:** -Examples that prevent a user from entering a password or verification code in the same format in which it was initially created: -- A form that asks the user to enter the last 4 digits of their username into 4 different fields. - Exception: the user can copy the code and paste it into the first field. The characters will be automatically distributed into the following fields. +Prevent a user from entering a password or verification code in the same format as the one in which it was initially created: for example, a form that asks the user to enter the last 4 digits of his login in 4 different fields. +Exception: the user can copy the code and paste it into the first field. The characters will be automatically distributed into the following fields. **WCAG reference:** - 3.3.8 Accessible Authentication (Minimum) From 0d13c11a6e7db8b921baa48768805be779cbc5ca Mon Sep 17 00:00:00 2001 From: MewenLeHo Date: Thu, 16 Jan 2025 15:09:59 +0100 Subject: [PATCH 18/20] Fix typos and move to design part --- src/en/web/design/forms.md | 69 +++++++++++++++++++++++++++- src/en/web/develop/forms.md | 67 +-------------------------- src/fr/web/designer/formulaires.md | 66 ++++++++++++++++++++++++++ src/fr/web/developper/formulaires.md | 68 --------------------------- 4 files changed, 135 insertions(+), 135 deletions(-) diff --git a/src/en/web/design/forms.md b/src/en/web/design/forms.md index c207d4ff0..38fef2c24 100644 --- a/src/en/web/design/forms.md +++ b/src/en/web/design/forms.md @@ -83,4 +83,71 @@ On an e-commerce website, a user launches a search with the keyword 'coat' and c After consulting the details of an item included in the list of results, if the user returns to the search page, the word 'coat' no longer appears in the search field and no search history is available. **WCAG reference:** -3.3.7 Redundant Entry \ No newline at end of file +3.3.7 Redundant Entry + + + +## Accessible authentication + +**Target:** everyone, especially people with cognitive disabilities. +**When:** right from the design and during development. + +**Description:** + +To be accessible, no step in the authentication process should be based on the user cognitive functions (i.e., memorizing and transcribing a username and password, performing a gesture pattern on a touch screen, solving an enigma), unless that provides at least one of the following: +- an alternative authentication method which does not rely on a cognitive function test - criteria 3.3.8 and 3.3.9, +- a mechanism to assist the user in completing the cognitive function test required to authenticate (i.e., password managers to reduce memory need, possibility to copy and paste to reduce the cognitive burden of re-typing) - criteria 3.3.8 and 3.3.9, +- a cognitive function test to recognize common objects (images, videos, audios) - criteria 3.3.8 and 3.3.9, +- a cognitive function test to identify non-text personal content (images, videos, audios) previously provided to the website by the user - criteria 3.3.8 and 3.3.9. + +**Good practice:** + +Compliance with criterion 3.3.9 (AAA) is based on the non-use in the authentication process of methods based on: +- recognition of current objects (images, video, audio), +- identification of non-textual personal content (images, video, audio) previously supplied to the website by the user. + +**Checklist:** + +For authentication by login and password, make sure that one of the following conditions is met: +- the user agent (browser and password management applications) **automatically fills in the "login" and "password" fields**, +- the user can **copy** his login and password from a local source (e.g., password management application) and **paste** them into the corresponding fields on the authentication form or in a command-line interface. The **format requested** by the "login" and "password" fields must be the **same as the copied informations**, to avoid the user having to transcribe (i.e., enter and copy) these informations. + +For a 2-factor authentication system (double authentication), make sure that one of the following conditions is met: +- the user is not asked to copy a verification code. The user must have at least one of the following **aids**: + - the possibility of copying and pasting the **verification code** from a password management application, a text message application or a software security key, + - or allow the user agent to fill in the field automatically. +Note: When a verification code must be received or generated by a second device (e.g., SMS received on a cell phone), the ability to send this verification code to the first device is not to be evaluated in this criterion. +- the **2-factor authentication** system **does not rely on codes**, but for example on a USB authentication key, a third-party application (which may or may not be on a 2nd device) asking the user to confirm that he is at the origin of the request, or an authentication method proposed by the device operating system. + +For an authentication system in which one of the steps is a **captcha**, make sure there is a method that doesn't include a cognitive test (remembering, copying a word, recognizing an image given by the website), unless it's based on object recognition or the identification of non-textual personal content. +- If the two-factor authentication is based on recognition of non-textual personal content, the security conditions must prevent a third party from guessing which image is to be recognized. +- If the user is required to transcribe text (e.g., when creating a password for the first time, which will then be stored in password management software), the possibility of showing the characters entered must be proposed. + +**Users' goal:** + +Allow users with cognitive disabilities (memory, dyslexia, dyscalculia, limited cognitive abilities) to authenticate. + +**Do (AA et AAA):** + +A **2-factor authentication system**: authentication on a computer's web browser that requires a **verification code received by SMS on the mobile phone**. In most cases, the code can be send to the device, where it can then be copied and pasted, for example by copying and pasting it into an email on the phone and sending it to the computer, or by using a clipboard application. + +A website uses a **login/password** for login authentication (satisfying Success Criteria "1.3.5 Purpose of entry" and Success Criteria "4.1.2: Name, role, value"). The user's browser or an integrated third-party password manager extension can identify the function of these 2 fields and **automatically fill** in the login and password. + +A website uses **WebAuthn** to allow the user **authenticate with their device rather than their login and password**. The user's device can use any available method. The most common methods on laptops and phones are facial recognition, fingerprints and PIN (Personal Identification Number). The website does not require any particular use; it is assumed that the user will choose the most appropriate method. + +A website offers the possibility of connecting with a third-party provider using the **OAuth** method. + +A website requiring two-factor authentication offers several options for the second factor, including a USB key-based method where the user simply clicks a button to enter a code valid for a limited time. + +A website requiring two-factor authentication displays a QR code that can be scanned by an app on the user's device to confirm identity. + +A website requiring two-factor authentication sends a notification to the user's device. The user must use their device's authentication mechanism (e.g., user-defined PIN, fingerprint, facial recognition) to confirm their identity. + +**Don't:** + +Prevent a user from entering a password or verification code in the same format as the one in which it was initially created: for example, a form that asks the user to enter the last 4 digits of his login in 4 different fields. +Exception: the user can copy the code and paste it into the first field. The characters will be automatically distributed into the following fields. + +**WCAG reference:** +- 3.3.8 Accessible Authentication (Minimum) +- 3.3.9 Accessible Authentication (Enhanced) \ No newline at end of file diff --git a/src/en/web/develop/forms.md b/src/en/web/develop/forms.md index e3cb2ae96..14bd70f38 100644 --- a/src/en/web/develop/forms.md +++ b/src/en/web/develop/forms.md @@ -93,72 +93,7 @@ Guide users when errors happen to improve the understanding and help them correc See [the accessible form example](../../components-examples/forms/) for more details. -**WCAG reference:** +**WCAG reference:** - 3.3.1 Error Identification - 3.3.3 Error Suggestion - 3.3.4 Error Prevention (Legal, Financial, Data) - -## Accessible authentification - -**Target:** everyone, especially people with cognitive disabilities. -**When:** right from the design and during development. - -**Description:** - -To be accessible, no step in the authentication process should be based on the user cognitive functions (i.e., memorizing and transcribing a username and password, performing a gesture pattern on a touch screen, solving an enigma), unless that provides at least one of the following: -- An alternative authentication method which does not rely on a cognitive function test - criteria 3.3.8 and 3.3.9 -- A mechanism to assist the user in completing the cognitive function test required to authenticate (i.e., password managers to reduce memory need, possibility to copy and paste to reduce the cognitive burden of re-typing) - criteria 3.3.8 and 3.3.9 -- A cognitive function test to recognize common objects (images, videos, audios) - criteria 3.3.8 and 3.3.9 -- A cognitive function test to identify non-text personal content (images, videos, audios) previously provided to the website by the user - criteria 3.3.8 and 3.3.9 - -**Good practice:** - -Compliance with criterion 3.3.9 (AAA) is based on the non-use in the authentication process of methods based on: -- recognition of current objects (images, video, audio) -- identification of non-textual personal content (images, video, audio) previously supplied to the website by the user - -**Checklist:** - -For authentication by login and password, make sure that one of the following conditions is met: -- the user agent (browser and password management applications) **automatically fills in the "login" and "password" fields** -- the user can **copy** his login and password from a local source (e.g., password management application) and **paste** them into the corresponding fields on the authentication form or in a command-line interface. The **format requested** by the "login" and "password" fields must be the **same as the copied informations**, to avoid the user having to transcribe (i.e., enter and copy) these informations. - -For a 2-factor authentication system (double authentication), make sure that one of the following conditions is met: -- the user is not asked to copy a verification code. The user must have at least one of the following **aids**: - - the possibility of copying and pasting the **verification code** from a password management application, a text message application or a software security key, - - or allow the user agent to fill in the field automatically. -Note: When a verification code must be received or generated by a second device (e.g., SMS received on a cell phone), the ability to send this verification code to the first device is not to be evaluated in this criterion. -- the **2-factor authentication** system **does not rely on codes**, but for example on a USB authentication key, a third-party application (which may or may not be on a 2nd device) asking the user to confirm that he is at the origin of the request, or an authentication method proposed by the device operating system. - -For an authentication system in which one of the steps is a **captcha**, make sure there is a method that doesn't include a cognitive test (remembering, copying a word, recognizing an image given by the website), unless it's based on object recognition or the identification of non-textual personal content. -- If the two-factor authentication is based on recognition of non-textual personal content, the security conditions must prevent a third party from guessing which image is to be recognized. -- If the user is required to transcribe text (e.g., when creating a password for the first time, which will then be stored in password management software), the possibility of showing the characters entered must be proposed. - -**Users' goal:** - -Allow users with cognitive disabilities (memory, dyslexia, dyscalculia, limited cognitive abilities) to authenticate. - -**Do (AA et AAA):** - -A **2-factor authentication system**: authentication on a computer's web browser that requires a **verification code received by SMS on the mobile phone**. In most cases, the code can be send to the device, where it can then be copied and pasted, for example by copying and pasting it into an email on the phone and sending it to the computer, or by using a clipboard application. - -A website uses a **login/password** for login authentication (satisfying Success Criteria "1.3.5 Purpose of entry" and Success Criteria "4.1.2: Name, role, value"). The user's browser or an integrated third-party password manager extension can identify the function of these 2 fields and **automatically fill** in the login and password. - -A website uses **WebAuthn** to allow the user **authenticate with their device rather than their login and password**. The user's device can use any available method. The most common methods on laptops and phones are facial recognition, fingerprints and PIN (Personal Identification Number). The website does not require any particular use; it is assumed that the user will choose the most appropriate method. - -A website offers the possibility of connecting with a third-party provider using the **OAuth** method. - -A website requiring two-factor authentication offers several options for the second factor, including a USB key-based method where the user simply clicks a button to enter a code valid for a limited time. - -A website requiring two-factor authentication displays a QR code that can be scanned by an app on the user's device to confirm identity. - -A website requiring two-factor authentication sends a notification to the user's device. The user must use their device's authentication mechanism (e.g., user-defined PIN, fingerprint, facial recognition) to confirm their identity. - -**Don't:** - -Prevent a user from entering a password or verification code in the same format as the one in which it was initially created: for example, a form that asks the user to enter the last 4 digits of his login in 4 different fields. -Exception: the user can copy the code and paste it into the first field. The characters will be automatically distributed into the following fields. - -**WCAG reference:** -- 3.3.8 Accessible Authentication (Minimum) -- 3.3.9 Accessible Authentication (Enhanced) \ No newline at end of file diff --git a/src/fr/web/designer/formulaires.md b/src/fr/web/designer/formulaires.md index fe9185e17..02a01c75d 100644 --- a/src/fr/web/designer/formulaires.md +++ b/src/fr/web/designer/formulaires.md @@ -79,3 +79,69 @@ Après la consultation des détails d'un article faisant partie de la liste des **Référence WCAG :** 3.3.7 Redundant Entry + + +## Authentification accessible + +**Cible :** tout le monde, en particulier les personnes avec des déficiences cognitives. +**Quand :** dès la conception et pendant le développement. + +**Description :** + +Pour être accessible, aucune étape du processus d'authentification ne doit être basée sur les fonctions cognitives de l'utilisateur (ex : mémoriser un identifiant et mot de passe, saisir un mot de passe qui doit être recopié sans erreur, reproduire un schéma gestuel sur un écran tactile, résoudre une énigme), sauf si cette étape fournit au moins l'un des moyens suivants : +- une **méthode alternative d'authentification** qui ne repose pas sur la réalisation d'un test cognitif - critères 3.3.8 et 3.3.9, +- un **mécanisme** qui **aide** l'utilisateur à réaliser le test cognitif demandé pour s'authentifier (ex : gestionnaires de mots de passe qui permettent à l'utilisateur de moins faire appel à sa mémoire, possibilité de copier-coller son mot de passe pour éviter la difficulté de re saisir ce qui l'a déjà été) - critères 3.3.8 et 3.3.9, +- un test cognitif de **reconnaissance d'objets courants** (images, vidéo, audio) - critère 3.3.8, +- un test cognitif d'**identification d'un contenu personnel non textuel** (images, vidéo, audio) **préalablement fourni au site web par l'utilisateur** - critère 3.3.8. + +**Bonnes pratiques :** + +Le respect du critère 3.3.9 (AAA) repose sur la non-utilisation dans le processus d'authentification des méthodes basées sur : +- la reconnaissance d'objets courants (images, vidéo, audio), +- l'identification d'un contenu personnel non textuel (images, vidéo, audio) préalablement fourni au site web par l'utilisateur. + +**À vérifier :** + +Pour un système d'authentification par la saisie d'un identifiant et d'un mot de passe, s'assurer que l'une des conditions suivantes est remplie : + - l'agent utilisateur (navigateur et applications de gestion de mots de passe) permet le **remplissage automatique des champs "identifiant" et "mot de passe"**, + - l'utilisateur peut **copier** son identifiant puis son mot de passe à partir d'une source locale (ex : application de gestion de mots de passe) pour ensuite les **coller** respectivement dans les champs correspondants du formulaire d'authentification ou dans une interface en ligne de commande. Le **format demandé** par les champs "identifiant" et "mot de passe" doit être le **même que celui des informations** copiées pour éviter à l'utilisateur de devoir transcrire (i.e., saisir et copier) ces informations. + +Pour un système d'authentification à 2 facteurs (double authentification), s'assurer que l'une des conditions suivantes est remplie : + - qu'il ne soit pas demandé à l'utilisateur de recopier un **code de vérification**. L'utilisateur doit disposer à minima de l'une des **aides** suivantes : + - possibilité de copier-coller le code de vérification à partir d'une application de gestion de mots de passe, d'une application de message textuel ou d'une clé de sécurité logicielle, + - ou permettre à l'agent utilisateur de remplir le champ automatiquement. +Note : lorsqu'un code de vérification doit être reçu ou généré par un deuxième appareil (ex : SMS reçu sur un mobile), la possibilité de pouvoir envoyer ce code de vérification au premier appareil n'est pas à évaluer dans ce critère. + - que le système d'authentification à 2 facteurs ne repose pas sur des codes, mais par exemple sur une clé USB d'authentification, une application tierce (qui peut être ou non sur un 2ème appareil) qui demande à l'utilisateur de confirmer qu'il est bien à l'origine de la requête, une méthode d'authentification proposée par le système d'exploitation de l'appareil. + +Pour un système d'authentification dont l'une des étapes est un **captcha**, s'assurer qu'il y a une méthode qui n'inclut pas de test cognitif (retenir, recopier un mot, reconnaitre une image donnée par le site web), sauf si cela repose sur la reconnaissance d'objets ou l'identification d'un contenu personnel non textuel. + - Si l'authentification à double facteur se fait par la reconnaissance d'un contenu personnel non textuel, les conditions de sécurité doivent permettre d'éviter à une tierce personne de deviner quelle est l'image à reconnaitre, + - Dans le cas où l'utilisateur est obligé de transcrire du texte (ex : création pour la 1ère fois d'un mot de passe qui sera ensuite enregistré dans un logiciel de gestion de mot de passe), la possibilité de montrer les caractères saisis doit être proposée. + +**Objectif utilisateur :** + +Permettre aux utilisateurs ayant des problèmes cognitifs (mémoire, dyslexie, dyscalculie, capacités cognitives limitées) de s'authentifier. + +**Exemples valides (AA et AAA) :** + +Un système d'**authentification à 2 facteurs** : authentification sur le navigateur web d'un ordinateur qui nécessite un **code de vérification reçu par SMS sur le téléphone mobile**. Dans la plupart des cas, il est possible d'envoyer le code sur l'appareil où il peut ensuite être copié-collé, par exemple en le copiant-collant dans un mail sur le téléphone pour l'envoyer sur l'ordinateur ou en passant une application de presse-papier. + +Un site web utilise un **couple identifiant** (nom d'utilisateur ou adresse mail) et **mot de passe pour** l'authentification de la connexion (satisfaisant au critère de réussite "1.3.5 But de l'entrée" et au critère de réussite "4.1.2 : Nom, rôle, valeur"). Le navigateur de l'utilisateur ou une extension de gestionnaire de mot de passe tiers intégrée peut identifier la fonction de ces 2 champs et **remplir automatiquement l'identifiant** et le mot de passe. + +Un site web utilise **WebAuthn** pour que l'utilisateur puisse s'**authentifier avec son appareil plutôt qu'avec son nom d'utilisateur et son mot de passe**. L'appareil de l'utilisateur peut utiliser n'importe quelle modalité disponible. Les méthodes les plus courantes sur les ordinateurs portables et les téléphones sont la reconnaissance faciale, les empreintes digitales et le code PIN (numéro d'identification personnel). Le site web n'impose aucune utilisation particulière, il est supposé que l'utilisateur choisira la méthode qui lui convient. + +Un site web offre la possibilité de se connecter avec un fournisseur tiers en utilisant la méthode **OAuth**. + +Un site web qui requiert une **authentification à deux facteurs** offre **plusieurs options pour le deuxième facteur**, y compris une méthode basée sur une clé USB où l'utilisateur clique simplement sur un bouton pour entrer un code valable pendant une durée limitée. + +Un site web qui requiert une **authentification à deux facteurs** affiche un **QR code** qui peut être scanné par une application sur l'appareil de l'utilisateur pour confirmer son identité. + +Un site web qui requiert une **authentification à deux facteurs** envoie une notification à l'appareil de l'utilisateur. L'utilisateur doit utiliser le **mécanisme d'authentification de son appareil** (par exemple, un code PIN défini par l'utilisateur, une empreinte digitale, une reconnaissance faciale) pour confirmer son identité. + +**Exemple non-valide :** + +Empêcher un utilisateur de saisir un mot de passe ou un code de vérification dans le même format que celui dans lequel il a initialement été créé : par exemple un formulaire qui demande à l'utilisateur de saisir les 4 derniers chiffres de son identifiant dans 4 champs différents. +Exception : l'utilisateur peut copier son code puis le coller dans un premier champ. Les caractères seront automatiquement répartis dans les champs suivants. + +**Référence WCAG :** +- 3.3.8 Accessible Authentication (Minimum) +- 3.3.9 Accessible Authentication (Enhanced) diff --git a/src/fr/web/developper/formulaires.md b/src/fr/web/developper/formulaires.md index c1b7d1409..68e4d609d 100644 --- a/src/fr/web/developper/formulaires.md +++ b/src/fr/web/developper/formulaires.md @@ -101,71 +101,3 @@ Consulter [l’exemple de formulaire accessible](../../exemples-de-composants/fo - 3.3.1 Error Identification - 3.3.3 Error Suggestion - 3.3.4 Error Prevention (Legal, Financial, Data) - - - - -## Authentification accessible - -**Cible :** tout le monde, en particulier les personnes avec des déficiences cognitives. -**Quand :** dès la conception et pendant le développement. - -**Description :** - -Pour être accessible, aucune étape du processus d'authentification ne doit être basée sur les fonctions cognitives de l'utilisateur (ex : mémoriser un identifiant et mot de passe, saisir un mot de passe qui doit être recopié sans erreur, reproduire un schéma gestuel sur un écran tactile, résoudre une énigme), sauf si cette étape fournit au moins l'un des moyens suivants : -- une **méthode alternative d'authentification** qui ne repose pas sur la réalisation d'un test cognitif - critères 3.3.8 et 3.3.9 -- un **mécanisme** qui **aide** l'utilisateur à réaliser le test cognitif demandé pour s'authentifier (ex : gestionnaires de mots de passe qui permettent à l'utilisateur de moins faire appel à sa mémoire, possibilité de copier-coller son mot de passe pour éviter la difficulté de re saisir ce qui l'a déjà été) - critères 3.3.8 et 3.3.9 -- un test cognitif de **reconnaissance d'objets courants** (images, vidéo, audio) - critère 3.3.8 -- un test cognitif d'**identification d'un contenu personnel non textuel** (images, vidéo, audio) **préalablement fourni au site web par l'utilisateur** - critère 3.3.8 - -**Bonnes pratiques :** - -Le respect du critère 3.3.9 (AAA) repose sur la non-utilisation dans le processus d'authentification des méthodes basées sur : -- la reconnaissance d'objets courants (images, vidéo, audio) -- l'identification d'un contenu personnel non textuel (images, vidéo, audio) préalablement fourni au site web par l'utilisateur. - -**À vérifier :** - -Pour un système d'authentification par la saisie d'un identifiant et d'un mot de passe, s'assurer que l'une des conditions suivantes est remplie : - - l'agent utilisateur (navigateur et applications de gestion de mots de passe) permet le **remplissage automatique des champs "identifiant" et "mot de passe"** - - l'utilisateur peut **copier** son identifiant puis son mot de passe à partir d'une source locale (ex : application de gestion de mots de passe) pour ensuite les **coller** respectivement dans les champs correspondants du formulaire d'authentification ou dans une interface en ligne de commande. Le **format demandé** par les champs "identifiant" et "mot de passe" doit être le **même que celui des informations** copiées pour éviter à l'utilisateur de devoir transcrire (i.e., saisir et copier) ces informations. - -Pour un système d'authentification à 2 facteurs (double authentification), s'assurer que l'une des conditions suivantes est remplie : - - qu'il ne soit pas demandé à l'utilisateur de recopier un **code de vérification**. L'utilisateur doit disposer à minima de l'une des **aides** suivantes : - - possibilité de copier-coller le code de vérification à partir d'une application de gestion de mots de passe, d'une application de message textuel ou d'une clé de sécurité logicielle, - - ou permettre à l'agent utilisateur de remplir le champ automatiquement. -Note : lorsqu'un code de vérification doit être reçu ou généré par un deuxième appareil (ex : SMS reçu sur un mobile), la possibilité de pouvoir envoyer ce code de vérification au premier appareil n'est pas à évaluer dans ce critère. - - que le système d'authentification à 2 facteurs ne repose pas sur des codes, mais par exemple sur une clé USB d'authentification, une application tierce (qui peut être ou non sur un 2ème appareil) qui demande à l'utilisateur de confirmer qu'il est bien à l'origine de la requête, une méthode d'authentification proposée par le système d'exploitation de l'appareil. - -Pour un système d'authentification dont l'une des étapes est un **captcha**, s'assurer qu'il y a une méthode qui n'inclut pas de test cognitif (retenir, recopier un mot, reconnaitre une image donnée par le site web), sauf si cela repose sur la reconnaissance d'objets ou l'identification d'un contenu personnel non textuel. - - Si l'authentification à double facteur se fait par la reconnaissance d'un contenu personnel non textuel, les conditions de sécurité doivent permettre d'éviter à une tierce personne de deviner quelle est l'image à reconnaitre. - - Dans le cas où l'utilisateur est obligé de transcrire du texte (ex : création pour la 1ère fois d'un mot de passe qui sera ensuite enregistré dans un logiciel de gestion de mot de passe), la possibilité de montrer les caractères saisis doit être proposée. - -**Objectif utilisateur :** - -Permettre aux utilisateurs ayant des problèmes cognitifs (mémoire, dyslexie, dyscalculie, capacités cognitives limitées) de s'authentifier. - -**Exemples valides (AA et AAA) :** - -Un système d'**authentification à 2 facteurs** : authentification sur le navigateur web d'un ordinateur qui nécessite un **code de vérification reçu par SMS sur le téléphone mobile**. Dans la plupart des cas, il est possible d'envoyer le code sur l'appareil où il peut ensuite être copié-collé, par exemple en le copiant-collant dans un mail sur le téléphone pour l'envoyer sur l'ordinateur ou en passant une application de presse-papier. - -Un site web utilise un **couple identifiant** (nom d'utilisateur ou adresse mail) et **mot de passe pour** l'authentification de la connexion (satisfaisant au critère de réussite "1.3.5 But de l'entrée" et au critère de réussite "4.1.2 : Nom, rôle, valeur"). Le navigateur de l'utilisateur ou une extension de gestionnaire de mot de passe tiers intégrée peut identifier la fonction de ces 2 champs et **remplir automatiquement l'identifiant** et le mot de passe. - -Un site web utilise **WebAuthn** pour que l'utilisateur puisse s'**authentifier avec son appareil plutôt qu'avec son nom d'utilisateur et son mot de passe**. L'appareil de l'utilisateur peut utiliser n'importe quelle modalité disponible. Les méthodes les plus courantes sur les ordinateurs portables et les téléphones sont la reconnaissance faciale, les empreintes digitales et le code PIN (numéro d'identification personnel). Le site web n'impose aucune utilisation particulière, il est supposé que l'utilisateur choisira la méthode qui lui convient. - -Un site web offre la possibilité de se connecter avec un fournisseur tiers en utilisant la méthode **OAuth**. - -Un site web qui requiert une **authentification à deux facteurs** offre **plusieurs options pour le deuxième facteur**, y compris une méthode basée sur une clé USB où l'utilisateur clique simplement sur un bouton pour entrer un code valable pendant une durée limitée. - -Un site web qui requiert une **authentification à deux facteurs** affiche un **QR code** qui peut être scanné par une application sur l'appareil de l'utilisateur pour confirmer son identité. - -Un site web qui requiert une **authentification à deux facteurs** envoie une notification à l'appareil de l'utilisateur. L'utilisateur doit utiliser le **mécanisme d'authentification de son appareil** (par exemple, un code PIN défini par l'utilisateur, une empreinte digitale, une reconnaissance faciale) pour confirmer son identité. - -**Exemple non-valide :** - -Empêcher un utilisateur de saisir un mot de passe ou un code de vérification dans le même format que celui dans lequel il a initialement été créé : par exemple un formulaire qui demande à l'utilisateur de saisir les 4 derniers chiffres de son identifiant dans 4 champs différents. -Exception : l'utilisateur peut copier son code puis le coller dans un premier champ. Les caractères seront automatiquement répartis dans les champs suivants. - -**Référence WCAG :** -- 3.3.8 Accessible Authentication (Minimum) -- 3.3.9 Accessible Authentication (Enhanced) From ef3ca9b5e340592fca48d400cf525d87a5971eda Mon Sep 17 00:00:00 2001 From: MewenLeHo Date: Thu, 16 Jan 2025 15:33:56 +0100 Subject: [PATCH 19/20] Fix tests after review --- src/assets/json/checklist/tests-concepteur-en.json | 8 ++++---- src/assets/json/checklist/tests-concepteur-fr.json | 6 +++--- 2 files changed, 7 insertions(+), 7 deletions(-) diff --git a/src/assets/json/checklist/tests-concepteur-en.json b/src/assets/json/checklist/tests-concepteur-en.json index 76b0d7703..6931281bd 100644 --- a/src/assets/json/checklist/tests-concepteur-en.json +++ b/src/assets/json/checklist/tests-concepteur-en.json @@ -569,12 +569,12 @@ "Case 3 - For each authentication journey where one of the steps is a CAPTCHA, ensure that a non cognitive alternative is proposed." ], "verifier": [ - "Case 1 - Check that the input field allows for the following options:
  • the user to paste in the whole password or the verification code
  • the automatic filling of field
in the original format (e.g., case-sensitive) in which the password or verification code was created.", - "All cases - Check that the proposed authentication process does not rely on a cognitive test (e.g., memorizing or entering an login/password which must be accurately reproduced) as described in criteria 3.3.8 or 3.3.9." + "Case 1 - Check that the input field allows for the following options:
  • the user to paste in the whole password or the verification code
  • the automatic filling of field
in the original format in which the password or verification code was created (e.g., case-sensitive).", + "All cases - Check that the proposed authentication process does not rely on a cognitive test (e.g., memorizing or entering an login/password which must be accurately reproduced) as described in criteria 3.3.8 and 3.3.9." ], "resultat": [ - "Case 1 - Check that the input field allows for the following options:
  • the user to paste in the whole password or the verification code
  • the automatic filling of field
in the original format (e.g., case-sensitive) in which the password or verification code was created.", - "All cases - Check that the proposed authentication process does not rely on a cognitive test (e.g., memorizing or entering an login/password which must be accurately reproduced) as described in criteria 3.3.8 or 3.3.9." + "Case 1 - Check that the input field allows for the following options:
  • the user to paste in the whole password or the verification code
  • the automatic filling of field
in the original format in which the password or verification code was created (e.g., case-sensitive).", + "All cases - Check that the proposed authentication process does not rely on a cognitive test as described in criteria 3.3.8 and 3.3.9 (e.g., memorizing or entering an login/password which must be accurately reproduced)." ], "exception": "", "raccourcis": "", diff --git a/src/assets/json/checklist/tests-concepteur-fr.json b/src/assets/json/checklist/tests-concepteur-fr.json index 539bc6b07..8718a4341 100644 --- a/src/assets/json/checklist/tests-concepteur-fr.json +++ b/src/assets/json/checklist/tests-concepteur-fr.json @@ -569,12 +569,12 @@ "Cas 3 - Pour chaque parcours d'authentification dont l'une des étapes est un captcha, s'assurer qu'une alternative qui ne repose pas sur un test cognitif est proposée." ], "verifier": [ - "Cas 1 - Vérifier que le champ de saisie permet au choix :
  • à l'utilisateur de coller le mot de passe en entier ou le code de vérification
  • le remplissage automatique des champs
dans le format initial (exemple : respect des majuscules et minuscules) de création de ce mot de passe ou code de vérification.", - "Tous les cas - Vérifier que le processus d'authentification proposé ne repose pas sur un test cognitif (exemple : mémoriser ou saisir un identifiant et un mot de passe qui doivent être recopiés sans erreur) tel que le critère 3.3.8 ou 3.3.9 le décrit. " + "Cas 1 - Vérifier que le champ de saisie permet au choix :
  • à l'utilisateur de coller le mot de passe en entier ou le code de vérification
  • le remplissage automatique des champs
dans le format initial de création de ce mot de passe ou code de vérification (exemple : respect des majuscules et minuscules).", + "Tous les cas - Vérifier que le processus d'authentification proposé ne repose pas sur un test cognitif tel que décrit aux critères 3.3.8 et 3.3.9 (exemple : mémoriser ou saisir un identifiant et un mot de passe qui doivent être recopiés sans erreur)." ], "resultat": [ "Cas 1 - Vérifier que le champ de saisie permet au choix :
  • à l'utilisateur de coller le mot de passe en entier ou le code de vérification
  • le remplissage automatique des champs
dans le format initial (exemple : respect des majuscules et minuscules) de création de ce mot de passe ou code de vérification.", - "Tous les cas - Le processus d'authentification proposé ne repose pas sur un test cognitif (exemple : mémoriser ou saisir un identifiant et un mot de passe qui doivent être recopiés sans erreur) tel que le critère 3.3.8 ou 3.3.9 le décrit." + "Tous les cas - Le processus d'authentification proposé ne repose pas sur un test cognitif tel que décrit aux critères 3.3.8 et 3.3.9 (exemple : mémoriser ou saisir un identifiant et un mot de passe qui doivent être recopiés sans erreur)." ], "exception": "", "raccourcis": "", From 0b1c07e086ad52c677d9393ab7e88e4fe1608508 Mon Sep 17 00:00:00 2001 From: MewenLeHo Date: Thu, 16 Jan 2025 15:38:07 +0100 Subject: [PATCH 20/20] Fix typos --- src/assets/json/checklist/tests-concepteur-en.json | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/assets/json/checklist/tests-concepteur-en.json b/src/assets/json/checklist/tests-concepteur-en.json index 6931281bd..3f15d3bdd 100644 --- a/src/assets/json/checklist/tests-concepteur-en.json +++ b/src/assets/json/checklist/tests-concepteur-en.json @@ -570,7 +570,7 @@ ], "verifier": [ "Case 1 - Check that the input field allows for the following options:
  • the user to paste in the whole password or the verification code
  • the automatic filling of field
in the original format in which the password or verification code was created (e.g., case-sensitive).", - "All cases - Check that the proposed authentication process does not rely on a cognitive test (e.g., memorizing or entering an login/password which must be accurately reproduced) as described in criteria 3.3.8 and 3.3.9." + "All cases - Check that the proposed authentication process does not rely on a cognitive test as described in criteria 3.3.8 and 3.3.9 (e.g., memorizing or entering an login/password which must be accurately reproduced)." ], "resultat": [ "Case 1 - Check that the input field allows for the following options:
  • the user to paste in the whole password or the verification code
  • the automatic filling of field
in the original format in which the password or verification code was created (e.g., case-sensitive).",