html-has-lang
<html> element must have a lang attribute.
Description
To indicate the primary language of the document, it is necessary to include a valid lang attribute (e.g., <html lang="en">) in the HTML document element. For multilingual screen reader users who may prefer a language other than the default, the lang attribute must correspond to a valid lang code.
Why is it important?
When setting up a screen reader, individuals choose a preferred language for the default settings. In the absence of language specification on a webpage, the screen reader relies on the user’s default language. This can lead to misinterpretation or mispronunciation of the content, hindering the user’s comprehension and interaction with the webpage. Users who access websites in multiple languages face challenges with screen reader language settings. Therefore, it is vital to explicitly specify a valid language to ensure accurate pronunciation of website text.
Examples
-
Success:
-
<html>element has alang="en"attribute which correctly identifies the page language as English.
-
-
Failure:
-
<html>element for a webpage in French does not have alangattribute. The screen reader user has set the primary lanuage to English, and is unable to understand the content.
-
How to fix?
Add a “lang” attribute to the <html> element with a value corresponding to the language of the webpage. In cases where an element within the page’s body employs a different language than the one specified in the <html> element, it is possible to override the language definition by utilizing the language attribute on specific elements as well.
Tags
cat.language, wcag2a, wcag311, ACT
References
- WCAG 3.1.1: Language of Page
- Deque University: html-has-lang
- Accessibility Insights: html-has-lang
- Evinced Digital Accessibility Knowledge Base: html-has-lang
We're sorry to hear that. Please share your feedback so we can do better
Contact our Support team for immediate help while we work on improving our docs.
We're continuously improving our docs. We'd love to know what you liked
Is this page helping you?
Yes
No
We're sorry to hear that. Please share your feedback so we can do better
Contact our Support team for immediate help while we work on improving our docs.
We're continuously improving our docs. We'd love to know what you liked
Thank you for your valuable feedback!
