Feature request: Add title attribute for iframes created from Wagtail embeds

Is your proposal related to a problem?

Wagtail creates iframes without title with its EmbedBlock and embed chooser / rich text embed feature. iframes without title are just announced as “frame” for screen reader users, without any further details, which isn’t enough for them to determine what the frame contains, and decide whether to enter it or skip it.

• Accessibility guidelines on title for iframes: https://www.w3.org/TR/WCAG20-TECHS/H64.html
• Example of the problem, with rich text embed and StreamField EmbedBlock: https://bakerydemo-thibaudcolas.herokuapp.com/breads/one-more-bread/
• Example on a real-world site (that may change): https://www.buckinghamshire.gov.uk/news/teacher-and-students-pay-musical-tribute-uks-key-workers/
• Demo video: https://youtu.be/eRKcWXjw61Y

Note: I believe this is also a problem with Wagtail’s embed template tag, which doesn’t seem to support setting a title.

Steps to Reproduce

1. Create an embed, either with the EmbedBlock or rich text “Embed”
2. Save / publish the page
3. Access the page with a screen reader
4. Try to navigate the page sequentially, or with region navigation (rotor for VoiceOver)

Technical details

• Browser version: Latest Chrome and Safari with VoiceOver on macOS 10.14.

Describe the solution you’d like

I can see two potential fixes for this,

• Either we add a “Title” field to both the embed chooser and the EmbedBlock, with relevant help text for editors (e.g. “Concise description of the embed for screen reader users – for example, title of the embedded content”)
• Or we automatically populate the title based on the embed’s metadata. I believe embeds already have a title field, but I’m not sure whether it’s always filled, and if so with what kind of content

Describe alternatives you’ve considered

An alternative would be to create a custom Embed block / rich text feature that is more easily customisable / more screen-reader-friendly, however I believe this is better suited as an enhancement directly in Wagtail

Additional context

This might be further complicated by the fact that we might just be inserting the oembed / Embedly provided HTML into the template, rather than something crafted by Wagtail – in which case it would be good to see whether Wagtail can add a title in there, or otherwise we could:

• Provide an opt-in way to use Wagtail’s own <iframe> generation instead of the platform-specific html.
• At least document the fact that this is an issue.

[nimasmi]

As far as I’m aware, the title attribute is the only valid way of describing the contents of an iframe, and that’s exactly what the above code does.

Then I suspect the Siteimprove report has been misrepresented. I found an article at https://www.wtamu.edu/siteimprove/inline-frame-without-text-alternative.html which equates the fault “Inline frame without a text alternative” with populating the title attribute.

I have asked for access to the Siteimprove report.

[thibaudcolas]

Tagging @nimasmi who has recently fixed this on a project in a way I find quite elegant. We may need to validate with other core developers that they are happy with his approach being backported to Wagtail, if so this could be quite a nice fix.