Users of screen readers and other assistive technologies rely on frame titles to describe the contents of frames. Navigating through frames and inline frames can quickly become difficult and confusing for assistive technology users if the frames are not marked with a title attribute.
How the Lighthouse frame title audit fails #
<iframe> elements that don't have titles:
The Lighthouse Accessibility score is a weighted average of all the accessibility audits. See the Lighthouse accessibility scoring post for more information.
How to add titles to frames and iframes #
Provide unique and descriptive
title attributes for all
Additionally, best practice is to give the enclosed document a title element with content identical to the title attribute. For example:
<iframe title="My Daily Marathon Tracker" src="https://www.mydailymarathontracker.com/"></iframe>
Tips for creating descriptive frame titles #
- As previously mentioned, give the enclosed document a title element with content identical to title attribute.
- Replace placeholder titles such as "untitled frame" with a more appropriate phrase.
- Make each title unique. Don't duplicate titles, even if they are similar.
- Source code for
<iframe>elements do not have a title audit
- Label documents and frames
- Frames must have title attribute (Deque University)