Accessibilité: détecter facilement les éléments avec un attribut lang

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 !