Video Block: Add accessibility name to core/video block using a caption

[shubhtoy]

Description

The following issue was raised on trac: #63519 by @rlautan

The 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.

Step-by-step reproduction instructions

1. Create a new page/post
2. Add a core/video block
3. Add media and caption to it
4. Navigate to the frontend, and using a screenreader try to focus on the video.
5. Verify that the screenreader announces the video but not the caption

Screenshots, screen recording, code snippet

Before.mov

Environment info

No response

Please confirm that you have searched existing issues in the repo.

• Yes

Please confirm that you have tested with all plugins deactivated except Gutenberg.

• Yes

Please confirm which theme type you used for testing.

• Block
• Classic
• Hybrid (e.g. classic with theme.json)
• Not sure

[shubhtoy]

I would love to work on this, please let me know if I can go ahead an add a aria-labelledby field to the video tag for a11y.

[t-hamano]

Thanks for the report.

I think the HTML improvements suggested here are something like this:

<!-- Current -->
<figure class="wp-block-video">
	<video src="sample.mp4"></video>
	<figcaption class="wp-element-caption">Video Caption</figcaption>
</figure>

<!-- Proposed -->
<figure class="wp-block-video">
	<video src="sample.mp4" aria-labelledby="video-caption"></video>
	<figcaption class="wp-element-caption" id="video-caption">Video Caption</figcaption>
</figure>

While this approach does allow screen readers to read the caption when the video element is focused, it also feels a bit overkill.

Below are two sources for making the video element accessible, but neither source mentions an approach using labels.

• Video element visual content has accessible alternative[proposed] | ACT Rule | WAI | W3C
• Video element visual-only content has accessible alternative[proposed] | ACT Rule | WAI | W3C

So I'm not sure if the current HTML is truly inaccessible, or what the ideal approach would be.

cc @joedolson @afercia @alexstine @amberhinds

[shubhtoy]

Thanks for your humble input @t-hamano , I will wait for further clarification on the same, and move forward accordingly.

[joedolson]

figcaption is intended to label the media figure, so it's read when the figure is reached by the screen reader. It's not a label for the video itself, per se. I don't think that adding a second labeling context is a good idea, because it would result in announcing that label twice.

It is good to provide a label of some kind for a video element; if there's no figcaption provided, then the video is unlabeled. That's easily resolved by adding a heading, though.

In my opinion, it wouldn't be a help for this labeling to be repeated for the video. Adding support for an aria-label for the video when it doesn't have a caption would be potentially worthwhile, however.

[shubhtoy]

Thanks @joedolson , this makes sense, I will add an aria-label field conditionally based on presence of a video caption.

[shubhtoy]

Hey @t-hamano @joedolson , I've opened a PR with suggested changes, please review it your convenience.

Thanks!

[t-hamano]

@shubhtoy Unfortunately, #70364 does not solve anything, so I have closed it.

Adding support for an aria-label for the video when it doesn't have a caption would be potentially worthwhile

As I understand it, one approach would be to add a text field to the block sidebar that allows the user to enter a description of the video, and then map it as the value of the aria-label attribute on the video element.

However, I question whether this UI is really necessary - as noted later in this comment, there are various ways to make video elements accessible. Most of the approaches proposed there should be achievable with the current block editor.

[shubhtoy]

Thank you for the clarification, @t-hamano. I understand now that using aria-labelledby is effective with screen readers. Would it be alright if I proceed with this approach and open a PR accordingly?

[t-hamano]

However, I question whether this UI is really necessary - as noted later in #70297 (comment), there are various ways to make video elements accessible. Most of the approaches proposed there should be achievable with the current block editor.

For the reasons above, I'm not sure that a UI for aria-label is absolutely necessary. I'll hear what others think.

If we decide to implement a UI for aria-label, note the following two points.

• It is a good idea to use the arialabel block support.
• To prevent redundant reading, we should disable the aria-label attribute if the block has figcaption text.