3.1.1: Language of Page

Guideline 3.1.1 ensures that the default language of each web page can be programmatically determined. This is crucial for assistive technologies such as screen readers, which need to accurately interpret and pronounce the content. Declaring the language helps improve accessibility for users who rely on these technologies.

Importance of 3.1.1: Language of Page Success Criterion

Setting the language of a page is essential for various reasons. It enables screen readers to apply the correct pronunciation rules, which is vital for understanding the content. This is particularly important for users with visual impairments or cognitive disabilities who rely on assistive technologies. Additionally, specifying the language improves search engine optimization (SEO), making the content more discoverable and accessible to a broader audience. Proper language declaration also facilitates language switching for multilingual users, enhancing the overall user experience.

Primary Use Cases and Requirements Under Guideline 3.1.1: Language of Page (Level A)

Use Case 1: Single-Language Web Page

Example: A blog written entirely in English.

Implementation: Specify the language of the page in the HTML tag using the lang attribute.

How to Test: Inspect the HTML tag to ensure it includes lang="en". Use a screen reader to verify correct pronunciation of the content.

Use Case 2: Multilingual Web Page

Example: A corporate website with pages available in multiple languages.

Implementation: Specify the language of each page using the lang attribute in the HTML tag.

How to Test: Navigate to different language versions of the site and inspect the HTML tags to ensure the correct lang attribute is used. Use a screen reader to verify correct pronunciation.

Use Case 3: Automated Translation Tools

Example: A website using automated translation for different languages.

Implementation: Ensure the translated content is wrapped in an element with the appropriate lang attribute.

How to Test: Switch the website to different languages and inspect the HTML to verify correct usage of the lang attribute. Use a screen reader to check pronunciation.

Testing Steps:

1. Manual Testing: Inspect the HTML tag of the page to ensure it includes the correct lang attribute.

2. Screen Reader Testing: Use a screen reader to navigate through the page. Confirm that the screen reader correctly pronounces the content according to the specified language.

3. Automated Tools: Use automated accessibility testing tools to check for missing or incorrect lang attributes. Review the tool's report and manually verify any flagged elements to ensure compliance.

How to Implement 3.1.1: Language of Page

Specifying the Language of a Single-Language Page

Add the lang attribute to the HTML tag to declare the language of the entire page.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Example Page</title>
</head>
<body>
  <p>This is an example page in English.</p>
</body>
</html>

Specifying the Language of Multilingual Pages

Add the lang attribute to the HTML tag of each language-specific page.

<!DOCTYPE html>
<html lang="fr">
<head>
  <meta charset="UTF-8">
  <title>Page d'exemple</title>
</head>
<body>
  <p>Ceci est une page d'exemple en français.</p>
</body>
</html>

Ensuring Correct Language for Automated Translations

Wrap translated content in elements with the appropriate lang attribute.

<div lang="es">
  <p>Este es un contenido traducido al español.</p>
</div>

Testing and Iteration

Regularly test the language declaration as part of your development process. Use real-world scenarios and assistive technologies to ensure the lang attribute is correctly implemented and recognized.