tota11y : visualisez l’accessibilité de votre site web

Il est parfois difficile de s’assurer que son site se comporte correctement vis-à-vis des technologies d’assistance dont peuvent se servir les visiteurs en situation de handicap pour parcourir le web. Ces technologies peuvent revêtir diverses formes : aides logicielles (lecteurs d’écran, loupes) ou matérielles (souris, claviers, micros, trackballs, plage Braille, etc.).  Pour faciliter la tâche de l’intégrateur front-end, l’équipe de développement de la Khan Academy a décidé de lancer tota11y.

tota11y pour quoi faire ?

tota11y est un outil Javascript qui permet d’afficher à l’écran un certain nombre de points litigieux au regard de l’accessibilité tels que :

• Ancres des liens peu compréhensibles.
• Champs de formulaire sans label explicite.
• Mauvaise imbrication des niveaux hiérarchiques pour les en-têtes <h1> — <h6>.
• Manque de contraste entre la couleur du texte et le fond.
• Absence de l’attribut alt pour les images.
• Absence de région ARIA (ARIA landmarks).

Installer tota11y

L’installation s’effectue en glissant un bookmarklet dans les favoris et en cliquant sur dessus pour faire apparaître le bloc tota11y dans le coin inférieur gauche de la page. Il suffit de cliquer sur la paire de lunettes pour commencer à faire le tour des points à vérifier et voir en direct live sur votre page les zones concernées.

• Pour les en-têtes, chaque niveau est surligné en vert si l’imbrication est correcte ou en rouge si ce n’est pas le cas.
• Pour le contraste, les éléments correctement contrastés apparaissent en vert, les autres en rouge. Le taux de contraste est précisé pour chaque cas (le minimum est de 3). Si le contraste est insuffisant, tota11y vous propose la couleur la plus proche de la vôtre qui fera le job. A noter que tota11y tient compte de la taille du texte pour le calcul du contraste minimum.
• Pour les liens, tota11y identifie ceux qui peuvent être problématiques.
• Les champs de formulaire sans label sont traqués impitoyablement, de même que les attributs placeholder peu clairs au regard des technologies d’assistance.
• Les images sans balises alt sont également soumises à un contrôle draconien.
• Les régions ARIA sont affichées en jaune sur la page, pour information.

tota11y se veut un outil didactique pour diffuser les bonnes pratiques. Chaque clic sur un élément problématique fait apparaître une fenêtre proposant une piste de réflexion et/ou des exemples pour régler le problème.

Notez que tota11y est également disponible sur Github au cas où vous voudriez installer le script en local via les balises <script> :

[pastacode lang= »javascript » message= » » highlight= » » provider= »manual »]

<script src="tota11y.min.js"></script>

[/pastacode]