eslint jsx-a11y iframe-has-title error missing title

eslint jsx-a11y iframe-has-title error missing title - how to fix it

TL;DR

Add a title prop to every iframe describing the embedded content, like title="Checkout form" or title="Map of store locations". Empty or missing titles fail. One line of why: screen readers announce iframes by title, and without one the user hits an unnamed frame with no idea what is inside.

The error, verbatim

/app/src/components/Embed.jsx
  5:5  error  iframe elements must have a unique title property  jsx-a11y/iframe-has-title

Fix it step by step

Step 1: Reproduce on one file

npx eslint src/components/Embed.jsx --rule '{"jsx-a11y/iframe-has-title": "error"}'

Expected: ESLint prints the iframe-has-title error.

Step 2: Find every untitled iframe

npx eslint src | rg 'iframe-has-title' | head -20

Expected: Full list of iframe elements missing titles.

Step 3: Write descriptive titles

rg -n --glob '*.{jsx,tsx}' 'iframe' src | head -20

Expected: Shows the embeds; title each by its content, not its technology.

Step 4: Add titles and re-lint

npx eslint src | rg -c 'iframe-has-title' || echo 0

Expected: Prints 0. Screen readers now announce each frame by its purpose.

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. Applies to iframe elements only. Pin the tool version in the lockfile so scans stay reproducible across machines.

Variant phrasings

iframe elements must have a unique title property

The default message, same fix.

jsx-a11y iframe title missing

Short phrasing, common with payment and map embeds.

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

Iframes get embedded for payments, maps, and videos with a src and dimensions but no title, because the title prop is easy to forget and nothing renders differently without it. The rule requires a unique, non-empty title. Unique matters: two iframes both titled widget are barely better than none, since the user cannot tell them apart. When the embed code comes from a third party, wrap their snippet in your own component that forces a title prop so it can never ship untitled. 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

• Titles must be unique per page, two embeds titled video player fail the spirit of the rule.
• title="" is not a fix, the rule requires a non-empty title.
• If the iframe is purely decorative and hidden from assistive tech, that is a separate decision, do not fake a title.
• 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/pst_MN3pE1NFU1mo0yu2mfTKWg