Comment intégrer des polices d’icônes accessibles ?

Ce que j’ai fait :

• lire l’article N’enterrons pas trop vite les polices d’icônes(lien externe) d’Access 42
• lire la notice Gérer l’alternative des polices d’icônes(lien externe) d’AcceDe Web
• lire l’article Créer une police d’icônes facilement à partir d’illustrations vectorielles(lien externe) de Stéphanie Walter sur Alsacreations

Ce que j’ai appris

Rappel

Les polices d’icônes sont des polices d’écriture sauf qu’en lieu et place des caractères, elles utilisent des glyphes représentant des icônes. Chaque glyphe possède un caractère Unicode correspondant permettant d’afficher l’icône. L’une des polices d’icônes les plus populaires et les plus utilisées est Font Awesome(lien externe). Voici un exemple de code pour afficher une icône grâce à une police :

<!-- En HTML -->
<span class="mon-icon"></span>

<!-- En CSS -->
.mon-icon::before {
  content: "\F052";
}

Polices d’icônes et accessibilité

Les polices d’icônes posent plusieurs problèmes d’accessibilité :

• les lecteurs d’écran verbalisent le caractère Unicode et le restituent à l’utilisateur, ce qui n’est pas idéal et peut même aboutir à une restitution totalement incompréhensible

• dans le cas où un utilisateur ou une utilisatrice souhaite modifier les polices du site et charger une police personnalisée (pour des personnes dyslexiques par exemple), les polices préalablement définies sur le site vont être écrasées et les icônes deviendront illisibles

Quelle que soit la nature de l’icône - décorative ou porteuse de sens - il faut systématiquement lui ajouter un attribut aria-hidden="true" afin d’être ignorée par les lecteurs d’écran.

De nombreuses polices d’icônes utilisent par ailleurs la balise <i> pour intégrer les icônes, cependant une balise <span> semble plus appropriée car elle ne porte aucune valeur sémantique (contrairement à la balise <i> qui représente un morceau de texte qui se différencie du texte principal. Cela peut par exemple être le cas pour des termes techniques, des phrases dans une langue étrangère ou encore l’expression des pensées d’un personnage. - La balise <i> sur Mozilla(lien externe)).

Icône décorative

Si l’icône est purement décorative, il n’y a rien à faire de plus que d’ajouter un attribut aria-hidden="true".

Voici un exemple d’intégration d’icône décorative :

<span class="icon icon-star" aria-hidden="true"></span>

Icône informative

En revanche, si l’icône est porteuse de sens, il est nécessaire d’ajouter quelques éléments :

• une balise <span> contenant une alternative textuelle permettant d’expliciter l’icône

• des styles permettant de masquer visuellement cette alternative textuelle tout en la laissant accessible aux lecteurs d’écran

Voici un exemple d’intégration d’icône porteuse de sens :

<!-- En HTML -->
<span class="icon icon-star" aria-hidden="true"></span>
<span class="sr-only">Mes favoris</span>

<!-- En CSS -->
.sr-only {
  position: absolute;
  left: -99999rem;
}

Dans le cas d’une icône seule servant de lien ou bouton, la balise <span> doit contenir des informations sur la destination ou la fonction du lien. Par exemple :

<!-- En HTML -->
<a href="/">
   <span class="icon icon-house" aria-hidden="true"></span>
   <span class="sr-only">Accueil</span>
</a>

<!-- En CSS -->
.sr-only {
  position: absolute;
  left: -99999rem;
}

Police d’icônes et Private Use Areas

Certaines polices d’icônes utilisent des codes appartenant aux Private Use Areas de Unicode. Il s’agit de blocs de caractères Unicode réservés à l’usage privé, c’est-à-dire non standardisés : cela signifie qu’ils ne sont pas réservés et qu’aucun nom de caractère n’est spécifié.

Dans ce cas précis normalement les lecteurs d’écran ne restituent pas le caractère associé à l’icône et par conséquent l’attribut aria-hidden="true" n’est pas nécessaire. L’outil en ligne IcoMoon(lien externe), qui permet de créer une police personnalisée à partir d’illustrations vectorielles, propose ainsi des options pour générer une police basée sur des caractères Unicode relevant des Private Use Areas.

A tester sur les différents lecteurs d’écran afin de s’assurer que c’est bien le cas, dans le doute mieux vaut recourir dans tous les cas à aria-hidden="true".