Iframes allow to include any external content into a page. As such, precaution must be taken that external content does not mess up the semantics of the surrounding content with improper heading levels and hierarchies.
In general, screen readers treat content in an iframe like any other content on the page.
In addition, they announce the frame:
NVDA simply announces "frame".
JAWS also announces the iframe's title attribute, so be sure to always provide a meaningful title to an iframe.
Also, both NVDA and JAWS allow navigating directly to any frame using the m key.
<h1>
My Hobbies
</h1><p>
These all are activities I love to do on a regular basis.
</p><h2>
Playing Soccer
</h2><p>
Soccer is a team sport played between two teams of eleven players with a spherical ball.
</p><h2>
Dancing
</h2><iframesrc="iframe.html"title="Additional info about dancing"></iframe><h3>
Gardening
</h3><p>
Gardening is the practice of growing and cultivating plants as part of horticulture.
</p>
Category
Result
Comments
Date
Keyboard only
✔ (pass) pass
-
2018-5-14
NVDA 2023.1 + FF 115
✔ (pass) pass
-
2023-8-3
NVDA 2021.2 + Chrome
✔ (pass) pass
-
2021-2-10
NVDA 2023.1 + Edge
✔ (pass) pass
-
2023-7-13
JAWS 2018.3 + FF ESR 52.7.3
✔ (pass) pass
-
2018-5-7
JAWS 2021.2 + Chrome
✔ (pass) pass
-
2021-2-10
JAWS 2023.1 + Edge
✔ (pass) pass
-
2023-7-13
Headings in iframes
Screen readers integrate headings from iframes directly into the heading outline of the parent page. This means that you have to be very careful that an embedded content's heading does not badly affect your embedding page's heading outline.
The following bad example illustrates what can happen: the embedded content is meant to be part of the heading on level 2 "Dancing", but it defines its own headings on level 1.
<h1>
My Hobbies
</h1><p>
These all are activities I love to do on a regular basis.
</p><h2>
Playing Soccer
</h2><p>
Soccer is a team sport played between two teams of eleven players with a spherical ball.
</p><h2>
Dancing
</h2><iframesrc="iframe.html"title="Additional info about dancing"></iframe><h3>
Gardening
</h3><p>
Gardening is the practice of growing and cultivating plants as part of horticulture.
</p>
The resulting headings outline looks like this to a screen reader:
<h1> Hobbies
<h2> Playing Soccer
<h2> Dancing
<h1> Salsa
<h1> Rock'n'Roll
<h2> Gardening
To fix it, the headings in the embedded content need to be on the correct level relatively to the parent page.
<h1>
My Hobbies
</h1><p>
These all are activities I love to do on a regular basis.
</p><h2>
Playing Soccer
</h2><p>
Soccer is a team sport played between two teams of eleven players with a spherical ball.
</p><h2>
Dancing
</h2><iframesrc="iframe.html"title="Additional info about dancing"></iframe><h3>
Gardening
</h3><p>
Gardening is the practice of growing and cultivating plants as part of horticulture.
</p>
