S’appuyer sur ARIA c’est rigolo
Attention pour une fois je vais parler technique.
Il arrive souvent quand on scripte une page web et qu’on pense à l’accessibilité, qu’on ajoute ce qui est nécessaire [1] dans une deuxième phase. Par exemple pour afficher/masquer un élément :
Oui mais finalement, dites voir, est-ce qu’on ne ferait pas deux fois le travail ?
Il y a une dizaine d’années (déjà !) nous avons présenté une conférence avec
Matthias (comme ça se prononce : Matthias Dugué). Nous y disions (quand il fallait encore le dire) que le JavaScript n’était pas ennemi de l’accessibilité ; voire, pour gérer les états des éléments, qu’il était nécessaire.
Mais comme la conférence a eu lieu face à un petit auditoire (à Caen si je me rappelle bien), j’aimerais bien partager cet exemple avec vous.
Vu que ça fait un moment maintenant que tous les navigateurs comprennent les sélecteurs d’attributs, autant en tirer parti. Prenons donc l’exemple ci-dessus à l’envers.
Créons un sélecteur CSS :
[aria-hidden=true] {visibility: hidden;}
// selon les contextes, ça pourrait aussi être display: none
Quand nous voulons masquer l’élément, il nous suffira de changer dans le DOM son attribut aria-hidden. Ainsi la visibilité sera systématique, aussi bien visuelle que pour un outil d’assistance. Nous aurons l’assurance de ne jamais faire le travail à moitié comme c’est parfois le cas dans un modèle visuel [3].
Et hop, le tour est joué. Demain si vous êtes sages nous parlerons cheval melba. Ou publicité en ligne, on verra.
Notes
[1] Quand on l’ajoute — mais allons, allons, pas de mauvais esprit.
[2] Nous allons partir du postulat que tout le monde préfère maintenant manipuler des classes que des styles directement, allons allons pas de mauvais esprit.
[3] Car même avec la meilleure volonté du monde, on oublie parfois de faire certaines choses, allons allons pas de mauvaise foi. La perfection n’est pas de ce monde et moi-même qui vous parle…
Commentaires
-
[aria-hidden=true] {visibility: hidden;} // selon les contextes, ça pourrait aussi être display: noneUn point obscur pour moi : « selon les contextes … display : none », lesquels et pourquoi et comment ?
-
Franck : Le display fait disparaître l’élément du flux, le visibility laisse de l’espace à l’élément dans le flux.
Je ne peux pas rendre le code dans les commentaires, à défaut je te propose de coller ce code dans une page de test chez toi.
<p> Paragraphe avec un display:none ici : <span style="display:none">On est en display:none</span>. Ici après le display:none. </p> <p> Paragraphe avec un visibility:hidden ici : <span style="visibility:hidden">On est en visibility:hidden</span>. Ici après le visibility:hidden. </p>
Dans le premier cas, l’espace nécessaire au span a disparu. Dans le deuxième non.
Pour les contextes je t’avoue que ça fait dix ans que je ne me pose plus la question depuis des années, attendons d’autres réponses. 😅
-
M’ci m’sieur !
-
Exemple avec du code dedans : https://codepen.io/franck-paul/pen/JjzjyaL \o/
-
Franck : Oui voilà, c’est ça que je n’ai pas pu ajouter dans un commentaire. 😁
