43 lines
1.5 KiB
Plaintext
43 lines
1.5 KiB
Plaintext
== 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]
|