Fixed A11y Video Block Issue

[Molochem]

fixes #5731
Fixed the missing aira-label on Video-Blocks

It seems a bit hacky, and also im not sure about the Message Content. Suggestions are welcome.

[netlify]

✅ Deploy Preview for plone-components canceled.

Name	Link
🔨 Latest commit	e2f89a0
🔍 Latest deploy log	https://app.netlify.com/sites/plone-components/deploys/66f69689716eb000088ea4e1

[netlify]

✅ Deploy Preview for volto ready!

Name	Link
🔨 Latest commit	5863baf
🔍 Latest deploy log	https://app.netlify.com/sites/volto/deploys/65e6d0831147170008f3f1f8
😎 Deploy Preview	https://deploy-preview-5732--volto.netlify.app
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.

---

To edit notification comments on pull requests, go to your Netlify site configuration.

[Molochem]

Just for the Record , some Tests are flaky. Idid nothing to the actual code, just changed the News fragment. Suddenly all Checks pass ?

[stevepiercy]

News is good, but the rest needs review by a core contributor.

News only

[sneridagh]

LGTM, @ichim-david could you give your blessing here?

[ichim-david]

@Molochem @sneridagh it's a small improvement from "Group main" to "Play Video".
My problem right now is that ok we say Play Video but if you hit enter or spacebar there is no video playback.
It's not a button to access and play the video.
You have to click on the placeholder image to then get the youtube embed as seen in this demo
https://demo.plone.org/video-block
EDIT: Even then you don't get to play video because you will have to interact with the video play
out of the embed and that will determine how many more tabs or enter or spacebar taps are necessary
in order to get to play the video.

I would rather say something along the lines "Video embed placeholder image".
The video block needs improvement, you can't access it with the keyboard so I don't really understand why we
have the tabindex=0 on it.

All of this could be improvement with other tickets but I'm a bit -1 on this idea because you don't Play video
using the keyboard anyhow.
I'll try to research some accessible placeholder / embed video players and see what others have tried and come back with a more proper suggestion.

[ichim-david]

@Molochem @sneridagh
https://adrianroselli.com/2024/01/embed-slides-youtube-videos-and-more.html#YouTube
If you search for:
The bulk of that code is the SVG play button and its focus & hover styles. You can make something simpler if you wish.
Below it is a placeholder image with a button on top that says: "Play Video".
As soon as you press it, the embed is loaded and video starts playback.
This is the correct pattern to me to signal "Play Video", that of a button that when you trigger it you get a video playback.

[JeffersonBledsoe]

@ichim-david @Molochem I'm just taking a look over this PR. Unfortunately, I think there are a number of accessibility issues/ WCAG failures with the actual Embed component. E.g. the lack of a suitable role (should be a button to load the video), the lack of announcement when you 'prepare' the video, the poor focus indicator, etc. So while I think this PR is an improvement, I think making the video block accessible is largely held back by these other issues. It would be nice to implement the workflow detailed in #5732 (comment) , however I think that would be better suited for another PR.

My suggestion for getting this improvement merged would be:

• set the as in the embedSettings to be a button
• fix any styling issues that might come up from the change of element (e.g. you might have to set width: 100%).
• have the label be something like "Prepare video for playback". This at least makes the initial screen reader pass over a bit clearer.
• have some text on the page saying something like "Pressing the video will load it. Press again to play"
  • You can set a aria-describedby key in the embedSettings to link the button to this text then so it is read aloud.
  • If we need to, we can visually-hide the text so the current visual representation is not changed. I would argue this is a lesser experience (as those not using Assistive Technology need to know you must click twice too), but it is an option if there are any problems with changing the look of the block.

I look forward to hearing what you both think of the above proposal so we can get this merged!

[JeffersonBledsoe]

Hey @Molochem , just checking in to see if you're still interested in continuing the work on this PR based on my previous comment? If not, we can close this PR (but leave the branch around) and revisit it when it is able to be worked on.

[tisto]

@JeffersonBledsoe FYI: we plan to look into this during the Salamina sprint this week.

[JeffersonBledsoe]

@JeffersonBledsoe FYI: we plan to look into this during the Salamina sprint this week.

See you there!

[nileshgulia1]

@JeffersonBledsoe @ichim-david I was looking at this and I'm a bit torn on the approach. "Pressing the video will load it. Press again to play" For instance a user sees this, he press the button while on the placeholder (with role ="button"). This loads the iframe, pressing Enter again doesn't play the video, then we have to navigate all the way to the play button in Youtube video. So the above text makes no sense. Maybe I'm missing something.

[ichim-david]

@plone/volto-accessibility @tisto @Molochem after discussions with Karin Maligoj which is our resident expert for this Sprint I proposed the aria-label "Load video player".
This is because this is the exact action that happens, when you press enter you get either the youtube or vimeo or whatever other provider there is.
Then after hitting tab you get to the video player controls where you enventually get also the "Play video" button.

Here is a demo page where you can see that as soon as you hit enter you don't play the video
https://volto.demo.plone.org/video-block

[ichim-david]

The whole video player experience isn't at all accessible either. For instance, you have tabIndex on a div with an aria-label but there aren't any rotary actions to find this video (it isn't a heading, a form element, a link) as such you find out about it only if you tab around the page and find it eventually.
As part of a broader overhaul, this limitation should be addressed by those who desire to use the Volto Video block and ensure it's accessible.