PLANET-5251 Media Block Accessibility

[planet-4]

The Media block embeds content from other sources, sometimes using an iframe, or a native media player in case it's a direct link to an mp3, wav, or mp4 file.

So in most cases, the accessibility of that content does not depend on us. 

However I guess we can improve the UX a bit on our side, suggestions: 

• In the case of the MP4 file (MediaElementVideo component), as the user can add an picture from the media library as cover image (videoPoster prop), add the caption in a visually-hidden div so it can be read by the screen reader. You'll need to add the caption to the media data.

• For the rest of the cases, add an extra field to the Media block in the backend, added also as a visually-hidden element in the frontend, to let editors describe the embedded content to visually impaired users.

The rest depends on the inserted element, the provider (Youtube, Vimeo, Soundcloud), or the browser in case of native controls (mp3, mp4, etc).

Reporter: pcuadrad
Sections: Block: Media

Potentially affected repositories: planet4-plugin-gutenberg-blocks

Testing

You can test your changes on local by adding a Media block to a page and checking the different media types with a screen reader. You can also read the docs for more details.

JIRA ticket: https://jira.greenpeace.org/browse/PLANET-5251

[akankshakmr174]

I can work on this.

[GP-Dan-Tovbein]

Go for it!

[GP-Dan-Tovbein]

@akankshakmr174 I've updated the ticket with the JIRA ticket for more information :)

[akankshakmr174]

@GP-Dan-Tovbein Thank you!

[comzeradd]

Hi @akankshakmr174 :wave: Are you working on this? Do you require any assistance from the team?