Avec la mode des smartphones, l’accessibilité est devenue un sujet de premier plan. Pendant des années, ce concept était ignoré. Ce n’était pas très sympa pour les malvoyants. Mais pour la plupart d’entre nous, nous n’étions même pas conscients du problème.
Lorsqu’on se penche un peu sur le sujet, on se rend compte qu’il y a du boulot et que la majorité des thèmes de blog ne sont pas forcement au top avec les bonnes pratiques d’un web accessible.
L’élément clef d’un blog accessible consiste à n’utiliser aucune taille fixe. Si vous connaissez un peu le CSS, cela signifie qu’il faut bannir le px pour les polices. On peut encore utiliser le px pour la mise en page, à condition d’avoir des variantes en % pour les mobiles.
Le problème, c’est que l’utilisation d’une unité en pixels est naturelle lorsqu’on conçoit une mise en forme destinée à être affichée sur un écran. Malheureusement, vu la diversité des terminaux permettant d’accéder au web, cela ne veut plus rien dire.
Il existe cependant une solution simple qui permet de créer des sites accessibles en ne changeant pratiquement rien à nos habitudes.
Sur un navigateur d’ordinateur, la police « racine » fait 16px par défaut. Cette valeur peut être changée en CSS avec la propriété « font-size » dans le bloc html. L’astuce est la suivante:
html{font-size:62.5%;}
Ce choix peut sembler étrange. Pourquoi 62.5% ? Parce que 62.5% de 16 vaut 10. Cette déclaration définit donc la taille de base des polices à 10px sur tous les navigateurs destinés à être affichés sur un écran d’ordinateur.
La magie du truc est qu’il suffit ensuite de diviser la valeur en px que l’on souhaite pour une police par 10 et ainsi on obtient la valeur en rem qui est une unité proportionnelle. Le rem désigne en effet la taille d’une police en proportion de la police racine.
Par exemple, si je veux du 12px, je remplace par 1.2rem. Si je veux du 24px, par 2.4rem …
Si vous avez essayé Calumma, le thème WordPress paramétrable que j’ai créé, vous avez probablement remarqué que la configuration par défaut suivait ce système. Vous savez maintenant pourquoi.
Il reste cependant un problème même s’il touche probablement moins de 1% des internautes. Comme d’habitude lorsqu’on parle de CSS, il s’agit des vieilles versions d’Internet Explorer. Le rem est supporté par IE depuis la version 9, à condition de ne pas l’utiliser dans une déclaration shorthand du type :
font:italic small-caps normal 2.4rem Arial;
La solution ultime est de déclarer, par exemple :
font-size:24px;font-size:2.4rem;
Ainsi les vieux IE comprennent qu’il faut afficher, dans cet exemple, 24px, et la déclaration en rem écrase la précédente sur tous les navigateurs modernes.