L’attribut lang, pour rendre la page audible... et compréhensible

L’un des éléments d’accessibilité les plus simples à mettre en œuvre est aussi l’un des grands oubliés.

jeudi 5 octobre 2023

Au Luxembourg peut-être plus qu’ailleurs, il n’est pas rare qu’une même page HTML voit cohabiter des mots de différentes langues. Rien d’extraordinaire : ce qui s’entend sur le Knuedler se reflète sur le Web.

Photo d'une page de dictionnaire anglais-français ouverte sur le mot focus
Photo : Unsplash / Romain Vignes

Si cette cohabitation est parfaitement possible, il faut, pour assurer une restitution du texte la plus fidèle possible par un lecteur d’écran, veiller à deux choses :

Définir une langue principale pour la page

Dans le code, il convient de repérer la balise <html>, soit la toute première après la déclaration <!DOCTYPE html>. On y ajoute l’attribut lang. Ainsi, pour une page écrite majoritairement ou exclusivement en français, le code sera : <html lang="fr">.

C’est le moment idéal de rappeler que le code pour le luxembourgeois n’est pas "lu" – qui correspond au Luba-katanga parlé en République démocratique du Congo – mais "lb".

Préciser chaque changement de langue

Ensuite, dans le corps de la page, il va falloir préciser au lecteur d’écran à quels moments le texte change de langue, par exemple en encadrant au sein du paragraphe les passages écrits en une autre langue, de la manière suivante : <p>Certes, je n’aime pas tous ses films, mais il a eu le talent d’adapter <span class="en">The English Patient</span> au cinéma en 1996.</p>

Si vous utilisez un CMS pour éditer votre site, il est fort probable qu'il propose ce genre de fonctionnalité. Lorsque ce n'est pas le cas dans le CMS par défaut, il existe en général des plugins pour gérer les changements de langues.

Ainsi, vous allez rendre service à beaucoup d'utilisateurs

À qui tout cela va-t-il servir ? On pense en premier lieu aux personnes aveugles et malvoyantes. Elles comprendront avec peine le texte restitué par le lecteur d'écran s'il déchiffre un texte ou une portion de texte dans une mauvaise langue. Mais d'autres utilisateurs, par exemple dyslexiques, pourront eux aussi recourir à des systèmes de vocalisation. Les mêmes embûches sur la voie de la compréhension les menacent si les changements de langue ne sont pas correctement balisés.

Ci-dessous une vidéo d’une minute pour vous montrer la restitution d’un même paragraphe par le lecteur d’écran JAWS, sans puis avec les indications de changement de langue :

Vocalisation de paragraphes

Transcription de la vidéo

Sans indication de changement de langue dans le code

[Le texte suivant est lu avec une voix française]

De toute façon, dit Juliette, c’est ça ou une joint-venture. Je lui conseille de veiller aux lanceurs d’alerte. Elle referme Night flight, fixe son regard sur la photo des Twin Towers et elle évacue : non mais what's going on dear ? Antoine n’est plus whistleblower. De toute façon qui viendra fouiner sur un Health Data Hub ? Je m’insurge : la sécurité, c’est pas un nice to have, c’est un must have. Elle ignore, préfère partir en chantant Once there were two knights and maidens. They'd walk together. Out in the gardens. In all kinds of weather.

[heading level one] Avec indication de changement de langue dans le code

[Le texte suivant est lu en majoritairement avec une voix française, mais chaque expression anglaise est lue avec une voix anglaise]

De toute façon, dit Juliette, c’est ça ou une joint-venture. Je lui conseille de veiller aux lanceurs d’alerte. Elle referme Night flight, fixe son regard sur la photo des Twin Towers et elle évacue : non mais what's going on dear? Antoine n’est plus whistleblower. De toute façon qui viendra fouiner sur un Health Data Hub? Je m’insurge : la sécurité, c’est pas un nice to have, c’est un must have. Elle ignore, préfère partir en chantant Once there were two knights and maidens. They'd walk together. Out in the gardens. In all kinds of weather.

Vous pouvez essayer à votre tour en utilisant ou en éditant, sur le site codepen.io, le code reprenant la page lue dans la vidéo.

En veillant à baliser correctement votre texte, vous cochez pas moins de quatre critères sur la liste des éléments à respecter pour avoir un site accessible :

Et pourtant, dans les audits conduits régulièrement par le Service information et presse sur une sélection de sites publics, si l'attribut de langue défini au niveau de la page ne manque presque jamais, en revanche les changements de langue au sein du corps de la page sont très rarement indiqués.

Mais au fait... mon mot figure-t-il dans le dictionnaire ?

Attention, à l'inverse, à n'utiliser l'attribut lang que lorsque c'est nécessaire. Certains mots, empruntés à l'anglais, se retrouvent aujourd'hui dans les dictionnaires français. Planning est de ceux-là. Dans une page rédigée en langue française, il n'est donc pas nécessaire de le préciser dans le code. En cas de doute, n’hésitez pas à consulter les dictionnaires officiels pour les langues fréquemment employées sur les sites publics luxembourgeois :

Pour conclure, citons d’autres raisons que celles qui ont strictement trait à l’accessibilité. Bien renseigner la langue sera d’une grande aide aux outils de traduction en ligne (on peut penser au service de traduction automatique de la page fourni par Google Chrome). On peut penser à d’autres souplesses : ainsi, les programmes tiers inclus dans la page (tel un lecteur vidéo) afficheront leur menu de navigation dans la langue spécifiée au niveau de la page. Enfin, pour terminer sur des considérations purement stylistique, la gestion de la césure via la propriété hyphens est assurée par le navigateur quand vous renseignez l’attribut lang pour les langues supportées par votre navigateur.

Pour plus d’informations sur le sujet, nous vous conseillons la lecture de l’article d’Adrian Roselli consacré à la question.