useHtmlLang (HTML)

Summary

Rule available since: v2.4.0
Diagnostic Category: lint/a11y/useHtmlLang
This rule is recommended, meaning it is enabled by default.
This rule doesn’t have a fix.
The default severity of this rule is error.
Sources:
- Inspired from jsx-a11y/html-has-lang
- Same as @html-eslint/require-lang

How to configure

1
{
2
  "linter": {
3
    "rules": {
4
      "a11y": {
5
        "useHtmlLang": "error"
6
      }
7
    }
8
  }
9
}

Description

Require a lang attribute on the <html> element.

The language tag helps screen readers choose the correct pronunciation rules when the user has not selected a default language. A static HTML value must be non-empty. Vue bindings are accepted without evaluating the value they produce at runtime.

Examples

Invalid

1
<html></html>

code-block.html:1:1 lint/a11y/useHtmlLang ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━

  ✖ Provide a lang attribute when using the html element.
  
  > 1 │ <html></html>
      │ ^^^^^^
    2 │ 
  
  ℹ Setting a lang attribute on HTML document elements configures the language used by screen readers when no user default is specified.

1
<html lang=""></html>

code-block.html:1:1 lint/a11y/useHtmlLang ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━

  ✖ Provide a lang attribute when using the html element.
  
  > 1 │ <html lang=""></html>
      │ ^^^^^^^^^^^^^^
    2 │ 
  
  ℹ Setting a lang attribute on HTML document elements configures the language used by screen readers when no user default is specified.

Valid

1
<html lang="en"></html>

Accessibility guidelines

WCAG 3.1.1