[Accessibilité] - Améliorations suite au rapport Resin
Contexte
Améliorations possibles, suite à l'audit de Resin
-
!1209 (merged)
Parcourir tout le site en mode téléphone avec une largeur de 320px + hauteur de 256px. Tout doit être visible -
!1219 (merged)
Il faut identifier les inputs 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. -
!1220 (merged)
Pour les inputs concernés (prenom nom ..), la valeur des attributs « autocomplete » devrait être à « on » (ou « email » et « current-password ») pour faciliter le remplissage du formulaire. -
!1214 (merged)
Concernant les inputs, il faut également ajouter le bon type de champ (« type="email" », familiy-name, tel...). 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. -
!1214 (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). -
!1221 (merged)
Il n’existe pas de lien d’évitement ou d’accès rapide. Ils peuvent être positionnés hors écran (position: absolute) et apparaitre à la prise de focus (navigation clavier). Ils doivent être positionnés en début de code et en haut de page. Ils doivent toujours être situés à la même place dans les pages et doivent toujours être dans le même ordre dans le code source. (Exemple sur cette page : https://disic.github.io/guide-integrateur/demo/2-navigation/access-rapide.html) -
OK
Vérifier que les inputs n'ont pas deux ID identiques + Aucun ID ne doit avoir d'espace / accent, à vérifier -
OK
Vérifier que les collapse respectent bien le modèle de conception « Menu Button Pattern » (https://www.w3.org/WAI/ARIA/apg/patterns/menu-button/) -> par exemple les états plié/déplié (aria-expanded). -
!1212 (merged)
Les checkboxes ont un comportement de case à cocher et devraient avoir un rôle « checkbox » (role="checkbox") et un état « coché/non coché » (aria-checked="false"), ce n'est pas le cas dans la partie 'ajuster mon profil' -
#773 (closed)
Navigation optimisée -
#616 (closed)
Vérifier le style du focus des champs des formulaire. S'il a été supprimé, il faut rétablir le style natif du navigateur ou définir un style en CSS (propriété « outline »).