jsx-a11y/html-has-lang
Require a lang attribute on the html element so screen readers use the right pronunciation rules.
- Category: Accessibility
- Severity: warn
- Source:
oxlint-builtin:jsx-a11y - Framework: global
- Enabled when: always (unless customRulesOnly=true)
- Documentation: https://oxc.rs/docs/guide/usage/linter/rules/jsx_a11y/html-has-lang
Validation prompt
Use this to decide whether a fired diagnostic is real or a false positive.
Fires on a JSX <html> element without a lang prop, or with lang set to an empty string. The rule only inspects the literal <html> tag in the current file. False positive: in Next.js App Router, lang is set on <html> in the root layout — a deeper file rendering its own <html> usually indicates a different structural problem, not a missed attribute.
Fix prompt
Use this once validation confirms the diagnostic is real.
Add a BCP 47 language code: <html lang='en'> for English, <html lang='en-US'> for regional variants, or <html lang={locale}> driven from i18n state. Screen readers use lang to switch pronunciation rules and dictionaries; without it, they fall back to the user's OS language and mispronounce content. See https://oxc.rs/docs/guide/usage/linter/rules/jsx_a11y/html-has-lang
Related rules
More Accessibility rules from the rules reference:
jsx-a11y/iframe-has-title: Require a unique, descriptive title attribute on iframes so assistive-tech users can identify embedded content.jsx-a11y/label-has-associated-control: Require every label to wrap its form control or point at one with htmlFor.jsx-a11y/no-autofocus: Disallow the autoFocus prop — stolen focus disorients screen-reader and keyboard users.jsx-a11y/no-distracting-elements: Disallow deprecated marquee and blink elements, which distract users and can trigger vestibular issues.jsx-a11y/no-redundant-roles: Disallow role attributes that duplicate an element's implicit ARIA role, like <button role='button'>.