Comment utiliser de manière accessible les fonts-icons en CSS ?
Par Qwerty le Temps de lecture estimé : 5min 2 Commentaires
Mais qu’est-ce les fonts-icons ? C’est des polices de caractères, comme on utilise couramment sur le traitement de texte. Mais au lieu d’avoir des lettres et des chiffres, on a des symboles. Par exemple, le symbole du flux RSS ou les logos des réseaux sociaux. C’est très pratique. En effet, on peut, très simplement, revoir la couleur, la taille, l’ombre de l’icône sans pour autant refaire une image. Le site Fontello.com regroupe de nombreuses polices.
Mais cela rend le site inaccessible à une partie de la population. En effet, certains, malvoyants, utilisent des lecteurs d’écrans. Et la machine ne pourra pas d’écrire ce qu’il voit, alors que nous, voyant savons de quoi il en est. Par exemple, comment savoir que cette icône représente le symbole de déconnexion ? C’est très gênant. C’est pour cela, pour leur faciliter la vie qu’a été écrit des règles d’accessibilités. Citons par exemple le fameux WCAG 2,0. Des outils existent pour savoir si votre site est accessible, comme Wave. Cette accessibilité est tellement importante que le gouvernement européen a décidé de le rendre obligatoire sur tout les sites de services publics (et il y a du travail, je vous dis. Rien que sur le site de ma commune, il y a 52 erreurs et 37 alertes).
Revenons à nous moutons.
On va user d’une stratégie toute simple. On va mettre un texte que l’on va cacher. C’est aussi bête que ça ! C’est très pratique par exemple dans les cas des liens, pour pas qu’ils ne soient vide !
Par exemple, vous avez le code suivant, affichant une icône RSS :
On va rajouter un texte décrivant l’icône, dans un span que l’on va cacher :
et puis, à l’aide du CSS, on va cacher ce texte :
hidden {clip: rect(0 0 0 0);overflow: hidden;position: absolute;height: 1px;width: 1px;}
Cette astuce est toute simple.
Néanmoins, elle sauve les bébés phoques ! Alors, utilisez là pour faire un web meilleure !
@TD
