1. Getting Started
  2. Installation: Preline UI

Accessibility

Duplicate page found

The purpose of this audit is to identify if multiple languages have been used on an HTML page, and if one of the languages found is not tagged using the [lang] attribute. This audit is conducted as part of an accessibility check, specifically targeting Success Criteria 3.1.2 of the Web Content Accessibility Guidelines (WCAG) 2.1.

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.

Importance of Valid Language Codes

Using a valid language code within the [lang] attribute is crucial for several reasons:

  • 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.

How to fix?

To resolve the issue of multiple languages found without proper [lang] attribute tagging, follow these steps:

  1. Identify the sections or elements within the HTML page that contain content in different languages.
  2. For each section or element, add the [lang] attribute with the appropriate ISO-approved language code.
  3. Ensure that the ISO-approved language code accurately represents the language used within the respective section or element.
  4. Use the following syntax to add the [lang] attribute to an HTML element:
    <tag lang="language-code">Content in the specified language</tag>

    Example

    <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.