R I S K M O N I T O R

Loading

Intelligent Cybersecurity Check for vulnerabilities now

Contact Info

Get A Quote

Valid HTML Language Attribute

  • June 1, 2025

Rule ID: html-lang-valid
Ruleset: axe-core 4.10
User Impact: Serious
Guidelines: WCAG 2.1 (A), WCAG 2.0 (A), WCAG 2.2 (A), Trusted Tester, EN 301 549

How to Fix the Problem

Ensure the <html> element in your document has a lang or xml:lang attribute that correctly specifies the primary language of the content.

Examples:

For a document primarily in English:

html
<html lang="en">
<!-- document content -->
</html>

For a more specific dialect:

html
<html lang="en-US"> <!-- American English -->
<html lang="fr-CA"> <!-- Canadian French -->

If the Language Changes Within the Page:

Use the lang attribute on inline elements:

html
<p>This is English text. <span lang="es">Este es texto en español.</span></p>

For Right-to-Left Languages:

Use the dir attribute to define text direction:

html
<p lang="ar" dir="rtl">هذا نص باللغة العربية</p>

For left-to-right languages (optional if already default):

html
<p lang="en" dir="ltr">This is English text.</p>

Best Practices:

  • Always spell the language code correctly.

  • Use IETF BCP 47 language tags (e.g., en, fr-CA, zh-Hans).

  • Don’t guess—ensure the specified language truly represents the primary content of the document.

Why it Matters

Screen readers and other assistive technologies rely on the lang attribute to determine how to pronounce text. If this attribute is missing or incorrect:

  • The screen reader defaults to the user’s system language, which may mispronounce words and confuse the user.

  • Multilingual users may not understand the content if it’s spoken in the wrong language library.

  • Proper language tagging enables accurate voice intonation, pronunciation, and comprehension.

Correctly specifying the language allows users—especially those who are blind or visually impaired—to interact with web content as intended.

Rule Description

Each HTML document must include a lang (or xml:lang) attribute in the opening <html> tag with a valid language code. This ensures the content is interpreted correctly by screen readers and improves accessibility for multilingual users.

The Algorithm (in Simple Terms)

  1. Check if the <html> element contains a lang or xml:lang attribute.

  2. Verify that the value of the attribute is a valid language code (e.g., “en”, “es-ES”, “fr-CA”).

  3. If either the attribute is missing or the value is invalid, the page fails the check.

Tags:
Share:

Leave A Comment