== 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

[source,javascript,diff-id=1,diff-type=noncompliant]
----
function iframe() {
    return (
        <iframe src="https://openweathermap.org"></iframe> // Noncompliant
    );
}
----

==== Compliant solution

[source,javascript,diff-id=1,diff-type=compliant]
----
function iframe() {
    return (
        <iframe src="https://openweathermap.org" title="Weather forecasts, nowcasts and history"></iframe>
    );
}
----

== Resources
=== Documentation

* MDN web docs - https://developer.mozilla.org/en-US/docs/Web/HTML/Element/iframe[iframe element]
* WCAG - https://www.w3.org/WAI/WCAG21/Understanding/bypass-blocks[Bypass Blocks] 
* WCAG - https://www.w3.org/WAI/WCAG21/Understanding/name-role-value[Name, Role, Value]