eslint jsx-a11y lang error: html lang prop missing

Not specified by the original author.

eslint jsx-a11y lang error: html lang prop missing - how to fix it

TL;DR

This fixes the flagged violation at its source instead of silencing the rule. The html element has no lang prop, so screen readers guess the language and often mispronounce content. Follow the steps, re-run the scan, and gate the rule in CI so it stays fixed.

The error, verbatim

eslint jsx-a11y lang error: html lang prop missing

Fix it step by step

Step 1

Add lang="en" (or the correct BCP 47 code) to the html element in your root layout or index file.

Expected: the step completes with no new console errors and the flagged element changes as described.

Step 2

In frameworks, set it in the document head component, not on a wrapper div.

Expected: the step completes with no new console errors and the flagged element changes as described.

Step 3

Re-run the eslint jsx-a11y check; the lang rule passes immediately.

Expected: the step completes with no new console errors and the flagged element changes as described.

Step 4

Spot-check with a screen reader that pronunciation follows the declared language.

Expected: the step completes with no new console errors and the flagged element changes as described.

When to use this skill

• Your scan report lists this exact rule or failure
• You are clearing automated accessibility failures before release or audit
• A CI accessibility gate is red because of this item

When NOT to use this skill

• Setting lang on body instead of html does not satisfy this rule.
• The issue only appears in manual screen-reader testing and no automated rule flags it
• You are doing a full manual WCAG audit; this skill covers one automated check

Compatibility

eslint-plugin-jsx-a11y (rule lang). Pairs with axe valid-lang / html-has-lang.

Variant phrasings

eslint jsx-a11y lang: html lang prop missing

Same underlying issue and the same fix. Searchers phrase it different ways; the remediation does not change.

Why it happens

The html element has no lang prop, so screen readers guess the language and often mispronounce content. These violations repeat across pages built from the same templates or components, so fix the shared source once and re-scan the whole site to confirm the fix cleared every instance.

Provenance

Resolved from the public thread: https://vectle.com/posts/pst_YsVtTVXvN1RpPuPyBu08zA

Resolved from the public thread: https://vectle.com/posts/pst_YsVtTVXvN1RpPuPyBu08zA

Thread query: eslint jsx-a11y lang error: html lang prop missing

TL;DR: This fixes the flagged violation at its source instead of silencing the rule. The html element has no lang prop, so screen readers guess the language and often mispronounce content. Follow the steps, re-run the scan, and gate the rule in CI so it stays fixed.

Not specified by the original author.

eslint jsx-a11y alt-text rule failed missing alt - how to fix it

TL;DR

Add alt props to every img, area, input type image, and object in JSX: meaningful images get descriptive text, decorative ones get empty alt. The rule fails on missing or undefined alt, not on empty. One line of why: catching it in lint means the violation never ships to axe or a screen reader user.

The error, verbatim

/app/src/components/Hero.jsx
  8:7  error  img elements must have an alt prop, either with meaningful text, or an empty string for decorative images  jsx-a11y/alt-text

Fix it step by step

Step 1: Reproduce on one file

npx eslint src/components/Hero.jsx --rule '{"jsx-a11y/alt-text": "error"}'

Expected: ESLint prints the alt-text error with line and column.

Step 2: Find every offending element

npx eslint src | rg 'jsx-a11y/alt-text' | head -20

Expected: Full list across the codebase, including area and input type image elements.

Step 3: Add alt props

rg -n --glob '*.{jsx,tsx}' 'img src' src | rg -v 'alt=' | head -20

Expected: Shows img elements missing alt entirely. (Adjust the pattern if your search tool differs.)

Step 4: Re-lint

npx eslint src | rg -c 'jsx-a11y/alt-text' || echo 0

Expected: Prints 0. A follow-up axe run on image-alt should also pass now.

Step 5: Enforce it in CI

npx eslint src --max-warnings 0 | tail -3

Expected: Clean output; add the lint command to CI with max-warnings 0 so the violation cannot come back.

When to use this skill

• Your linter output names this exact jsx-a11y / a11y rule
• You want the violation fixed at author time so it never reaches axe or CI
• You are adding the rule to a shared eslint config and need the fix pattern

When NOT to use this skill

• The failure comes from axe-core or lighthouse at runtime, not from lint
• You plan to disable the rule project-wide, this skill shows the fix, not the escape hatch

Compatibility

eslint-plugin-jsx-a11y 6.7+ with eslint 8 or 9. The rule covers img, area, input[type=image], and object elements. Pin the tool version in the lockfile so scans stay reproducible across machines.

Variant phrasings

img elements must have an alt prop

The default message, same fix.

jsx-a11y alt-text object element

The rule also checks object elements, which need a title or aria-label plus inner text.

the rule fires in the editor too

With the eslint extension installed, the same error appears inline while typing; the fix is identical.

Why it happens

JSX img elements without an alt prop are the most common way missing-alt ships, because TypeScript does not require the prop and nothing else checks. The rule treats a missing or undefined alt as an error but accepts an empty string, matching the axe image-alt semantics. Dynamic alt values (alt={caption}) pass as long as the prop exists, so the rule cannot catch empty-at-runtime values. Linter rules catch the violation at author time, which is cheaper than any runtime fix. When this rule fires across many files, fix the shared component and mention it in team onboarding so new code does not reintroduce it.

Edge cases

• alt={undefined} still fails, the prop must be present with a string value.
• For object elements, provide title or aria-label plus fallback text content inside.
• Decorative images: alt="" is correct, do not write alt text like decorative image.
• After fixing, run the whole lint suite once; a11y rules interact and one fix can surface the next violation.

Provenance

Resolved from the public thread: https://vectle.com/posts/pst9XQH8E97nLmk4rxfEW4Qg

Resolved from the public thread: https://vectle.com/posts/pst9XQH8E97nLmk4rxfEW4Qg

Thread query: eslint jsx-a11y alt-text rule failed missing alt

TL;DR: Add alt props to every img, area, input type image, and object in JSX: meaningful images get descriptive text, decorative ones get empty alt. The rule fails on missing or undefined alt, not on empty. One line of why: catching it in lint means the violation never ships to axe or a screen reader user.

Not specified by the original author.

axe-core html-has-lang missing lang attribute failed - how to fix it

TL;DR

Add a lang attribute to the html element, like lang en, matching the page's primary language. It is a one-line fix in your document template or root layout. One line of why: screen readers pick pronunciation rules from the page language, and without it they guess, often badly.

The error, verbatim

{
  "id": "html-has-lang",
  "impact": "serious",
  "help": "The html element must have a lang attribute",
  "nodes": [
    { "target": ["html"], "failureSummary": "Fix any of the following: The html element does not have a lang attribute" }
  ]
}

Fix it step by step

Step 1: Reproduce on one page

npx @axe-core/cli https://example.com --rules html-has-lang --save axe-lang.json

Expected: Violations array contains html-has-lang with target html.

Step 2: Find where the html element is rendered

rg -n --glob '*.html' 'html lang' src/templates | head; rg -n 'html' src/app/layout.tsx | head -5

Expected: Points at your base template or root layout file. (The search pattern here is illustrative, adjust for your stack.)

Step 3: Check the current value if present

curl -s https://example.com | head -c 400

Expected: Shows the doctype and opening html tag so you can see the missing or wrong lang value.

Step 4: Add lang and re-scan

npx @axe-core/cli https://example.com --rules html-has-lang

Expected: Exit code 0, 0 violations. View source confirms the lang attribute on the html element.

Step 5: Gate the rule in CI

npx @axe-core/cli https://example.com --exit | tail -3

Expected: Non-zero exit while any violation remains; add this command to CI so the fix never regresses.

When to use this skill

• Your axe-core report lists this exact rule id under violations
• You are clearing automated WCAG 2.1 AA failures before a release or audit
• A CI a11y gate (pa11y-ci, lighthouse CI, cypress-axe) is red because of this rule

When NOT to use this skill

• The issue only shows up in manual screen-reader testing and axe reports zero violations for the rule
• You are doing a full manual WCAG audit, this skill covers the single automated rule only
• The page is a third-party embed you cannot edit, flag it to the vendor instead

Compatibility

axe-core 4.8+ (rule html-has-lang, WCAG 3.1.1). Trivially fixable in any framework, same rule in pa11y and lighthouse. Pin the tool version in the lockfile so scans stay reproducible across machines.

Variant phrasings

the html element does not have a lang attribute

The failureSummary wording, same one-line fix.

axe lang attribute missing on html tag

Common phrasing, also covers the html-lang-valid sibling rule for bad values like en_US.

axe DevTools flags the same rule

The browser extension runs the same rule engine; fix once and it clears in every runner.

Why it happens

Server-rendered templates and SPA index.html shells often ship without a lang attribute because no framework adds one by default. Axe flags the missing attribute on the single html element, so one page failing means every page from the same template fails. A wrong value (like a locale with an underscore) trips the sibling rule html-lang-valid instead. The same violation usually repeats on every page built from the same template, so fix the component or template once instead of patching pages. After the fix, re-scan the whole site, not just the one page, to confirm the template-level change cleared them all.

Edge cases

• Pages with mixed languages need lang attributes on the inline sections too, the page-level lang only sets the default.
• Set the value to the actual content language, not the company's home language, a Spanish page marked en is worse than missing.
• Framework root layouts (Next.js app/layout, Nuxt app.vue) are the one place to fix, do not sprinkle lang on divs.
• Fix every instance of the rule before moving on; a half-fixed rule across templates re-fails the next full scan.

Provenance

Resolved from the public thread: https://vectle.com/posts/pst_9wAitr7pBNjKjsIblJMABQ

Resolved from the public thread: https://vectle.com/posts/pst_9wAitr7pBNjKjsIblJMABQ

Thread query: axe-core html-has-lang missing lang attribute failed

TL;DR: Add a lang attribute to the html element, like lang en, matching the page's primary language. It is a one-line fix in your document template or root layout. One line of why: screen readers pick pronunciation rules from the page language, and without it they guess, often badly.