Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

<iframe> with a corresponding <figcaption> does not need a `title` attribute

See original GitHub issue

Provide the steps to reproduce

Run LH on e.g. https://v8.dev/blog/10-years

The relevant HTML is the following:

<figure>
  <iframe src="https://www.youtube.com/embed/G0vnrPTuxZA" width="640" height="360" loading="lazy"></iframe>
  <figcaption>A visualization of the V8 code base over time [...].</figcaption>
</figure>

What is the current behavior?

The Lighthouse report includes the following warning:

<frame> or <iframe> elements do not have a title.

What is the expected behavior?

Lighthouse should be smart enough to recognize that the <iframe> has a corresponding non-empty <figcaption>, and that is thus does not need a <title> — similar to how images with a corresponding <figcaption> do not need an alt attribute that duplicates the caption.

Environment Information

Affected Channels: DevTools
Lighthouse version: 5.1.0
Operating System: Linux

Issue Analytics

State:
Created 4 years ago
Reactions:1
Comments:5 (3 by maintainers)

Top GitHub Comments

4reactions

robdodsoncommented, Aug 26, 2019

similar to how images with a corresponding <figcaption> do not need an alt attribute that duplicates the caption.

I’m not sure if this information is entirely accurate. alt text != caption text.

Here’s an example: In this instance, just using alt="George Washington" would probably suffice. Without any alt text the image will just announce “image”. Because the user does not have the visual affordance of seeing the caption text is adjacent to the image, it may not be clear to them that the caption necessarily relates to that specific image. Or, depending on how the caption is phrased, it might not be clear what the content of the image is.

In the case of the iframe, I think an untitled iframe will just announce “frame”. The user then has to enter a special shortcut to move into the frame and interact with it. Otherwise they bypass it. By adding something like `title=“V8 code base YouTube video” the user knows that the iframe contains a video and that it’s a YouTube embed (so they know what UI patterns to expect).

0reactions

patrickhulcecommented, Aug 27, 2019

Glad we got it sorted out! Thanks @robdodson and @mathiasbynens!

Top Results From Across the Web

H64: Using the title attribute of the frame and iframe elements

The title attribute is not interchangeable with the name attribute. The title labels the frame for users; the name labels it for scripting...

The HTML element represents a nested browsing context, embedding another HTML page into the current one.

Be Sure to Provide Titles for Iframes | Accessibility Tips

Always Provide a Title for an Iframe. For iframes that have meaningful content, provide a title using the title attribute. <iframe title="Campus Tour" ......

HTML Accessibility API Mappings 1.0 - W3C on GitHub

Where an HTML element or attribute does not have any default WAI-ARIA ... Where an element is indicated as having "No corresponding ......

Embedded content - 4.8.1 - The picture element - HTML Spec

Dynamically modifying a source element's src or type attribute when the element is already inserted in a video or audio element will have...