Feature request: Add title attribute for iframes created from Wagtail embeds
See original GitHub issueIs 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
- Create an embed, either with the EmbedBlock or rich text “Embed”
- Save / publish the page
- Access the page with a screen reader
- 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-specifichtml
. - At least document the fact that this is an issue.
Issue Analytics
- State:
- Created 3 years ago
- Reactions:1
- Comments:12 (12 by maintainers)
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.
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.