Vesper Tools
Les outils que je construis pour mes propres audits, publiés en accès libre. Gratuits, sans compte, et tenus aux mêmes exigences d'accessibilité que ce que j'audite.
-
Publié
Vesper Toolkit
Une douzaine d'outils de test d'accessibilité dans la barre de favoris. Sans extension, sans inscription, sans donnée qui sort du navigateur.
- À quoi ça sert
- Faire des scans automatisés d'une page pour me faire un premier avis : axe-core, contraste, ordre de tabulation, nom accessible, hiérarchie des titres, étiquettes de formulaire, et plusieurs autres outils ciblés.
- Comment s'en servir
- Glisser les favoris depuis la page d'installation (toolkit.vesperlab.dev), puis cliquer un bookmarklet sur la page à tester.
- Ce que ça ne fait pas
- Ne remplace pas une vérification manuelle : axe-core ne détecte qu'une partie des critères WCAG, le reste reste au jugement humain.
- Technologie et licence
- HTML/CSS/JS vanilla, aucune dépendance, sous licence MIT.
Proposé pour le moment en anglais, une traduction française est en cours.
-
Publié
Vesper Library
Une bibliothèque de composants d'interface accessibles : démo à essayer au clavier et au lecteur d'écran, extrait de code, et liste de vérification WCAG pour chacun.
- À quoi ça sert
- 29 composants d'interface courants (menus, formulaires, dialogues, onglets…), chacun testé au lecteur d'écran, avec le code de référence et les critères WCAG 2.2 à vérifier point par point.
- Comment s'en servir
- Chercher un composant, copier l'extrait de code, ou activer le Mode Rapport pour cocher les points vérifiés pendant un diagnostic et exporter votre annexe. Directement depuis (library.vesperlab.dev)
- Ce que ça ne fait pas
- Ne couvre pas les composants très spécifiques à une marque : les 29 entrées restent des patrons génériques, à adapter au contexte.
- Technologie et licence
- Page statique HTML/CSS/JS, aucune dépendance, polices auto-hébergées, sous licence MIT.
Bilingue français/anglais : la bascule de langue traduit tout le contenu, pas seulement l'interface.
-
Publié
Vesper Compass et Sonar
Un référentiel des critères WCAG 2.2 pédagogique et filtrable, pour mieux appréhender l'accessibilité numérique et comprendre les besoins réels derrière le code.
- À quoi ça sert
- Garder les critères d'accessibilité numérique sous la main, les comprendre, les afficher dès qu'on en a besoin, et placer de véritables besoins humains derrière des règles.
- Comment s'en servir
- Installez le bookmarklet Sonar pour afficher Compass dans une fenêtre, directement sur la page que vous visitez. Visitez (compass.vesperlab.dev) pour accéder au glossaire complet, avec une barre de recherche.
- Ce que ça ne fait pas
- Remplacer les textes officiels ! Compass a pour vocation de vulgariser et d'humaniser la reglementation, pas de servir d'autorité dans un processus de mise en accessibilité.
- Technologie et licence
- Page statique HTML/CSS/JS, aucune dépendance, polices auto-hébergées, sous licence MIT. Les critères viennent du même jeu de données que Toolkit, généré une seule fois pour les deux.
-
Publié
Vesper AC Viewer
Le meilleur allié des bookmarklets du Toolkit, pour visualiser et exporter vos résultats de scan.
- À quoi ça sert
- Visualiser les résultats des bookmarklets 🦇 AC Scan et 🦇 AC Targeted Scan de manière accessible, afficher des détails, et exporter les données sous plusieurs formats.
- Comment s'en servir
- Visitez (la page du Viewer) et collez vos résultats. Les bookmarklets sont visibles sur (toolkit.vesperlab.dev)
- Ce que ça ne fait pas
- Ne lance pas de scan lui-même : il faut d'abord un JSON produit par AC Scan (ou un des autres scans de Toolkit qui exporte au même format) à coller dedans. Le rapport reste la sortie brute d'axe-core : à trier et interpréter comme n'importe quel scan automatisé.
- Technologie et licence
- Page HTML/JS autonome, mais qui charge deux bibliothèques externes depuis un CDN pour générer les exports : ExcelJS (.xlsx) et docx.js (.docx). Licence MIT.
-
Publié
Vesper Visible
Un seul et même site, deux pages : l'une pensée comme accessible dès le départ, l'autre dont l'accessibilité a été improvisée. À vous de voir et d'entendre les différences, si vous les trouvez.
- À quoi ça sert
- Comprendre l'accessibilité concrètement par une comparaison directe, tester les bookmarklets du (Vesper Toolkit), voir des scans automatisés en action et comprendre leurs limites, ouvrir le champ du visible.
- Comment s'en servir
- Visitez (Vesper Visible) et faites vos propres expériences : vous pouvez utiliser les bookmarklets du (Vesper Toolkit), des outils de couleurs, un lecteur d'écran, et la fenêtre de développement de votre navigateur. Pour creuser encore plus loin, plusieurs barrières d'accessibilité sont invisibles au scan.
- Ce que ça ne fait pas
- Le site en lui-même n'a pas de véritable fonction, il ne représente pas une entreprise et n'a pas de réelles pages et contenus à proposer. Il ne vous dira pas non plus directement (toutes) les réponses: elles sont disséminées dans les résultats de scan, dans le code et dans des toggles, mais aucun lien ne vous comparera directement les éléments.
- Technologie et licence
- Trois pages HTML/CSS/JS statiques, aucune dépendance, polices auto-hébergées, sous licence MIT.