<iframe> and <frame> elements should have an accessible name

[coseeian]

Title

<iframe> and <frame> elements should have an accessible name

Description

The iframe element used on the Contributors Conference 2019 page lacks an accessible name. According to WCAG 2.1 Success Criterion 4.1.2 (Name, Role, Value), all user interface components must have a name that can be programmatically determined.

This is particularly important for screen reader users who need to understand the purpose and content of embedded frames. Also, screen reader users have the option to pull up a list of titles for all frames on a page. Adding descriptive, unique titles allows users to quickly find the frame they need.

Steps to Reproduce

1. Go to /events/contributors-conference-2019/
2. Locate the following element:

<iframe src="https://www.youtube.com/embed/YkfG7Ggpi_o?rel=0" allowfullscreen="" width="720" height="405"></iframe>

Actual Behavior

The YouTube video iframe is rendered without any accessible name. The element fails all of the following accessibility checks:

• Element has no title attribute
• aria-label attribute does not exist or is empty
• aria-labelledby attribute does not exist, references elements that do not exist or references elements that are empty
• Element's default semantics were not overridden with role="none" or role="presentation"

This violation has a "serious" impact level according to axe-core accessibility testing.

Expected Behavior

The iframe should have an accessible name that describes its content or purpose. This can be achieved through one of the following methods:

• Add a title attribute with a descriptive label (e.g., title="p5.js Contributors Conference 2019 Video")
• Add an aria-label attribute with a descriptive label
• Add an aria-labelledby attribute referencing an element containing a descriptive label
• If the iframe is purely decorative, apply role="presentation" or role="none"

Environments

All.

Suggested Fix

Add a descriptive title attribute to the iframe element:

  <iframe src="https://www.youtube.com/embed/YkfG7Ggpi_o?rel=0"
          allowfullscreen=""
          width="720"
          height="405"
          title="p5.js Contributors Conference 2019 Video"></iframe>

Reference

WCAG:

• Success Criterion 4.1.2 Name, Role, Value (Level A)
• Success Criterion 2.4.1 Bypass Blocks (Level A)

WCAG Techniques:

• H64: Using the title attribute of the frame and iframe elements
• ARIA16: Using aria-labelledby to provide a name for user interface controls

Deque University:

• https://dequeuniversity.com/rules/axe/4.11/frame-title

What is your operating system?

None

Web browser and version

No response

[Irfan762]

@coseeian Hi, I’d like to work on this issue if it’s available.
It looks like a simple accessibility fix (adding an accessible name to the iframe), and I can submit a PR shortly.
Please assign this issue to me. Thanks!

[coseeian]

I have already initiated work on this issue. You can follow my progress here: #1123

[ksen0]

Thanks @coseeian ! Reviewing this now.