Astuce utilisez l'attribut «lang» pour une meilleure accessibilité

le lang attribut est l’un des attributs HTML globaux que les développeurs peuvent appliquer à n’importe quel élément HTML et qui peut réellement aider à l’accessibilité. Il vous permet de spécifier la langue d'un élément et de tous ses éléments enfants à l'aide d'une «sous-étiquette» de langue: un code de 2 ou 3 caractères défini par un organisme de normalisation international..

A11y depuis le début

Cette astuce s'inscrit dans Accessibilité Web: le Guide de formation complet, où nous avons rassemblé une gamme de tutoriels, articles, cours et livres électroniques pour vous aider à comprendre l'accessibilité au Web dès le début..

Utilisation basique

lang se trouve le plus souvent sur le html élément, où la déclaration peut se propager à tout le contenu de la page. Par exemple, une déclaration de  indique au navigateur que tout le contenu de la page est en anglais. 

lang Les sous-étiquettes peuvent également avoir un identificateur de script ou de région, qui vous permet de spécifier le système d'écriture ou la région géographique de la langue. Par exemple, une déclaration de  spécifie l'anglais du Royaume-Uni (couleur contre couleur, centre contre centre, etc.).

Vous pouvez remplacer un existant lang déclaration avec un plus spécifique lang déclaration pour identifier par programme le contenu qui utilise un langage différent du reste de la page. Une section écrite en espagnol sur une page anglaise ressemblerait à ceci:

 …      

Alors, pourquoi voudrions-nous faire cela? Quelques raisons: 

1. Traduction et interopérabilité

L'identification des langues du contenu permet aux services de traduction tels que Google Chrome de fonctionner avec plus de précision. Puisque vous parlez à une machine utilisant du code, vous êtes en mesure d'indiquer directement aux algorithmes d'identification d'une langue étrangère qu'elle devrait déclencher une invite de traduction.. 

Google Chrome invite l'utilisateur à traduire une page.

La présence d'un valide lang La déclaration d'attribut aide également d'autres services automatisés qui ingèrent et recontextualisent le contenu du site Web. De plus, il peut servir de crochet de style pour des choses comme CSS. citations propriété.

2. Lecteurs d'écran

Certains logiciels qui lisent le contenu de l’écran à voix haute peuvent également analyser le contenu. lang attribut, affectant la façon dont il prononce le contenu de la page. Ce logiciel ne se limite pas aux technologies d'assistance. Les assistants vocaux comme Alexa, les modes de lecture de navigateur spécialisés, les applications de navigation comme Google Maps, les systèmes de sonorisation, etc. peuvent tous disposer de cette fonctionnalité..

À tout le moins, une utilisation appropriée de la lang attribut peut ajouter cet extra je ne sais quoi à l'expérience, dire au logiciel de lire le contenu à voix haute comme le ferait une personne.

Au mieux, cela aide à comprendre votre contenu. Les interfaces vocales manquent d'une grande partie des avantages que nous prenons pour acquis avec une interface utilisateur visuelle, il est donc important de les faire représenter le contenu aussi précisément que possible..

Voici un exemple de la façon dont le populaire lecteur d’écran JAWS traite le contenu qui a une lang attribut correctement appliqué à elle. Deux exemples seront lus à haute voix: l’un sans, et l’autre avec le lang attribut correctement appliqué à la partie française de la phrase, "En français, la phrase" Puis-je utiliser votre salle de bain? "est,"Puis-je utiliser votre salle de bain?'”

Conclusion

Décrire sémantiquement votre contenu est l'une de ces petites choses que vous pouvez faire en tant que développeur pour améliorer considérablement l'expérience des personnes et des services qui utilisent vos sites Web et vos applications Web..