Accessibilité des icônes font
Pour un lecteur d’écran, soit l’image est lue comme le caractère unicode auquel elle correspond soit elle est ignorée. En tout cas, le même raisonnement que pour les images s’applique : il faut un texte alternatif s’il ne s’agit pas d’une simple décoration et d’autant plus si elle sert de support à un bouton ou un lien qui entraîne une action.
Exemple (issue de la charte graphique de Frama) :
<a href="https://framasoft.org" class="btn btn-xs btn-default" title="se rendre sur le site de Framasoft"><i class="fa fa-fighter-jet" aria-hidden="true"></i><span class="sr-only">Framasoft</span></a>
est équivalent à :
<a href="https://framasoft.org" class="btn btn-xs btn-default" title="se rendre sur le site de Framasoft"><img src="img/fighter-jet.png" alt="Framasoft" /></a>
Remarque en passant, tu peux économiser 6 caractères par icône dans le code html en remplaçant <span>
par <i>
. La balise sert usuellement pour les changements de langue mais ça fait sens aussi de s’en servir pour les icônes (c’est en quelque sorte un langage symbolique ;) ).
Pour plus d’exemples et explications http://fontawesome.io/accessibility/