Se faciliter la vie (et la vue) avec les styles utilisateurs

Un peu de technique s’impose…

Pour surfer sur le web avec un ordinateur, nombre d’internautes utilisent un navigateur dit graphique, les plus populaires actuellement étant Internet Explorer et Firefox.

Lorsque l’on visite une page de site web avec un navigateur graphique, pour faire simple il effectue en gros deux choses :

• D’abord interpréter le code HTML, qui s’occupe du contenu : les textes, les liens, les images, le multimédia, et la façon dont ils sont organisés
• Ensuite interpréter les styles (dits CSS), pour mettre en forme et en couleurs le contenu, c’est-à-dire sa présentation

Les faits sont plus subtils, puisque pour des raisons historiques le HTML est encore trop souvent utilisé, via des « bidouilles », pour faire de la mise en forme. Une idée forte de l’accessibilité des sites internet est de respecter le principe dit de « séparation du contenu et de la présentation ». C’est-à-dire : faire en sorte que le HTML ne fasse que du contenu, et le CSS s’occupe de toute la mise en forme.

Je fais ce que je veux avec mon navigateur

Il existe un principe-clé en CSS : pour un même élément, les styles peuvent être déclarés plusieurs fois, à différents niveaux : dans une feuille de style, au cœur du HTML, ou par le navigateur. Ce sera toujours la dernière déclaration, dans l'ordre de "lecture" du code par le navigateur, qui sera prise en compte. Prenons l’exemple d’une feuille de style qui impose la couleur verte pour tous les textes. Si dans la page, du code HTML « stylé » définit que la couleur de texte doit être rouge, alors elle apparaîtra rouge.

Ce qui nous intéresse ici est la possibilité, pour l’internaute, d’indiquer à son navigateur quel style il souhaite appliquer, via ce qui est généralement désigné par « feuille de style utilisateur » (« user style sheet » en anglais). Si vous avez bien suivi : sur un site conçu avec des CSS, il est possible pour tout un chacun de définir « à volonté » la façon dont il s’affiche à l’écran…

O.K., mais ça sert à quoi d’utile ?

La nature a été très sympa avec moi, au moment de me donner des yeux : acuité visuelle, perception des couleurs, tout marche très bien… cependant des années d'usage immodéré d'écrans d'ordinateur m’ont appris deux choses : l’humilité, et la prudence.

Les moniteurs aux résolutions toujours plus élevées, et l’habitude trop répandue d’essayer de caser un maximum d’infos dans un minimum d’espace, font que de nombreux sites internet utilisent une police de caractères franchement trop petite. De plus, afin de limiter la fatigue, mon réglage de moniteur minimise la luminosité, du coup si des couleurs sont faiblement contrastées, la lisibilité est mise à mal, même avec une bonne vue.

Les concepteurs des sites qui ont fait ces choix ont des raisons qui leur appartiennent. Le gros progrès avec les feuilles de style utilisateur, c’est que l’internaute n’est plus prisonnier de ces choix, et peut appliquer les règles d’affichage qui lui conviennent.

Cet article va vous présenter des exemples d’utilisation de ces feuilles de style utilisateur, ainsi que la manière de les appliquer.

Firefox, mon ami

La plupart des grands navigateurs proposent cette fonctionnalité. Pour ma part je trouve très pratique la combinaison Firefox (en version 2 ou 3, c'est idem), et le module d’extension Stylish. Firefox est mon outil de base pour surfer et développer, et je trouve Stylish simple et pratique, surtout pour définir des styles pour un site en particulier. De plus, elle permet de piocher dans des centaines de styles utilisateurs prêts à l’emploi.

Libre à vous d’adapter les astuces qui suivent à d’autres navigateurs, bien sûr !

Mieux voir l’élément courant

Quand on navigue au clavier, via la touche Tab, avec la plupart des navigateurs l’élément courant (lien, champ de formulaire, cadre…) est entouré d’un fin liseré, en traits pointillés (souvent appelé le « focus »). Ce liseré est en général très discret… trop, en fait, car il est souvent difficile de le retrouver dans une page, au point qu’il faut le faire bouger pour finir par le repérer. Pas très commode…. Certains webdesigners avisés rendent le focus bien visible par CSS, comme le recommandent certains spécialistes. Mais c’est encore trop rare.

Heureusement un style utilisateur prêt à l’emploi permet de rendre le focus beaucoup plus voyant (un épais liseré bleu ciel), quel que soit le site visité. Il s’agit de Bright Focus. Cliquez sur « Load into Stylish », et si tout se passe bien, le style est activé ; naviguez avec la touche de tabulation pour voir le résultat (sinon, vérifiez qu’il est coché dans l’interface de Stylish, puis redémarrez Firefox).

Si vous n’utilisez pas Firefox, vous pourrez toujours voir le code en cliquant sur le bouton « Show code », et vous en inspirer.

Mon Wikipedia à moi

J'adore Wikipedia, à la fois pour les contenus, et le principe qui sous-tend cette encyclopédie en ligne. Mais deux choses me gênent sur ce site...

D'abord je trouve les textes bien trop petits, surtout pour les longs articles. C'est vrai qu'on peut agrandir le texte, mais devoir le faire à chaque fois qu'on ouvre une page, c'est pesant quand on explore un sujet, ce qui souvent conduit à ouvrir nombre d'onglets. C'est vrai aussi, Firefox 3 réduit la gêne en mémorisant le niveau de zoom pour un site, mais bon, même avec la version 2 on a le droit de vouloir mieux que ça. 

Ensuite, les liens en bleu sombre non soulignés m'énervent, car on ne les distingue pratiquement pas du reste du texte. D'autre part, les liens vers des articles "pas encore écrits" sont en rouge, ce qui est une hérésie du point de vue de l'accessibilité (la couleur ne doit pas être le seul moyen de fournir une information).

Qu'à cela ne tienne! Je me suis bricolé une feuille de style "spécial wikipedia", qui augmente la taille de tous les textes et souligne tous les liens, sur tous les sites du domaine wikipedia.org.
Le code CSS (simplissime) utilisé:
* {font-size:105%}
a {text-decoration:underline !important}
a.new {font-style:italic !important}

Le résultat est assez laid, mais peu m'importe, au moins je m'économise de la rétine!
Pour quelque chose de bien plus abouti, qui améliore la lisibilité, réorganise les éléments de la page, masque les éléments superflus de la page, et autres commodités, vous pouvez tester le style Wiki clean and professional.

Les WCAG plus lisibles

Une autre application, assez ironique d'ailleurs, des styles utilisateurs: rendre les WCAG 1.0 (le socle, la source originelle, la bible...) plus lisibles - plus... accessibles, donc-, et polir un peu ce diamant brut, voire brutal. C'est la bonne idée qu'à eue Derek Featherstone, exposée dans son article "Doing it with user style". D'autant plus salvateur si l'on s'y réfère régulièrement! Un bel exemple en tous cas de ce qu'on peut faire pour plier un site à sa volonté (avec un peu de boulot, tout de même...).

Voir la langue des mots

Sous ce titre aux parfums surréalistes, une astuce permettant de détecter visuellement les changements de langue dans une page web. C'est très utile lorsque l'on audite ou conçoit des sites ayant l'ambition d'être accessibles, ce qui implique notamment de spécifier la langue des mots provenant d'une autre langue que celle de la page courante. Sans cette astuce, le contrôle de langue nécessite d'inspecter le code source, à la recherche de mots "pas français", et de vérifier leur attribut lang. Fastidieux, et en général peu efficace. Avec ce style, les mots correctement taggés sautent aux yeux, pour ainsi dire, tandis qu'on repère plus facilement ceux qui ne le sont pas. Un gain de temps loin d'être négligeable sur un audit ou des tests!

A vous!

Le but de cet article est de montrer une application utile et créative d'une fonctionnalité méconnue des navigateurs, et de susciter de bonnes idées sur le même thème. N'hésitez donc pas à partager vos trouvailles via les commentaires sur ce billet!