The <iframe> element is used to embed another HTML document within the current document.
It creates a rectangular region in the web page where the embedded content is displayed. The embedded
content can be from the same domain or a different domain.
Note: The <frame> has been deprecated and SHOULD NOT be
used.
NOTE:
New to accessibility or uncertain of requirements, it will be helpful to review all sections below.
Already familiar with requirements, skip to the “Working Example” section for sample HTML, CSS
and JavaScript (when needed), along with a working demo.
The <iframe> element SHOULD be used for implementing the iframe.
The title attribute SHOULD be used to denote the purpose of the
iframe.
The width and height attributes SHOULD be used to denote
the width and height respectively of the iframe.
The src attribute SHOULD be used to specify the source of the content
in the iframe.
The frameborder attribute CAN be used to display a border around the
iframe.
The scrolling attribute SHOULD be used to display scrollbars within
the iframe if there is lengthy content within the iframe.
The allowfullscreen attribute CAN be used to specify whether to allow the
content within the iframe to enter fullscreen mode.
The iframe SHOULD be hidden from users if it’s not to be exposed.
CSS properties like display: none; visibility: hidden; and so on
CAN be used to hide iframe from all users.
Native HTML hidden attribute CAN be used as well to hide the
iframe from all users.
Note: tabindex="-1" and
aria-hidden="true" attributes will remove the iframe from focus
order and hide it from screen reader. However, visually the iframe will still be
present.
iframes CAN be used to embed videos on the webpage. They SHOULD be
provided with a descriptive accessible name using title or
aria-label attribute. This ensures that screen reader users are informed
about the purpose of the videos.
Note: The content embedded within the iframe from the same or a different domain
SHOULD be accessible. There might be limitations in implementing accessibility for the
3rd Party content which is not created by the Author.
A well-defined iframe benefits majorly the below users.
People with cognitive disabilities
People with visual disabilities
People using speech input
People with limited dexterity
People using keyboard only
<p>We used Example Domain for iframe.</p>
<p>Content inside an iframe should be accessible.</p>
<iframe src="//www.example.com/" title="Example website" width="550" height="400" allowfullscreen sandbox></iframe>
