vous êtes ici

Pour être accessible chaque image doit avoir une alternative textuelle appropriée. Puisqu'il y a de nombreuses manières d'insérer des éléments graphiques dans une page web, il y a aussi différentes techniques pour donner des alternatives textuelles.

L'image dans l'accessibility tree

L'objectif de toutes ces techniques est le même : donner un nom accessible à l'image. Le nom accessible est transmis par les navigateurs aux technologies d'assistance par le biais de l'accessibility tree. Par exemple :

  • C'est le nom accessible qui est lu par un lecteur d'écran quand il recontre une image.
  • Une personne qui utilise un logiciel de reconnaissance vocale peut utiliser le nom accessible d'une élément pour cliquer dessus.

Il est possible de visualiser le contenu de l'accessibility tree en utilisant les outils dévelopeurs dans le navigateur. Par exemple quand on inspecte un logo AnySurfer dans Chrome, et que l'on sélectionne l'onglet 'Accessibility' on peut voir, sous ' computed properties', Name : "AnySurfer - Accueil" , et role : img.

capture

Attribut alt

L'attribut alt s'utilise sur les balises <img>, <input type="image"> et <area>.

Si l'image est porteuse d'information ou cliquable, l'attribut alt doit être présent et ne peut pas être vide. Par exemple :

  • pour un logo qui est un lien vers le site de AnySurfer:

    <a href="https://www.anysurfer.be">
      <img src="logo.png" alt="AnySurfer" />
    </a>
  • Pour un bouton de recherche représenté par une loupe:

    <input type="image" alt="chercher">
  • Pour une province cliquable sur une carte de belgique

    <area shape="" coords="" href="http://www.province.luxembourg.be/" alt="Luxembourg">

Une image décorative doit avoir un attribut alt vide, par exemple:

<img src="fleur.png" alt="">

Différence entre attribut alt vide et attribut alt absent:

  • Un attribut alt vide fait en sorte que l'image ne soit pas présente dans l'accessibility tree. De cette manière elle est invisible pour les technologies d'assistance. Dans l'exemple-ci-dessous on voit que le logo a un attribut alt vide, et que dans l'accesibility tree il est indiqué 'Accessibility node not exposed'

    capture d'écran de l'accessibility tree pour logo avec attribut alt vide

  • Quand l'attribut alt est absent, l'image sera quand même présente dans l'accessibility tree avec un role img, mais sans nom. Les technologies d'assistance essaieront alors d'en deviner le nom et utiliserons souvent le nom du fichier.

    capture d'écran de l'accessibility tree pour logo sans attribut alt

Texte caché

Si l'image n'est pas insérée sous forme de balise HTML, mais par le biais de css (background, :before, : after,...) ou comme élément svg inline, on ne peut pas utiliser d'attribut alt. Le texte caché peut alors être une solution.

Le principe est d'ajouter dans le code HTML un texte de remplacement qui n'est pas affiché à l'écran mais qui est visible pour les technologies d'assistance. La technique préférée pour arriver à ce résultat est l'utilisation de clip.

Par exemple, si le bouton de recherche est affiché par l'intermédiaire d'une police d'icônes

<button class="search">
	<span class="sr-only">Chercher</span>
</button>
.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0,0,0,0);
    border: 0;
}

aria-label et aria-labelledby

L'attribut aria-label permet de modifier le nom accessible d'un élément. Contrairement à l'attribut alt, ils peuvent s'utiliser sur la plupart des éléments html, à condition qu'ils aient un rôle. Il peut donc par exemple être utilisé pour donner un nom à un bouton graphique.

Si on reprend l'exemple plus haut, on pourrait utiliser un attribut aria-label à la place d'un texte caché :

<button class="search" aria-label="chercher">
</button>

Attention, l'utilisation d'aria-label est plus dangereuse que celle d'un texte caché. Le texte caché vient s'ajouter au contenu existant, mais aria-label remplace le nom d'un élément. Si je cumule un aria-label sur le button et un texte caché dedans, c'est l'aria-label qui gagne.

L'attribut aria-labelledby a le même effet que aria-label. Mais au lieu de prendre comme valeur un texte, il prend comme valeur un identifiant. On peut l'utiliser par exemple pour spécifier une alternative textuelle pour une image svg:

<svg role="img" aria-labelledby="alt_text">
	<title id="alt_text">chercher</title>
</svg>

Commentaires

Soyez le premier à commenter