This document provides information about the Acquia Web Governanceaccessibility (glossary term, activate to view definition) check:
Element language attribute has invalid 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 (glossary term, activate to view definition). 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.
Who
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"), 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.
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
This section provides information on how to identify and fix the issue.
How to identify 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.
How to fix it
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:
Element language attribute (glossary term, activate to view definition) has invalid language tag
3.1.2 Language of Parts
Introduction
This document provides information about the Acquia Web Governanceaccessibility (glossary term, activate to view definition) check:
Element language attribute has invalid 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 (glossary term, activate to view definition). 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.
Who
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"), 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.
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
This section provides information on how to identify and fix the issue.
How to identify 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.
How to fix it
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:
Web Governance