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

• Icônes décoratives/illustratives.
• Icônes informatives.
• Icônes liens ou boutons seules.

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

Haut de page