Why is this an issue?

An iframe, or inline frame, is an HTML document embedded inside another HTML document on a website. The iframe HTML element is often used to insert content from another source, such as an advertisement, into a web page.

In the context of web accessibility, <iframe>'s should have a title attribute. This is because screen readers for the visually impaired use this title to help users understand the content of the iframe.

Without a title, it can be difficult for these users to understand the context or purpose of the iframe’s content.

How to fix it

To fix missing iframe titles, you simply need to add a title attribute to your <iframe> element. The value of this attribute should be a brief description of the iframe’s content.

Code examples

Noncompliant code example

function iframe() {
    return (
        <iframe src="https://openweathermap.org"></iframe> // Noncompliant
    );
}

Compliant solution

function iframe() {
    return (
        <iframe src="https://openweathermap.org" title="Weather forecasts, nowcasts and history"></iframe>
    );
}

Resources

Documentation