6.3. Gérer l’alternative des icônes insérées via les CSS

Remarque

Que l’icône soit décorative, informative ou qu’il s’agisse d’un lien/bouton, la balise servant à l’afficher doit, dans tous les cas, intégrer aria-hidden="true" afin de s’assurer que les lecteurs d’écran ne restituent aucun contenu lorsqu’elle est parcourue.

Aussi, idéalement, la balise servant à afficher l’icône doit être un <span> car sans valeur sémantique.

Icônes décoratives/illustratives

Lorsqu’une icône décorative ou illustrative est intégrée dans le code HTML, rien n’est à prévoir.

Dans l’exemple de code HTML ci-après, l’icône accompagne simplement le titre « Messages d’erreur » (explicite par nature) :

<h2>
   <span class="icone erreur" aria-hidden="true"></span>
   Messages d'erreur
</h2>

Icônes informatives

Lorsqu’une icône informative est intégrée dans le code HTML :

  1. Ajouter une balise (<span>, par exemple) juste après la balise servant à afficher l’icône.
  2. Intégrer les informations permettant de rendre explicite l’icône dans cette nouvelle balise.
  3. Masquer le contenu de cette balise en CSS en le sortant de l’écran (hors viewport) à l’aide de la propriété CSS « position: absolute; ».

Dans l’exemple de code HTML ci-après, l’icône indique qu’il s’agit d’une étape de marche :

<p>
  <span class="icone marche" aria-hidden="true"></span>
  <span class="hors-ecran">Marche : </span>
  <span>2 min</span>
  <span>111 m</span>
</p>
.hors-ecran {
   position: absolute;
   left: -99999rem;
}

Icônes liens ou boutons seules

Lorsqu’une icône seule (sans intitulé) servant de lien ou de bouton est intégrée dans le code HTML :

  1. Ajouter une balise <span> dans la balise <a> ou <button>.
  2. Intégrer les informations permettant de rendre explicite le lien ou le bouton dans ce <span>.
  3. Masquer le contenu de cette balise en CSS en le sortant de l’écran (hors viewport) à l’aide de la propriétés CSS « position: absolute; ».

Dans l’exemple de code HTML ci-après, l’icône-lien pointe vers la page d’accueil d’un site :

<a href="/">
   <span class="icone accueil" aria-hidden="true"></span>
   <span class="hors-ecran">Accueil</span>
</a>
.hors-ecran {
   position: absolute;
   left: -99999rem;
}

2 commentaires

  • Par Bizingre, le 15 septembre 2015 à 12h44.

    Ce commentaire a été publié sur une ancienne version des notices AcceDe Web. Il se peut que son contenu ne soit plus d'actualité.

    Bonjour,

    Si on choisit une police d’icônes qui utilise des codes appartenant au Private Use Area de Unicode, normalement les lecteurs d’écran ne restituent pas le caractère associé à l’icône.

    C’est le cas de Font Awesome et pour icomoon, on peut générer une police compatible.

    Et du coup, l’ajout de l’attribut aria-hidden="true" serait inutile.

    Est-ce le comportement de tous les lecteurs ? NVDA se comporte ainsi.

    Si ces polices conviennent au projet, peut-on se passer de l’attribut aria-hidden, car parfois le code html peut ne pas être modifiable ?

    SI ces polices ne conviennent pas, en effet, forcer l’ajout de l’attribut aria-hidden.

    Merci !

    Répondre

    • Par Johan Ramon, le 25 septembre 2015 à 11h26.

      Ce commentaire a été publié sur une ancienne version des notices AcceDe Web. Il se peut que son contenu ne soit plus d'actualité.

      Bonjour Claire,

      Merci pour ton commentaire et cette information.

      Nous ne savons pas si tous les lecteurs d’écran se comportent de la même façon. Nous essaierons de trouver le temps pour lancer une batterie de tests pour vérifier cela.

      Quoi qu’il en soit, par sécurité, nous recommandons de systématiquement ajouter aria-hidden="true" dans la balise servant à afficher l’icône.

      Toutefois, s’il n’est vraiment pas envisageable d’ajouter aria-hidden="true", ce ne sera pas très bloquant pour les utilisateurs. (Recommandation de l’ordre du confort.)

      Johan

      Répondre

Ajouter un commentaire

Tous les champs sont obligatoires.

Mises à jour

20/08/2024
Modification du nom de la fiche.

Haut de page