[A11Y] Audit RGAA Rapide de iroco.co

[marc-bouvier]

Produire un premier audit d'accessibilité

• Audit rapide : 25 critères
• Référentiel RGAA 4.1.2
• Démarche
  • https://lowdit.github.io/frago/docs/demarrer/audit-demarrer/
  • https://lowdit.github.io/frago/docs/renseigner/accessibilite/
• L'audit généré permet d'obtenir
  • Une vue consolidée avec des diagrammes et visualisations
  • Dans le cas où plusieurs audit ont été effectués: les tendances (progres, régressions ...)
  • Le détail des critères qui ne sont pas respectés
  • Les recommendations d'améliorations
  • La documentation sur les référentiels utilisés
  • Une API permettant de consulter les résultats au format JSON
    • ex. https://lowdit.github.io/frago/docs/naviguer/api/

Concrètement, il s'agit de remplir le fichier CSV d'audit d'accessibilité en suivant les différentes règles décrites par Frago.

Apprentissages attendus

Produire cet audit nous permettra

• D'apprendre la démarche d'audit simplifiée
• De savoir si Frago est l'outil qui répond à nos attentes
• De découvrir les outils pouvant nous aider à auditer
• De savoir combien de temps est nécessaire pour auditer
• De savoir quels aspects peuvent être automatisés et quels sont à réaliser manuellement
• De documenter la pratique et de servir de témoignage à Frago
• De contribuer à Frago si on voit qu'on peut proposer des améliorations

Périmètre d'audit

Page (rapport d'audit)	URL
Home	https://iroco.co
Newsletter (dont iframe dans Home)	https://xq520.mjt.lu/wgt/xq520/m4m/form?c=75474af6 https://iroco.co/newsletter
About	https://iroco.co/about
FAQ	https://iroco.co/faq
Signup	https://iroco.co/signup
Legal Notices	https://iroco.co/legal
General Terms of Sales	https://iroco.co/terms

Hors périmètre

Page	URL	Raison
Blog	https://blog.iroco.co/	Autre domaine -> plus tard dans une autre issue
Signin	https://app.iroco.co/	Autre domaine -> plus tard dans une autre issue
Jobs	https://jobs.makesense.org/en/projects/iroco-364	Sous-traitant

[marc-bouvier]

Pa11y

• CLI A command-line interface which loads web pages and highlights any accessibility issues it finds. Useful for when you want to run a one-off test against a web page.
• Dashboard : A web dashboard which automatically tests web pages for accessibility issues daily. Graphs help you track improvements and regressions over time. Useful for non-developers to see how your sites perform.
• Webservices : The JSON-based webservice that backs Pa11y Dashboard. Useful if you want to build your own dashboard-like front end, or repurpose the data.
• CI : A command-line tool which iterates over a list of web pages and highlights accessibility issues. This is a CLI that’s more geared towards use in CI.
• Il peut être intéressant de l'utiliser en tant que boucle de feedback rapide pendant le développement
• Pour s'éduquer et s'améliorer "en faisant"

RGAA 4?

[marc-bouvier]

Wave

Web Accessibility Evaluation Tools.

• Extension Chrome/Firefox
• Subscription API 0.04$ - 0.12$ / page scan (mini 250 credits)
• Standalone API/Testing Engine 4000$ - 12000$ / an

RGAA 4?

[marc-bouvier]

Extension "assistant-rgaa" de la DISIC

https://github.com/empreinte-digitale/assistant-rgaa

• Aide à l'audit manuel
• Liste des critères
• Fonctions utilitaires complémentaires
  • ex. boutons pour cacher les images pour voir s'il y a des alt

RGAA 4.0

Sur firefox l'extension maintient les couleurs quand on active le test 1.1.1

Sur brave j'ai un fond blanc

EDIT : l'extension est désormais sur les stores chrome et firefox

[marc-bouvier]

Idée de contribution lowdit

• Générer les trames csv de base 25 critères ... à partir de https://github.com/lowdit/rgaa/blob/master/list.yml
• Mettre à jour la doc frago pour référencer les trames pré-calculées.

[marc-bouvier]

premier feedback

• L'extension assistant d'accessibilité est très utile, en particulier les coche pour "activer" certains tests
• Ce serait bien si on avait une correspondance entre les critèrs WCAG (très outillés) et RGAA
  • ca permettrait de prémacher ou automatiser les tests sur certains critères
• Les allers-retours entre la fenetre et le tableau CSV
• Il y a des critères qui sont automatisables en introspectant le HTML

Idée de worflow pour le partager les tâches apres la pause...

Idée:

• faire un passe juste avec Wave
  • marquer non conforme les erreurs et warnings
  • marquer le reste conforme
  • Hypothèse : Wave couvre tout ce qu'on veut vérifier? -> à confirmer

[marc-bouvier]

Critères 1.1, 7.3 : Wavec est très utile (onglet "Order")

[marc-bouvier]

Critère 9.1.1 : onglet "Structure" de Wave est utile

[marc-bouvier]

Onglet d'accessibilité des outils dev de Firefox.

[marc-bouvier]

Avancement de l'audit

• Home
• Newsletter (dont iframe dans Home)
• About
• FAQ
• Signup
• Legal Notices
• General Terms of Sales

[marc-bouvier]

@bamthomas
Côté assistant-rgaa, il y a une issue relative à l'automatisation de certains tests empreinte-digitale/assistant-rgaa#32

[bamthomas]

fixes made on the landing page so far

iroco-co/landing@d615afa
iroco-co/landing@dabd018
iroco-co/landing@458f475
iroco-co/landing@1466cbe

[bamthomas]

niveau rapport en tant que tel, il y a deux gros soucis qui font je pense la grosse partie des non conformités :

1. l'iframe mailjet d'autant plus qu'elle compte double (sur 2 pages). Je suis allé sur le site et on ne peut plus modifier directement le HTML c'est généré par des composants graphiques. Donc là je pense que c'est mort, ou alors il faut faire un ticket au support de mailjet pour leur demander de faire en sorte que leur formulaire soit a11y compliant ;
2. l'optin/optout pour matomo est aussi une iframe et elle est cassée à cause de la directive Content Security Policy que j'avais ajoutée pour être en conformité avec les chatons cela fait toute la partie formulaire de FAQ en non conforme (dans le doute). Cf cette page chez matomo.

[marc-bouvier]

niveau rapport en tant que tel, il y a deux gros soucis qui font je pense la grosse partie des non conformités :

1. l'iframe mailjet d'autant plus qu'elle compte double (sur 2 pages). Je suis allé sur le site et on ne peut plus modifier directement le HTML c'est généré par des composants graphiques. Donc là je pense que c'est mort, ou alors il faut faire un ticket au support de mailjet pour leur demander de faire en sorte que leur formulaire soit a11y compliant ;

2. l'optin/optout pour matomo est aussi une iframe et elle est cassée à cause de la directive Content Security Policy que j'avais ajoutée pour être en conformité avec les chatons cela fait toute la partie formulaire de FAQ en non conforme (dans le doute). Cf cette page chez matomo.

Je me dis qu'on pourrait séparer ce qui relève du code dont on a la propriété des tierces parties.
Dans les faits, on n'est pas plus conforme mais ça peut nous permettre de communiquer sur le sujet. Et peut être qui sait faire bouger les lignes chez ces acteurs.

Si un acteur comme mailjet fait un effort sur l'accessibilité sur des module réutilisés par des millier d'intégrateurs, l'impact en terme d'accessibilité peut être considérable.