Add accessibility name to core/video block using a caption

[rlautan]

Background: We came across this issue when we had an external company review an entire government affiliated website for web accessibility. Aiming for WCAG 2.1 AA with a score above 80%.

A core/video block that uses a caption has no accesibility name. Adding one as a aria-label or a aria-labbeledby attribute will enhance the accessibility for the block.

Create a page and add a video block with a caption to it. Inspect the element with the accessibility tree. You will notice there is no accessible name for the video. Using VoiceOver to navigate to the video gives us no feedback and the relation between the video and caption doesn't exist.

Solution: Adding aria-labelledby to the video with a relation to the caption fixes this issue.

Extra info about figure and figcaptions, outdated but still somewhat true: ​https://examples.hassellinclusion.com/images/figure-figcaption01.html

[rlautan]

I added a an example of what the accessibility tree would look like if aria-labelledby was added to the video element.

[shubhtoy]

Thank you for bringing this up.

I tested the issue using a screen reader and found that the video caption is indeed not announced when the video receives focus. However, after adding the aria-labelledby attribute, the caption was correctly announced.

Since the core/video block is part of Gutenberg, this should ideally be addressed there. I will go ahead and raise the issue in the Gutenberg repository, referencing this ticket and providing a link once it's created.

Thanks again for reporting this!

Before

​https://jodnli45mv.ufs.sh/f/RfRhkkYQhbdq74i71Hb5GdIs7H4jpKgTDScb2CeXtYyv6qnP

After

​https://jodnli45mv.ufs.sh/f/RfRhkkYQhbdqfCs9iNi0r9eFbcLkV71Phg4CYR0UQEt3aMjv

edit:
The issue is raised on github here.
​https://github.com/WordPress/gutenberg/issues/70297

[rlautan]

You're welcome and thank for you directing this to the right place. I'll make sure to think of that next time I raise an issue like this.

For now I've fixed the issue by using the 'render_block_core/video'-hook to add the aria-labelledby attribute with the excellent WP_HTML_Tag_Processor.

[nikunj8866]

Reproduction Report

Description

This report validates whether the issue can be reproduced.

Environment

• WordPress: 6.9-alpha-60093-src
• PHP: 8.2.28
• Server: nginx/1.27.5
• Database: mysqli (Server: 8.4.5 / Client: mysqlnd 8.2.28)
• Browser: Chrome 137.0.0.0
• OS: Windows 10/11
• Theme: Fondasi 1.2.1
• MU Plugins: None activated
• Plugins:
  • Test Reports 1.2.0

Actual Results

1. ✅ Error condition occurs (reproduced).
2. 🐞 Bug occurs. Focus is not set on the caption field when the error occurs.

Supplemental Artifacts

​https://screenrec.com/share/1vbaIFX0zj

[wildworks]

This issue should be resolved in the Gutenberg repository. Let's close this ticket and continue the discussion on ​GB 70297.