Consider adding a missing iframe title check?

Created on 22 June 2023, over 1 year ago
Updated 23 June 2023, over 1 year ago

Problem/Motivation

Iframes should have titles.

How they actually get their titles is a bit more complicated.

iframes can have title attributes on them directly:

  <iframe src="..." title="Woo, an iframe!"></iframe>

iframes can also inherit the title from a parent element!

  <div title="Woo, an iframe is inside me!">
    <iframe src="..."></iframe>
  </div>

...however iframes can also throw their own monkey wrenches in!

  <div title="Woo, an iframe is inside me!">
    <iframe src="..." title=""><span>Do'h!  I no longer have a title!</span></iframe>
  </div>

Steps to reproduce

Observe that editoria11y doesn't complain about iframes that are missing a title.

Proposed resolution

Implement an algorithm that can determine if an iframe has an "effective title". That is, it either has a non-empty title attribute, or has no title attribute, but has a parent HTML element with a non-empty title attribute.

In Javascript, I think this might do the trick?

  const iframes = context.querySelector('iframe');
  iframes.forEach(iframe => {
    if (iframe.hasAttribute('title')) {
      // iframe has a title, make sure it's not empty!
      if (iframe.getAttribute('title') === '') {
        // sound the alarms!  the title is explicitly empty!
      }
    }
    else {
      // Iframe has no title, check for a parent element with a title!
      const parent_with_title = iframe.closest('[title]');
      if (!parent_with_title) {
        // sound the alarms! there is no inherited title!
      }
      else {
        if (parent_with_title.getAttribute('title') === '') {
          // sound the alarms!  the inherited title is empty!
        }
      }
    }
  });

Remaining tasks

  1. Get maintainer feedback.
  2. Implement the feature.

User interface changes

None?

API changes

None?

Data model changes

None?

Thanks for such an amazing project!

✨ Feature request
Status

Postponed

Version

2.0

Component

Feature and test requests

Created by

πŸ‡ΊπŸ‡ΈUnited States luke.leber Pennsylvania

Live updates comments and jobs are added and updated live.
Sign in to follow issues

Comments & Activities

  • Issue created by @luke.leber
  • πŸ‡ΊπŸ‡ΈUnited States luke.leber Pennsylvania
  • πŸ‡ΊπŸ‡ΈUnited States itmaybejj

    I've dragged my feet on this check due to our implementation still not outputting title attributes. Didn't want to flag things that content editors couldn't fix...

    I thought that was still an open core bug, but it looks like you helped resolve it, which means the problem is at our end...hmmph...

    I'll look into this later in the summer -- I think having a robust test enable/disable GUI is going to need to come first, plus confirming that our missing titles are our own fault.

  • Status changed to Postponed over 1 year ago
  • πŸ‡ΊπŸ‡ΈUnited States itmaybejj
  • πŸ‡ΊπŸ‡ΈUnited States luke.leber Pennsylvania

    You might want to re-test your implementation.

    Youtube added a title attribute on their end that is now rendered! πŸ˜€

    The oembed title attribute management generally falls to the provider side. If your provider doesn't ship one, a little heckling can go a long way. 🀣

Production build 0.71.5 2024