Liste d'outils liés à l'accessibilité web pour les développeurs (travail en cours)

La liste n'a pas vocation à être exhaustive (mais vous pouvez proposer des ajouts / mise à jour) et est orientée développeur web.

Les liens sont majoritairement anglophones j'ai donc choisi de préciser lorsqu'ils étaient disponibles en français

---

• Apprentissage / Documentations
  • Guidelines et réglementations
  • Listes de documentations utiles
• Checklists
• Extensions pour navigateurs web, et bookmarklets
  • Les leaders
  • Autres outils utiles
• Outils proposant une intégration dans une CI
• Exemples de code, librairies et templates
• Tester par d'autres moyens
• TODO - Bonnes pratiques
• Divers

Apprentissage / Documentations

Guidelines et réglementations

• WCAG 2.0 Guidelines - Liste des guidelines du WCAG (W3C Accessiblity Guidelines).

• WAI - Stories of Web Users - Liste de personas d'utilisateurs du web avec divers handicaps proposée par le WAI (Web Accessibility Initiative, part of W3C). Chacun des personas réfèrence des liens vers les sections concernées des guidelines du WAI.

• [fr] RGAA - numerique.gouv.fr - Site du gouvernement pour le Référentiel Général d'Amélioration de l'Accessibilité).

• [fr] RGAA - critères et tests - Liste des critères et tests du RGAA.

https://www.w3.org/WAI/ER/tools/

Listes de documentations utiles

• Tutoriels d'accessibilité Web du W3C

• How to Meet WCAG requirements (Quick Reference) - Outil du W3C sous forme de liste filtrable des recommandations du WCAG Guidelines et les techniques pour y faire face.

• A11y Project ressources - Le A11y Project (projet communautaire) propose une liste de ressources liées à l'accessibilité (dont une checklist, voir plus bas) telle que des ouvrages et articles, des outils etc.

• A11y styleguide - Liste de ressources concernant l'implementation de l'accessibilité, comprenant des explications et des exemples de code.

• HTML5 accessibility support by browsers

• A11yCoffee

Checklists

• Checklist A11y project - Checklist des recommandations WCAG pouvant servir d'exemple et fournie par le A11y Project.

• Checklist Pidila - Checklist du Pidila. Une ressource très utile pour les sites soumis à la RGAA. LA DILA propose aussi une librairie de composants réutilisables et conformes à la réglementation (cf. exemples de code).

• Checklist US gov - Checklist du gouvernement américain - partie développeur frontend.

Extensions pour navigateurs web, et bookmarklets

Les leaders

• Lighthouse (Chrome) - Lighthouse (Google)est une extension pré-installée sur Chrome et qui fournit plusieurs types d'audit d'une page web notamment l'accessibilité, les bonnes pratiques et la performance.
• Wave (Chrome/Firefox) - Wave est une outil proposé par WebAIM (association travaillant sur l'accessibilité du web). Il est disponible sur Chrome et Firefox, et fournit un résumé de différents éléments d'accessibilité directement sur la page web auditée. Wave permet aussi de désactiver les styles CSS.
• Axe (Chrome/Firefox) - Axe est un outil de la société Deque. Il propose notamment une extension qui s'intégre aux côtés de lightouse (sur chrome) dans les outils de développement et qui permet d'auditer des pages web.

Autres outils utiles

Note: les bookmarklets sont des scripts javascript qui peuvent être executés depuis un signet. Ils ne nécessitent donc pas d'installation.

• Validator
• Pa11y - Outil d'automatisation de tests d'accessibilité disponible en CLI ou en package node. Peut être utilisé avec Axe.
  • Koa11y - Application desktop (Windows, OSX et Linux) utilisant Pa11y.
• tota11y - Bookmarklet fourni par la Khan Academy (Github) mettant en avant les manquements aux guidelines WCAG d'une page web.
• HTML_CodeSniffer - Bookmarklet mettant en avant les manquements aux guidelines WCAG d'une page web.
• A11y.css - Disponible sous forme de bookmarklet et d'extension Chrome/Firefox. Met en avant les alertes et erreurs directement sur la page web (overlay).
• eslint-plugin-jsx-a11y - Plugin eslint permettant la vérification de l'accessibilité sur du code React.
• Images On/Off (Chrome) - Extension Chrome permettant de désactiver toutes les images d'un site pour tester le comportement.

Outils proposant une intégration dans une CI

• Lighthouse CI - Voir plus haut pour une description de Lighthouse. L'outil s'intégre aussi dans une CI et est compatible avec la plupart des providers du marché (Github Actions, Travis CI, Circle CI, Gitlab CI,...).

• Axe core - Voir plus haut pour une description de Axe. TODO pour la partie CI.

• Pa11y CI - Pa11y CI est un utilitaire de tests d'accessibilité s'intégrant à une CI, et basé sur Pa11y.

• Asqatasun - TODO

Exemples de code, librairies et templates

• Van11y - Collection de scripts accessibles pour des Rich Interfaces Elements tels que des modals, tooltips etc. et utilisant les guidelines ARIA.

• inclusive-components.design - Librairies de patterns accessible avec exemple de inclusive components (tels que todolist, image slider) avec des explications et des exemples de code.

• Accessible components - Repository Github avec des exemples de composants accessibles (js) et des explications (MIT licence). Du même auteur: The Accessibility of Styled Form Controls .

• Deque University code library (beta) - Deque (concepteur de l'outil Axe) propose une liste de composants accessibles (code source + référence aux guidelines WCAG).

Tester par d'autres moyens

• VoiceOver - WebAIM - Ressource de WebAIM expliquant comme utiliser VoiceOver pour vérifier l'accessibilité d'un web site.

TODO - Bonnes pratiques

Todo Ressources sur les choses à challenger en tant que dev (personnaliser les inputs etc.)

Divers

• a11y-nutrition-cards - visualisation simplifiée des attentes en terme d'accessibilité sur certains types de composants (button, tabs, ...)