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) ou un lien vide (Internet Explorer). Dans les deux cas 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'.

Exemple 1 lu par NVDA dans IE (MP3) : 'lien fr lien fr lien fr lien fr'. Le lien est considéré comme vide, NVDA lit une partie de l'URL du lien.

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 (sauf dans IE).

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'

Dans IE les liens sont lus correctement car les lettres insérées avec :before ne sont pas lues.

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'

4. Accessible - en utilisant le Private Use Area

Si on utilise des codes appartenant au Private Use Area de Unicode, les lecteurs d'écran ne lisent pas le caractère inséré. Dans l'exemple ci-dessous, nous avont généré une autre police d'icônes avec icomoon, en utilisant la configuration par défaut qui fait usage du Private Use Area. Il faut toujours prévoir un texte de remplacement mais l'utilisation de aria-hidden n'est pas nécessaire. Les lecteurs d'écran lisent la même chose que dans l'exemple précédent.

lecture pause arrêt plein écran

HTML

<a href="#">
	<span class="icon-play"></span>
	<span class="visuallyhidden">lecture</span>
</a>
<a href="#">
	<span class="icon-pause"></span>
	<span class="visuallyhidden">pause</span>
</a>
<a href="#">
	<span class="icon-stop"></span>
	<span class="visuallyhidden">arrêt</span>
</a>
<a href="#">
	<span class="icon-resize-enlarge"></span>
	<span class="visuallyhidden">plein écran</span>
</a>

CSS

.icon-play:before {
	content: "\e600";
}
.icon-pause:before {
	content: "\e601";
}
.icon-stop:before {
	content: "\e602";
}
.icon-resize-enlarge:before {
	content: "\e603";
}

Lecture par un lecteur d'écran

Le résultat est le même que dans l'exemple précédent: 'lien lecture lien pause lien arrêt lien plein écran'