This issue becomes even more critical for multilingual pages or content where the language changes mid-page. Without clear language identification, translation software or text-to-speech tools may misinterpret the content and provide inaccurate translations or may read it inappropriately. This can cause significant frustration, particularly for users who access the content in a language that differs from their primary language.
Ensure that the language of individual parts is correctly identified to allow assistive technologies to function as intended and enable all users to engage with and understand the content without unnecessary challenges.
Maria is a Norwegian carpenter with dyslexia:
“When I visit the website of a Norwegian retailer to buy glue and varnish, I try to read the safety instructions before purchasing. Parts of the safety guidelines are written in English, and when I use my text-to-speech software, it reads the English text with a Norwegian voice. This makes the instructions almost impossible to understand. I struggle to follow the information and feel extremely frustrated and uncertain about whether I am interpreting the safety precautions correctly. This leaves me worried about making mistakes that could be dangerous.”
This section gives some examples of the issue.
In this example, the primary language of the document is set to Spanish (lang="es").
The <article> element specifies English as its language (lang="en"), which ensures that assistive technologies recognize the language change and adjust their settings accordingly.
<html lang="es">
<body>
<article lang="en">
They wandered into a strange Tiki bar on the edge of the small beach town.
</article>
</body>
</html>With the correct use of the lang attribute, this implementation enables screen readers to switch to the appropriate voice and pronunciation, which enhances the experience for users who rely on text-to-speech software.
In this example, the primary language of the document is set to English (lang="en").
However, the <article> element contains a lang attribute with an invalid value (lang="#!").
<html lang="en">
<body>
<article lang="#!">
They wandered into a strange Tiki bar on the edge of the small beach town.
</article>
</body>
</html>Because there is an invalid value for the lang attribute, this implementation fails to provide the necessary information for assistive technologies. This means that assistive technologies, such as screen readers and text to speech software, cannot determine the correct language for the content, which leads to potential mispronunciation and confusion for users.
This section provides information on how to identify and fix the issue.
The Web Governance platform flags HTML elements with non-empty lang attributes if the value of the lang attribute does not include a known primary language tag.
You must correct the value of the lang attribute so it matches the actual language of the element.
Examples of correct values for the lang attribute:
Related accessibility conformance testing rules.
If this content did not answer your questions, try searching or contacting our support team for further assistance.
If this content did not answer your questions, try searching or contacting our support team for further assistance.