Polices d'icônes (icon fonts) - exemples

Les exemples ci-dessous illustrent ce à quoi il faut faire attention pour utiliser des polices d'icônes de manière accessible.

1. Pas accessible

Les icônes ci-dessous ont été insérées par CSS. Des lettres de l'alphabet sont introduites dans le contenu par CSS (:before). La police d'icônes générée par Icomoon couple une icône à chaque lettre. Un lecteur d'écran ne voit que la lettre insérée (Chrome, Safari, Firefox). Cela n'a pas le même sens que l'icône affichée.

HTML

<a href="#" data-icon="p" class="icon"></a> 
<a href="#" data-icon="q" class="icon"></a> 
<a href="#" data-icon="r" class="icon"></a> 
<a href="#" data-icon="s" class="icon"></a>

CSS

.icon:before { 
	font-family: 'icomoon'; 
	content: attr(data-icon); 
}

Lecture par un lecteur d'écran

Exemple 1 lu par NVDA dans Firefox (MP3) : 'lien p lien q lien r lien s'.

2. Mieux mais encore imparfait

Pour que les icônes puissent avoir du sens lorsqu'elles sont lues avec un lecteur d'écran, on peut ajouter un texte de remplacement. (lecture, pause, arrêt, plein écran). Les textes sont cachés parce qu'il ne sont pas nécessaires visuellement. Le résultat est meilleur mais chaque textes est précédé d'une lettre inutile (p, q, r, s ) qui est lue.

lecture pause arrêt plein écran

HTML

<a href="#" data-icon="p" class="icon"><span class="visuallyhidden">play</span></a> 
<a href="#" data-icon="s" class="icon"><span class="visuallyhidden">pause</span></a> 
<a href="#" data-icon="q" class="icon"><span class="visuallyhidden">arrêt</span></a> 
<a href="#" data-icon="f" class="icon"><span class="visuallyhidden">plein écran</span></a>

CSS


.icon:before { 
	font-family: 'icomoon'; 
	content: attr(data-icon); 
} 
.visuallyhidden { 
	border: 0; 
	clip: rect(0 0 0 0); 
	height: 1px; 
	margin: -1px; 
	overflow: hidden; 
	padding: 0; 
	position: absolute; 
	width: 1px; 
}

Lecture par un lecteur d'écran

Exemple 2 lu par NVDA dans Firefox (MP3) : 'lien plecture lien qpause lien rarrêt lien splein écran'

3. Accessible - avec aria-hidden

Pour faire en sorte que les lettres correspondant aux icônes ne soient pas lues par un lecteur d'écran, on peut utiliser aria hidden="true". De cette manière seul le contenu caché visuellement est lu. Aria-hidden="true" peut également être injecté avec jQuery comme expliqué par Eric Eggert dans l'article de blog en anglais A better way to use icon fonts.

lecture pause arrêt plein écran

HTML

<a href="#"> 
	<span data-icon="p" class="icon" aria-hidden="true"> </span> 
	<span class="visuallyhidden">lecture</span> 
</a> 
<a href="#"> 
	<span data-icon="s" class="icon" aria-hidden="true"> 
	</span> <span class="visuallyhidden">pause</span> 
</a> 
<a href="#"> 
	<span data-icon="q" class="icon" aria-hidden="true"> 
	</span> <span class="visuallyhidden">arrêt</span> 
</a> 
<a href="#"> 
	<span data-icon="f" class="icon" aria-hidden="true"> </span> 
	<span class="visuallyhidden">plein écran</span> 
</a>

CSS

Le CSS est le même que dans l'exemple précédent. Seul le code HTML a changé.

Lecture par un lecteur d'écran

Exemple 3 lu par NVDA dans Firefox (MP3) : 'lien lecture lien pause lien arrêt lien plein écran'

Contact