AccessiBlogue

Récemment, une personne soucieuse d’accessibilité demandait s’il valait mieux définir la taille de ses polices en pourcentage ou en largeur d’em¹. Cette question revient à se demander, par exemple, s’il est préférable d’écrire 92% ou 0.92em dans sa feuille de style.

Théoriquement, ces deux expressions sont parfaitement équivalentes, puisque les tailles en pourcentage sont calculées sur la largeur d’em de la police. En clair, cela veut dire que 76% de 1em, a exactement pour résultat 0.76em, que 120% de 1em donne 1.2em, etc.

Du point de vue de l’accessibilité cependant, il y a un hic. J’aimerais pouvoir vous dire que pourcentage ou largeur d’em c’est blanc bonnet ou bonnet blanc, mais ce n’est malheureusement pas le cas.

Un ami me disait avoir eu connaissance d’un utilisateur qui se plaignait des tailles de police trop petites dans Internet Explorer. À son insu, la taille d’affichage de ces dernières était réglée à « Plus petite ». Avec pour conséquence que le texte devenait trop petit pour être lu. Même avec de bons yeux.

Peut-être ne vous en êtes-vous jamais aperçu, mais les versions d’Internet Explorer inférieures à la version 8 redimensionnent différemment la taille du texte selon qu’on a utilisé des pourcentages ou des largeurs d’em dans la feuille de style. Du moins, lorsqu’on change cette taille en passant par le menu Affichage.

L’illustration qui suit montre les résultats auxquels on arrive lorsque les tailles de police sont définies en pourcentage ou en largeur d’em dans la feuille de style. Internet Explorer permet de choisir entre 5 tailles de texte différentes. Pour faciliter les comparaisons, je m’en suis tenu à la plus grande, à la plus petite et à celle à laquelle il est réglé par défaut, c’est-à-dire « Moyenne ».

Lorsque le navigateur est réglé à la position « Moyenne », il n’y a aucune différence entre le fait d’avoir utilisé des pourcentage ou des largeurs d’em dans la feuille de style. Le texte s’affichera exactement de la même manière dans un cas comme dans l’autre. Ce qui est d’ailleurs parfaitement logique.

Mais il en va tout autrement des autres réglages. Lorsque le navigateur est à la position « Plus grande », le texte défini en largeur d’em s’affiche dans une taille nettement plus grande que celui défini en pourcentage. Et lorsqu’il est réglé à « Plus petite », c’est l’inverse qui se produit : le texte défini en largeur d’em s’affiche dans une taille beaucoup plus petite que celui défini en pourcentage. Au point de devenir totalement illisible.

Bref, lorsqu’on fait varier la taille du texte depuis le menu Affichage, Internet Explorer se comporte correctement lorsque les tailles de police sont définies en pourcentage, mais exagère leur agrandissement ou leur diminution lorsqu’elles sont définies avec des valeurs exprimées en largeur d’em. Et il est le seul navigateur à se comporter de la sorte.

Vous l’aurez compris : il est impossible de savoir d’avance à quelle position le navigateur de vos visiteurs sera réglé. Et cela peut faire toute la différence entre un texte lisible ou illisible, et un design qui se tient encore, même une fois le texte agrandi, et un design tout cassé. D’où l’impact sur l’accessibilité.

Comment faire pour éviter ce genre de désagrément ? Est-ce à dire qu’il faut systématiquement utiliser les pourcentages et renoncer à définir ses tailles de polices en largeur d’em ? Vous faut-il vraiment passer en revue toutes vos feuilles de style et remplacer une à une les valeurs exprimées en largeur d’em par leurs équivalents en pourcentage ?

Je vous rassure tout de suite, il y a une solution. Facile. Simple. Parfaitement sûre et parfaitement propre par-dessus le marché. Et elle fonctionnera partout. La voici. Éditez votre feuille de style CSS, tapez html {font-size: 100.01%}, enregistrez la modification et allez prendre un bon café car c’est fini.

Ce tout petit bout de code aura pour effet d’avaliser la différence d’arrondi dans le calcul que le navigateur doit faire pour ajuster la taille du texte à la grandeur voulue. Différence d’arrondi qui explique le comportement intempestif d’Internet Explorer. En prime, les caractères des anciennes versions de Safari et d’Opera, légèrement trop petites, s’agrandiront juste ce qu’il faut pour devenir normales.

Au final, vous aurez dompté les soubresauts de la bête et amélioré le support de quelques navigateurs plus anciens. Et vous aurez réussi ce tour de force sans hack, sans javascript ou autre bidouille plus ou moins douteuse. Je vous l’avais promis. C’est-y pas beau, ça !