[Accessibilité] - Page Authentification
Contexte
Résultats du rapport d'audit d'accessibilité
Page Authentification : https://resin.grandlyon.com/connexion
Objectif
Corriger les problèmes d'accessibilité restants.
Faire ce qui est raisonnable. N'hésitez pas à signaler ce qui est trop compliqué, ça pourra être discuté et/ou reporté en accord avec Erwan.
Ressources
Rapport envoyé par mail
Tâches en cours
-
!875 (merged)
Il faut identifier les champs obligatoires. Par exemple ajouter une indication visuelle () sur chaque champ + une mention ( champs obligatoires) en début de formulaire. De plus il faut ajouter un attribut « required » (ou « aria-required="true" ») sur chaque champ obligatoire. Il faut également ajouter le bon type de champ : « type="email" » pour l’input Identifiant. Il faut relier les champs en erreur avec leur message d’erreur via l’utilisation de l’attribut « aria-describedby="ID-erreur" » (sur le champ) / ID du message d’erreur. -
!875 (merged)
Dans le messages d’erreur de l’identifiant, il faut suggérer un exemple de données attendues (« L’identifiant doit être un email valide. Exemple : email@yahoo.fr »).\
-
!875 (merged) 53d04db0
La valeur des attributs « autocomplete » des champs « Identifiant » et « Mot de passe » devrait être à « on » (ou « email » et « current-password ») pour faciliter le remplissage du formulaire.
Tâches finies
-
!886 (merged)
L’icône pour afficher/masquer le mot de passe n’est pas compatible avec les technologies d’assistance. Pour la navigation au clavier il est préférable d’utiliser un élément . Il faut ensuite ajouter des attributs « role="switch" », « aria-checked="true" » (true/false) et « aria-label="Afficher" » (Afficher/Masquer).\
-
!886 (merged) 07d2b889
Le style du focus des champs du formulaire a été supprimé. Il faut rétablir le style natif du navigateur ou définir un style en CSS (propriété « outline »).\
-
!886 (merged) d2cd52cc\
Lorsque la fenêtre est réduite à une largeur de 320px, le contenu est tronqué. Il faut par exemple modifier la valeur de la propriété CSS « overflow-y » au niveau de la<div>parent qui possède l’attribut « class="loginContainer" ».\
-
!887 (merged)
(MS : les inputs on été géré dans la MR !875 (merged), ce qui reste le sera dans celle ci)
Pour chaque champ du formulaire, il y a une duplication des ID avec leur balise parent (), ce qui créé un conflit avec l’association des balises . Le logiciel de restitution NVDA ne retransmet pas la relation /champ. (Règle du W3C, il ne peut y avoir 2 ID identiques dans une page) (problème simiaire remonté ici : #592 (closed))
