The WCAG 2.1 Success Criteria 3.1.2 states that "The default human language of each Web page can be programmatically determined." The primary goal is to ensure that the language of the content is correctly identified, allowing users with assistive technologies, such as screen readers, to understand and navigate the page effectively.
Using a valid language code within the
[lang] attribute is crucial for several
- Accessibility: People with visual impairments or cognitive disabilities often rely on screen readers or other assistive technologies that require proper language identification. A valid language code enables these technologies to read the content accurately, enhancing accessibility for all users.
- Search Engine Optimization (SEO): Search engines utilize language codes to determine the content's language, helping with appropriate indexing and improving search results for users searching in a specific language.
- Translation and Localization: Valid language codes are essential when translating or localizing web content. Language identification ensures that the appropriate translations or localized versions are displayed to users based on their language preferences.
To resolve the issue of multiple languages found without proper [lang] attribute tagging, follow these steps:
- Identify the sections or elements within the HTML page that contain content in different languages.
- For each section or element, add the [lang] attribute with the appropriate ISO-approved language code.
- Ensure that the ISO-approved language code accurately represents the language used within the respective section or element.
- Use the following syntax to add the [lang] attribute to an HTML element:
<tag lang="language-code">Content in the specified language</tag>
<div lang="en"> <h1>Welcome to our website!</h1> <p>This is the English version of our website.</p> </div> <div lang="fr"> <h1>Bienvenue sur notre site web !</h1> <p>Ceci est la version française de notre site web.</p> </div>
In the example above, the
[lang]attribute is added to the <div> elements to specify the language of the content within them.
By implementing the correct
[lang]attribute with valid language codes, you ensure that the content is accessible, searchable, and correctly displayed for users based on their language preferences.