Accessibilité

En général

• Déclaration d'accessibilité de demarches-simplifiees.fr

Référentiels

• https://www.numerique.gouv.fr/publications/rgaa-accessibilite/
• http://references.modernisation.gouv.fr/cerfa-numerique
• https://www.w3.org/WAI/tutorials/
• https://design-system.service.gov.uk/
• https://disic.github.io/guide-contribuer_accessible/

Outils

Validateurs en Ligne

• https://validator.w3.org/nu/
• https://wave.webaim.org/
• https://app.asqatasun.org/login.html
• voir https://alphagov.github.io/accessibility-tool-audit/

Screen Reader

• JAWS https://www.freedomscientific.com/products/software/jaws/
• NVDA https://www.nvaccess.org/
• VoiceOver https://www.apple.com/accessibility/mac/vision/

Autres

• https://a11yproject.com/

En particulier sur les formulaires

Exemples

• https://www.gov.uk/register-to-vote

  • Sections intéressantes en page de garde :
    • Ce dont vous avez besoin pour remplir ce formulaire
    • Autres moyens pour s'inscrire
    • Dates de fermeture de la procédure
  • Organisation du formulaire avec une question par page
  • Composants
    • Radio button avec un fond qui sépare chacun des choix
    • Bloc optionnel qui s'affiche que si nécessaire
    • Aide caché par défaut avec un bouton pour afficher
    • Date n'utilisant pas un input date mais 3 inputs number (https://designnotes.blog.gov.uk/2013/12/05/asking-for-a-date-of-birth/ , https://design-system.service.gov.uk/patterns/dates/)
      • pour la date de naissance, tenter le https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/autocomplete avec bday-day month year ?
  • Question écrite avec une phrase et reprise dans le titre What is your full name?
  • Validations
    • Pas de tag required, utilisation de javascript, affichage a coté de bouton continuer d'une alert + liseré rouge à coté du problème + explication du problème (le mois est invalide)
  • Pas de création de compte initiale !
    • Une des dernière question est If we have questions about your application, how should we contact you? et là choix entre tel / email/ adresse postale.
    • page récapitulative et button submit pour soumettre le formulaire
    • pas de sauvegarde d'état coté client. Si on sort en court de route, tout est à refaire

• Formulaire de paiement Amazon (TODO)

Composants

• https://design-system.service.gov.uk/
• https://www.w3.org/WAI/tutorials/forms/

Blog

• native form validation : https://medium.com/samsung-internet-dev/native-form-validation-part-1-bf8e35099f1d
• inline-form-validation : https://baymard.com/blog/inline-form-validation
• required attribute : https://developer.paciellogroup.com/blog/2019/02/required-attribute-requirements/

Livres

• Web Form Design: Filling in the Blanks by Luke Wroblewski
  • Indiquer en page de garde le temps nécessaire pour remplir le formulaire (p63)
  • Utiliser un indicateur de progression pour les formulaires en multiple page (p70)
  • longueur des inputs doit correspondre à la longueur attendu du texte contenu (voir affordance) (p116)
  • Écrire ce que l'astérisque signifie
    • si une majorité de champ sont obligatoires, ajouter un texte uniquement aux optionnels
    • s'ils sont tous obligatoires ne pas ajouter de texte