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.
