Trucs & astuces pour l’accessibilité web

En attendant que la pseudo-classe CSS :focus-visible soit supportée par les navigateurs et intégrée dans la spécification CSS, on peut trouver ce polyfill en JavaScript pour mettre en place ce comportement : rendre le focus visible (l'outline) uniquement en navigation clavier et non au clic souris

Il n'y aura plus aucune raison de désactiver l'outline !

Article publié le 29 novembre 2018 et écrit par Olivier Nourry à propos des widgets de vocalisation qui ne permettent pas de résoudre les problèmes d’accessibilité des contenus web ; tout comme les autres outils qui disent « rendre les sites web accessibles » ne le font pas en vérité.

Article de Gaël Poupard qui nous propose une classe .sr-only (habituellement utilisée avec Bootstrap) améliorée pour l'accessibilité. A mettre dans toutes les feuilles de styles car on a souvent besoin de masquer un texte en CSS afin de préciser l'information aux utilisateurs et utilisatrices de lecteurs d'écran

Le petit script Skip link focus fix est utilisé dans WordPress afin de corriger un bug avec les ancres en navigation clavier sous Internet Explorer.

Grâce à ce script, lorsqu’on clique sur un lien vers une ancre, la prochaine tabulation se fera bien sur le prochain élément focusable après l’ancre. Cela corrigera donc les ancres des liens d'évitement (d'où le nom du script).

Article publié sous le titre Text-Resize Detection, écrit par Christian Heilmann et Lawrence Carvalho, daté du 12 septembre 2006

Technique de détection du zoom texte en JavaScript très utile pour adapter sa mise en page lorsque les éléments se comportent mal dans ce cas et si on n'utilise pas les media queries en valeurs em

Une bibliothèque JavaScript pour mettre en pause les GIFs animés.

Bien sûr, pour l’accessibilité, c’est bien la version avec les boutons pour démarrer et arrêter les GIFs qu’il faut choisir !

Une démo est disponible.

Romain Gervois présente dans ce lien trois façons de faire un lien sur un bloc : un bloc avec un titre, une image et d’autre texte. Les tests de restitution datent un peu mais cette page est néanmoins utile.

• La première, c’est un lien qui englobe tout comme on peut le faire depuis HTML5. Ce n’est pas la meilleure solution pour l’accessibilité car, en restitution par un lecteur d’écran, cela fait des liens très longs à lire.
• La deuxième, c’est un lien uniquement sur le titre et un pseudo-​élément ::before dans le lien qui, en position absolue, permet d’étendre la zone de clic à tout le bloc.
• La troisième, c’est une extension de la zone de clic souris (gauche uniquement) en JavaScript. Le menu contextuel en clic droit n’est possible que sur le titre.

La deuxième solution serait la meilleure puisqu’on peut alors avoir la zone cliquable gauche et droit sur l’ensemble du bloc tout en assurant le strict nécessaire en restitution par un lecteur d’écran. Ainsi, il sera aussi possible d’ouvrir le lien dans une nouvelle fenêtre peu importe où on clique.

Cela peut sembler aller dans le sens contraire de la norme car l’attribut border est obsolète mais c’est pourtant un vrai plus pour l’accessibilité d’un tableau de données (et non pas pour un tableau de présentation). En effet, aujourd’hui, la balise <table> et ses cellules <td> n’ont plus de bordure par défaut. Par conséquent, même si on les rétablit via CSS, il est possible que ce soit gênant pour certaines personnes qui, par exemple, désactivent les feuilles de style.

Ainsi, en ajoutant un attribut border (sans valeur) ou border="1" sur un tableau de données, on permet à ce tableau de s’afficher avec des bordures et à tout le monde de lire correctement le tableau peu importe le contexte d’affichage.

Voici la citation issue de la spécification HTML 5.1 du W3C :

The border content attribute may be specified on a table element to explicitly indicate that the table element is not being used for layout purposes. If specified, the attribute’s value must either be the empty string or the value « 1″. The attribute is used by certain user agents as an indication that borders should be drawn around cells of the table.

Note : Officiellement, il ne s’agit pas d’une technique valide selon le RGAA (critère 10.1) mais avec une explication comme celle-​ci, un examinateur ou une examinatrice n’aurait, a priori, pas vraiment de raison de désapprouver.

À noter par ailleurs, que le validateur de code HTML remonte également une erreur mais celui-​ci s’appuie sur la version HTML du WHATWG et non celle du W3C.

Merci à Romain Gervois pour cette astuce.

HTeuMeuLeu reprend, dans cette courte note du 13 décembre 2020, un tweet d’Access42 qui donnait les numéros pour œuvres audiovisuelles. Très pratique lorsqu’on doit donner des exemples de numéros de téléphone pour nos formulaires accessibles !

ResizeObserver permet de détecter le changement de dimension d’un élément via JavaScript.

Si on agrandit le texte, normalement, la dimension de l’élément change. Ainsi, cela devient un moyen pour détecter facilement le zoom texte ou l’agrandissement des tailles de police, de manière générale, par un utilisateur ou une utilisatrice. Ainsi, on peut ajouter une classe sur l’élément body pour faire des styles spécifiques afin que l’interface se comporte bien.

En juillet 2020, la spécification est encore à l’état de brouillon au sein du W3C et le support des navigateurs est partiel mais déjà bien avancé.

Vincent Valentin a réalisé ce CodePen qui présente notamment un tableau comparatif des techniques pour supprimer un élément en HTML, CSS ou JavaScript en indiquant les différentes implications (accès clavier, pointeur de souris, visuel, sémantique, etc.).

Très pratique pour identifier la technique à utiliser selon les cas d’usages.