lundi 28 juillet 2008
Se faciliter la vie (et la vue) avec les styles utilisateurs
Posté par olivier_webyboom le lundi 28 juillet 2008 - Accessibilité
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!
mardi 4 septembre 2007
Accessibilité: détecter facilement les éléments avec un attribut lang
Posté par olivier_webyboom le mardi 4 septembre 2007 - Accessibilité
Une recommandation d’accessibilité prioritaire est de fournir à l’internaute l’information concernant la langue d’un mot ou groupe de mots d’origine étrangère.
Le point de contrôle 4.1 des WCAG : Identifiez clairement les changements dans la langue naturelle du texte d’un document et de tous les équivalents textuels (par exemple : les légendes)
Le critère 8.7 du label Accessiweb : Les changements de langue dans une page sont-ils signalés ?
En effet, ceci donne à un outil de lecture d’écran la possibilité de sélectionner le registre vocal adéquat pour prononcer un mot donné. Ainsi, le mot "newsletter" sera prononcé "niouz-lèh-teur", et non "nevzlèté", s’il est correctement balisé.
Une façon classique de coder cette fonction, est d’ajouter une balise <span>, et de lui spécifier l’attribut "lang". Exemple :
Abonnez-vous à notre <span lang="en">newsletter</span>.
Lorsqu’on évalue l’accessibilité d’une page, il est donc nécessaire de vérifier la bonne application de cette recommandation.
Cela peut être assez fastidieux avec la méthode traditionnelle : détecter les mots d’origine étrangère, examiner le code source, vérifier leur attribut lang.
L’astuce suivante permet de mettre en valeur, par une couleur de fond distincte, les mots dont l’attribut langue est "en", "de", ou "es", ou un des attributs de langue associés (par exemple, "en-us" pour l’anglais américain). Ainsi on peut les repérer facilement, et par conséquent détecter plus immédiatement ceux qui ne sont pas correctement taggés.
Deux options : soit par une feuille de style, soit par un bookmarklet (c’est-à-dire une instruction javascript exécutée dans la page via un favori, ou bookmark).
Dans les deux cas, il faut Firefox (mes essais sur IE7 ont été infructueux jusque là -- mais je suis preneur de tout conseil à ce propos). Pour l’astuce CSS, si vous ne l'avez pas déjà, vous pouvez utiliser l’excellente barre d’outils Web Developer, ou alors l'extension Stylish. Pour le bookmarklet, il faut avoir javascript activé.
En version feuille de style, cette astuce repose sur la capacité de CSS2 à sélectionner un élément en fonction de son attribut. Par exemple :
*[lang|="en"] {background :cyan ;}
va changer en bleu ciel (cyan) la couleur de fond (background) de tous les éléments (*) de la page dont l’attribut lang vaut "en" ou une déclinaison de la forme "en-..." (|=).
Il suffit de répéter cette ligne et de l’adapter à différentes langues, comme dans la feuille de style lang.css attachée à cet article. Sauvegardez-là sur votre disque local, et grâce à la barre d’outils Web Developer, utilisez-là comme feuille de style utilisateur : CSS > Add User Style Sheet... Si des mots taggés "anglais" sont définis dans la page, vous les verrez surlignés en bleu clair.
La version bookmarklet est plus pratique, mais sa personnalisation est un peu plus complexe, car il faut connaître un minimum de javascript.
Pour l’utiliser, créez un nouveau Favori dans la barre des liens (la "barre personnelle", qui bien sûr doit être définie comme visible dans votre Firefox). Dans le champ "Adresse Web", collez tel quel le code contenu dans le fichier ci-dessous.
code js pour détection des langues
Donnez à votre favori le nom qu’il vous plaira, et validez.
Vous disposez maintenant d’un bouton qui provoque le surlignement des mots anglais, allemands et espagnols correctement taggés.
La liste de langues et les couleurs ne sont pas figées, simplement il vous faudra mettre la main à la pâte !
Bon surlignage !
