[Accessibilité] - Formulaire de contact

• Contexte
• Objectif
• Ressources
• Tâches

Contexte

Résultats du rapport d'audit d'accessibilité
Formulaire de contact : https://resin.grandlyon.com/contact

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

• 01fcf607
  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 »).
  

• 31e50a0c
  Lorsque la fenêtre est réduite à une largeur de 320px, le champ () « Message » est tronqué. Il faut par exemple rajouter une propriété CSS « max-width: 100%; » au niveau de la <div> parent qui possède la propriété CSS « width: 600px; ».
  (+ a vérifier sur l'onboarding)
  

• 3904e2a5
  Pour les champs input 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)
  

• 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 les bons types de champs : « type="email" » pour l’input Adresse mail et « type="tel" » pour l’input Téléphone.
  Il faut relier le champ en erreur avec le message d’erreur via l’utilisation de l’attribut « aria-describedby="ID-erreur" » (sur le champ) / ID du message d’erreur.
  (+ a faire aussi pour l'onboarding)

• 14847b21
  Dans le messages d’erreur, il faut suggérer des exemples de données attendues (« Adresse mail invalide. Exemple : email@yahoo.fr »).
  (+ a faire aussi pour l'onboarding)
  

• 53d04db0
  La valeur des attributs « autocomplete » des champs « Nom » et « Téléphone » devrait être à « on » (ou « family-name » et « tel ») pour faciliter le remplissage du formulaire. (+ a faire aussi pour l'onboarding)