In simple terms, iframe is kind of a window in the middle of a web page that lets you view another page through that window. You basically cut out a rectangle of the page with the iframe and show the content of another page behind it.
Iframes can have any kind of content, including advertisements hosted by a third party, videos hosted by YouTube or Vimeo, custom widgets hosted by a third party, and so on. Sometimes iframes are used only to contain JavaScript that is hidden from the end user.
From an accessibility standpoint, iframes require titles, so that screen reader users can find them and navigate to them.
Frame titles
The iframe title MUST be meaningful and descriptive.
Without a title, screen readers may just say “frame,” or they may give the file name or path of the frame or iframe.
Good Example: Meaningful Iframe Title
The iframe has a title that matches to the content in it.
Begin code:
End code.
Frames MUST have a unique title (in the context of the page).
Good Example: Unique Titles for Iframes
The iframes of the two videos have unique titles so that they can be distinguished by screen reader users.
Begin code:
End code.
Hiding iframes that don’t contain meaningful content
Hidden frames or frames that do not show content to users SHOULD be hidden from assistive technologies using aria-hidden=”true”.
Sometimes the content of an iframe is not important at all. It may have only JavaScript, or it may be there only for decorative purposes. If that’s the case, you should hide the frame from screen readers using aria-hidden=”true”.
Good Example: Empty Iframe with aria-hidden=”true”
An iframe without meaningful content is hidden from screen reader users.
Begin code:
End code.
Bad Example: Empty Iframe with aria-hidden Not Set
Begin code:
End code.
The iframe have a page without meaningful content, which should not be noticeable to screen reader users, but because the aria-hidden attribute has not been set, it is noticeable to screen reader users.
Navigating iframes with screen readers
Method 1: Show List of All Iframes
Screen Reader & Browser Command
JAWS with Chrome, IE: Insert + F3 (to open Elements List), then select frames
NVDA with Firefox, Chrome: Not available
Method 2: Navigate from One Iframe to the Next
Screen Reader & Browser Command
JAWS with Chrome, IE: Press M
NVDA with Firefox, Chrome: Press M
