3.3.1 Language of Page
Introduction¶
This document providdes information about the related Acquia Optimize checks:
- HTML page has lang attribute
- HTML page lang attribute has valid language tag.
What¶
An HTML page must include a lang attribute in the <html> element to identify the language of the page content.
The lang attribute must contain a valid language tag that conforms to recognized standards.
Why¶
If the language of a webpage is not properly identified, it can create significant barriers for users who rely on assistive technologies. Screen readers, for example, use the language attribute to determine how to pronounce words and phrases accurately. Without this information, the content may be read in a default or incorrect language, which makes it difficult or impossible for users to understand the information.
Additionally, language settings are critical for tools such as translation software and text-to-speech programs. When the language is not specified or is incorrect, these tools may misinterpret the text and cause to confusion or miscommunication. This can be particularly problematic for multilingual users or those users who access the content in a non-native language.
Define the language of the page to ensure that all users, regardless of their needs or preferences, can effectively engage with the content and navigate the page without unnecessary obstacles.
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, to ensure that 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 go online to read user manuals for some of the machinery I use, they are written in English but my text-to-speech software will read the English text with a Norwegian voice, pronouncing the words as if they were Norwegian. That makes it very hard for me to understand the instructions."
Examples¶
This section gives some examples of the issue.
Example: Missing lang attribute for HTML page¶
A webpage lacks a lang attribute in the <html> tag to specify the primary language of the content:
<html>
This example demonstrates poor accessibility practices. Without a lang attribute, assistive technologies, such as screen readers, cannot determine the language of the page. This can lead to issues such as incorrect pronunciation, grammar errors, and ineffective text-to-speech rendering.
For instance, a screen reader might attempt to read the content using the wrong language settings, making it difficult or impossible for users to understand the text.
Example: Invalid lang attribute for HTML page¶
A webpage includes a lang attribute in the <html> tag, but the value of the attribute is not valid:
Although the lang attribute is present, the value #1 is not a valid language tag. As a result, assistive technologies such as screen readers cannot correctly interpret the language of the page. This can lead to issues such as incorrect pronunciation, grammar misinterpretation, and ineffective text-to-speech rendering.
For users who rely on assistive technologies.
Example: Valid lang attribute for HTML page¶
A webpage uses a valid lang attribute in the <html> tag to specify the primary language of the content:
The lang attribute is neither empty nor invalid, which ensure that assistive technologies such as screen readers can accurately interpret the language of the page. This allows users who rely on such technologies to benefit from features like accurate pronunciation, grammar rules, and text-to-speech optimizations based on the specified language.
How¶
How to fix it.
The Acquia Optimize platform flags pages that are missing a lang attribute with a non-empty value, and it also flags pages that have lang attributes with invalid values.
In case of the error: HTML page has no lang attribute
Your task is to add a lang attribute with a valid value, such as
In case of the error: HTML page lang attribute has an invalid language tag
Your task is to correct the value of the lang attribute to ensure that it contains a valid value. For example, change
to
Additional resources¶
WCAG success criteria¶
3.3.1 Language of Page
ACT rules¶
Related accessibility conformance testing rules.