This document provides information about the related accessibility checks:
Element with lang attribute has valid language tag.
What
HTML elements with a lang attribute must contain a recognized primary language subtag. This subtag is the first part of the language tag, for example, en for English or fr for French, and identifies the base language of the content.
Note
This check is relevant for elements that contain text in a different language than primary language of the page that is defined in the <html> tag. For example, if a paragraph (<p>) contains text in French while the primary language of the page is set to English.
Why
When the language of specific parts of a webpage is not properly identified, it can create substantial barriers for users relying on assistive technologies. For instance, screen readers use the language specified in the lang attribute to pronounce text accurately. If the language of a section or element is not defined correctly, the content may be read out loud to the user with an incorrect pronunciation, which can lead to confusion or misunderstanding.
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.
This check affects the following users who have
Vision impairments: Who rely on screen readers to read content aloud.
Multilingual needs: Who depend on accurate language identification to use translation tools effectively, ensuring the content is understandable.
Cognitive impairments: Who benefit from consistent and predictable language presentation to support clarity and reduce confusion.
User story
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.”
Examples
This section gives some examples of the issue.
Example: Correct Use of lang Attribute
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"), ensuring 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>
By correctly using the lang attribute, this implementation enables screen readers to switch to the appropriate voice and pronunciation, enhancing the experience for users who rely on text-to-speech software.
Example: Incorrect Use of lang Attribute
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.
How
How to fix it.
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.
Your task is to correct the value of the lang attribute so it matches the actual language of the element.
Examples of correct values for the lang attribute:
Element with lang attribute has valid language tag
3.1.2 Language of Parts
Introduction
This document provides information about the related accessibility checks:
Element with lang attribute has valid language tag.
What
HTML elements with a lang attribute must contain a recognized primary language subtag. This subtag is the first part of the language tag, for example, en for English or fr for French, and identifies the base language of the content.
Note
This check is relevant for elements that contain text in a different language than primary language of the page that is defined in the <html> tag. For example, if a paragraph (<p>) contains text in French while the primary language of the page is set to English.
Why
When the language of specific parts of a webpage is not properly identified, it can create substantial barriers for users relying on assistive technologies. For instance, screen readers use the language specified in the lang attribute to pronounce text accurately. If the language of a section or element is not defined correctly, the content may be read out loud to the user with an incorrect pronunciation, which can lead to confusion or misunderstanding.
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.
This check affects the following users who have
Vision impairments: Who rely on screen readers to read content aloud.
Multilingual needs: Who depend on accurate language identification to use translation tools effectively, ensuring the content is understandable.
Cognitive impairments: Who benefit from consistent and predictable language presentation to support clarity and reduce confusion.
User story
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.”
Examples
This section gives some examples of the issue.
Example: Correct Use of lang Attribute
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"), ensuring 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>
By correctly using the lang attribute, this implementation enables screen readers to switch to the appropriate voice and pronunciation, enhancing the experience for users who rely on text-to-speech software.
Example: Incorrect Use of lang Attribute
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.
How
How to fix it.
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.
Your task is to correct the value of the lang attribute so it matches the actual language of the element.
Examples of correct values for the lang attribute:
Web Governance