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

• 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 visuellement tout en restant disponible au lecteur d’écran le contenu de cette balise à l’aide des CSS (voir un exemple de code ci-après).

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 {
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  height: 1px;
  overflow: hidden;
  position: absolute;
  white-space: nowrap;
  width: 1px;
}

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 visuellement tout en restant disponible au lecteur d’écran le contenu de cette balise à l’aide des CSS (voir un exemple de code ci-après).

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 {
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  height: 1px;
  overflow: hidden;
  position: absolute;
  white-space: nowrap;
  width: 1px;
}

2 commentaires

Mises à jour

Haut de page