6.1. Gérer l’alternative des polices d’icônes (Icon Fonts)

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 à l’utilisateur 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 rendant invisible ou en le sortant de l’écran (hors Viewport) respectivement à l’aide des propriétés CSS « opacity: 0; » ou « position: absolute; ».

Dans l’exemple de code HTML ci-après, l’icône indique que le lien « Conditions Générales de Vente » s’ouvre dans une nouvelle fenêtre :

<a …>
   Conditions Générales de Vente
   <span class="icone nouvelle-fenetre" title="(nouvelle fenêtre)" aria-hidden="true"></span>
   <span class="hors-ecran">(nouvelle fenêtre)</span>
</a>
.hors-ecran {
   position: absolute;
   left: -99999px;
}

Astuce

Une bonne pratique consiste à intégrer un attribut title reprenant la valeur du texte de remplacement dans la balise servant à afficher l’icône.

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 ce <span> en CSS en le rendant invisible ou en le sortant de l’écran (hors Viewport) respectivement à l’aide des propriétés CSS « opacity: 0; » ou « 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" title="Accueil" aria-hidden="true"></span>
   <span class="hors-ecran">Accueil</span>
</a>
.hors-ecran {
   position: absolute;
   left: -99999px;
}

Astuce

Une bonne pratique consiste à intégrer un attribut title reprenant la valeur du texte de remplacement dans la balise servant à afficher l’icône.

Aller plus loin

3 commentaires

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

    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.

      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

  • Par Sébastien Delorme, le 16 mars 2016 à 11h32.

    Mise à jour du titre de la fiche effectuée le 16/03/2016.

    Répondre

Ajouter un commentaire

Les champs avec astérisque (*) sont obligatoires.

Haut de page