Features
Start a free trial

Ensure lang attributes have valid values

Rule ID: valid-lang User Impact: serious Guidelines: WCAG 2.0

The lang attribute in HTML specifies the language of the document's content. It's crucial to assign a valid language code to this attribute to enhance accessibility and ensure correct pronunciation by screen readers.

About This Rule

This guideline ensures that the lang attribute has a valid value, enhancing accessibility for users who rely on assistive technologies. Adhering to this practice aligns with the following standards:

  • WCAG 2.1 (AA): 3.1.2 Language of Parts
  • WCAG 2.0 (AA): 3.1.2 Language of Parts
  • WCAG 2.2 (AA): 3.1.2 Language of Parts
  • Trusted Tester: 11.B - The human language for any content segment that differs from the default human language of the page can be programmatically determined.
  • EN 301 549: 9.3.1.2 Language of Parts

Why It Matters

Screen readers and other assistive technologies rely on the lang attribute to determine the language of the content, enabling accurate pronunciation and interpretation. An invalid or missing lang attribute can lead to mispronunciations, confusing users and diminishing their experience. This practice aligns with WCAG Success Criterion 3.1.2: Language of Parts.

How to Fix

To ensure proper language declaration:

  • Specify the Primary Language in the <html> Element: Add a valid two-letter language code to the lang attribute in the opening <html> tag.
    Copy code
    <html lang="en">
  <!-- Document content -->
</html>
  • Include Regional Variants if Necessary: For dialects or regional language variations, use extended language codes like "en-US" for American English or "fr-CA" for Canadian French.
    Copy code
    <html lang="en-US">
  <!-- Document content -->
</html>
  • Indicate Language Changes Within the Document: When a section of the content is in a different language, use the lang attribute on the specific element.
    Copy code
    <p>This is an English paragraph.</p>
<p lang="es">Este es un párrafo en español.</p>
  • Specify Text Direction for Right-to-Left Languages: Use the dir attribute to define text direction for languages like Arabic or Hebrew.
    Copy code
    <p lang="ar" dir="rtl">نص باللغة العربية.</p>

Examples

Incorrect

An HTML document without a lang attribute:

Copy code
<html>
  <!-- Document content -->
</html>

Correct

An HTML document with a valid lang attribute:

Copy code
<html lang="en">
  <!-- Document content -->
</html>

More Information

Other Rules

Interested in other web accessibility rules? Please see these other rules: