Linter Rule: `iframe` elements must have a `title` attribute

Rule: html-iframe-has-title

Description

Ensure that all iframe elements have a meaningful title attribute that describes the content of the frame. The title should not be empty or contain only whitespace.

Rationale

The title attribute on iframe elements provides essential context for screen reader users about what content the frame contains. Without this information, users of assistive technology cannot understand the purpose or content of the embedded frame, creating significant accessibility barriers.

Note

<iframe>'s with aria-hidden="true" are exempt from this requirement as they are hidden from assistive technologies.

Examples

✅ Good

erb

<iframe src="https://youtube.com/embed/123" title="Product demonstration video"></iframe>
<iframe src="https://example.com" title="Example website content"></iframe>

<!-- Hidden from screen readers -->
<iframe aria-hidden="true"></iframe>

🚫 Bad

erb

<iframe src="https://example.com"></iframe>`<iframe>` elements must have a `title` attribute that describes the content of the frame for screen reader users. (html-iframe-has-title)

<iframe src="https://example.com" title=""></iframe>`<iframe>` elements must have a `title` attribute that describes the content of the frame for screen reader users. (html-iframe-has-title)

<iframe src="https://example.com" title="   "></iframe>`<iframe>` elements must have a `title` attribute that describes the content of the frame for screen reader users. (html-iframe-has-title)

Linter Rule: iframe elements must have a title attribute ​

Description ​

Rationale ​

Examples ​

✅ Good ​

🚫 Bad ​

References ​