Comment rendre des infographies accessibles ?
Les infographies sont partout, du bloc au site plus sérieux, et nous sommes peu nombreux à rendre cette image descriptive accessible. Pour rendre une infographie ou toute autre image complexe accessibles, une simple alternative textuelle ne suffit pas. Les infographies sont là généralement pour regrouper tout un tas d’informations de manière ludique visuelle et concise. En terme d’accessibilité il est donc recommandé d’afficher à la suite du document un texte descriptif qui reprend toutes les informations présente dans l’image. Une façon discrète de la faire est d’utiliser un élément « accordéon ». Au clic sur le lien ou le bouton, le texte de description se déroule et se referme, ne perturbant pas la structure générale de la page.
Un accordéon non accessible, en css uniquement.
Voici un exemple d’accordéon non accessible. utilisant une checkbox pour plier/déplier le contenu.
See the Pen
Accordion only css (checkbox) by yuyazz (@yuyazz)
on CodePen.
C’est un simple « bouton » à placer sous l’infographie, qui reprendrait donc les informations présentes sur l’image. Au clic, le texte descriptif s’ouvre. On évite donc le display:none ou visiblity:hidden qui ne sont pas recommandés d’un point de vue SEO. Tous les tests menés par certains développeurs tendent à prouver que Google lit bien les éléments cachés via ces attributs, au moment du chargement de la page. Par contre, selon ces tests, et google le confirme, les éléments cachés en « display:none » ou via le jabascript sont largement moins bien considérés que les autres éléments présents sur la page.
La technique consiste donc à utiliser la notion de max-height. On joue sur la hauteur pour cacher ou dévoiler le texte.
La balise html « details »
On peut aussi utiliser la balise native <details><details> qui produit le même effet sans une ligne de code css ou js ! Malheureusement IE et Edge à l’heure actuelle ne comprennent pas cette balise !
Un accordéon accessible avec les attributs aria-hidden
Voici le même accordéon, rendu accessible via javascript. La partie html et css sont classiques, On injecte les attributs aria-hidden:true ou false en javascript au clic sur le bouton.
Au lieu de jouer sur la notion de « checked » sur l’input checkbox, on injecte ici les classes « expanded’ ou ‘open » qui vont jouer exactement le même rôle au niveau du css.
Au niveau des balises aria, le bouton reçoit l’attribut aria-expanded= »false » ou aria-expanded= »true » en fonction du clic.
Le bloc de texte reçoit quand à lui l’attribut aria-hidden= »false » ou aria-hidden= »true » en fonction du clic.
See the Pen
Accessible accordion with javascript by yuyazz (@yuyazz)
on CodePen.
Autres Ressources
Vous trouverez d’autres exemples valides sur les pages suivantes: