jsx-a11y/iframe-has-title
Require a title on iframe elements
Also called 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:
bunfig.toml
[lint.rules]
"jsx-a11y/iframe-has-title" = "error" # or "warn"Examples#
example.jsx3 problems
const map = <iframeMissing title attribute for the iframe element. src={mapUrl} />;
const video = <iframeMissing title attribute for the iframe element. src={videoUrl} title="" />;
const widget = <iframeMissing title attribute for the iframe element. {...frameProps} />;example.jsxNo problems
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:
example.jsx2 problems
const map = <iframeMissing title attribute for the iframe element. src={mapUrl} title={"Map of " + city} />;
const video = <iframeMissing title attribute for the iframe element. src={videoUrl} title={clip?.name} />;example.jsxNo problems
const map = <iframe src={mapUrl} title={`Map of ${city}`} />;
const video = <iframe src={videoUrl} title={clipName} />;