import { Meta, Story } from '@storybook/addon-docs/blocks';
import * as PasswordFieldStories from '../PasswordField.stories.ts';
import AccessibilityIcon from '@/common/imgs/accessibility-svgrepo-com.svg';
import {
AccessibilityGuideLayout,
CriteriaSection,
CriteriaCard,
DemoSection,
BestPracticesSection,
ResourcesSection,
AuditSection,
} from '@/stories/accessibility/AccessibilityGuideLayout.mdx';
- Les champs de formulaires doivent avoir une étiquette pertinente et accolée au champ associé.
- Techniquement, il est recommandé d'utiliser la balise
label avec les attributs for et id.
- Documentation accede-web
- Selon la finalité du champ, l'attribut
autocomplete permet de faciliter le remplissage automatique.
- PasswordField propose les valeurs
current-password et new-password.
- Documentation accede-web
- En cas d'aide à la saisie, l'inscription doit être visible ou présente dans l'étiquette.
- Elle doit être rattachée au libellé ou située dans le passage de texte associé au champ.
- Documentation accede-web
- Les champs obligatoires possèdent un intitulé visible permettant de l'identifier comme tel.
- L'attribut
required ou aria-required="true" est présent.
-
Documentation accede-web
- En cas d'erreur, un message visible permet de l'identifier et l'attribut
aria-invalid="true" est présent.
- S'il s'agit d'une erreur de type ou de format, l'information est retranscrite dans le message avec des exemples de valeurs attendues.
-
Documentation accede-web
- Le copier-coller doit être possible dans un champ d'authentification pour faciliter l'utilisation d'un gestionnaire de mot de passe.
- Il faut pouvoir démasquer le mot de passe lors de la saisie pour améliorer la réussite de saisie.
- Le bouton permettant d'afficher ou de masquer le mot de passe est un bouton à bascule (toggle button).
- Son état doit être indiqué avec l'attribut
aria-pressed (true lorsque le mot de passe est affiché, false lorsqu'il est masqué).
- Le libellé du bouton ne doit pas changer lorsque son état change. Seul l'état porté par
aria-pressed évolue afin d'être correctement annoncé par les technologies d'assistance.
- Documentation W3C — Accessible Authentication
-
Documentation W3C — Button Pattern (Toggle Button)
- Utilisez l'attribut
autocomplete adapté (current-password ou new-password).
- Ne bloquez jamais le copier-coller dans un champ d'authentification.
- Proposez un bouton pour afficher/masquer le mot de passe.
- Fournissez une étiquette explicite et un texte d'aide si nécessaire.
- Signalez les erreurs avec un message clair et des exemples de valeurs attendues.