jsx-a11y/iframe-has-title

A screen reader announces an iframe by its title. Without one, it reads the URL or says "frame", and the person has to go into the frame to find out whether it's a video, a map or an ad.

An empty string, null, undefined, a number, true and false don't count as a title. Neither does a spread, so <iframe {...props} /> is reported even if props has a title.

Configure

Off by default. To turn it on:

[lint.rules]
"jsx-a11y/iframe-has-title" = "error" # or "warn"

Examples

Reported:

const map = <iframe src={mapUrl} />;
const video = <iframe src={videoUrl} title="" />;
const widget = <iframe {...frameProps} />;

Not reported:

const map = <iframe src={mapUrl} title="Map of our offices" />;
const video = <iframe src={videoUrl} title={clip.name} />;
const widget = <iframe {...frameProps} title={`Preview of ${page.name}`} />;

In braces, the rule accepts a string, a template, a variable, a property such as clip.name, a call, a ? b : c, and ||, && or ??. Any other expression is reported, including a title that's built with +, read through ?. or cast with as. Use a template or a variable:

const map = <iframe src={mapUrl} title={"Map of " + city} />;
const video = <iframe src={videoUrl} title={clip?.name} />;

const map = <iframe src={mapUrl} title={`Map of ${city}`} />;
const video = <iframe src={videoUrl} title={clipName} />;