Adding subtitles and captions to videos in WordPress
WordPress, Automattic
As an Accessibility Design Lead at Automattic, I had the opportunity to work on the design and accessibility of the new WordPress block editor (a.k.a. Gutenberg) alongside the open source community, working on features and improvements that made the authoring experience more accessible for everyone.
Research and scope
One missing feature of the new WordPress block editor was the ability for authors to add subtitles and captions to video content. This is an important feature that enables improvements to localization by way of adding translations, and also enables users who for whatever reason cannot hear video content to consume it via captions.
I started by researching the feature requirements by gathering input from various members and experts from the community and followed by defining the scope.
A video can have multiple track elements, and a track element has 4 attributes:
srclang: the source language
label: the track title for player UI
kind: can be captions, chapters, descriptions, metadata or subtitle
src: the URL of the text file
Being a critical piece of the authoring experience, we opted to surface this functionality on the video block's toolbar, for easy access and findability.
Prototyping the end-to-end flow
After a few rounds of iteration we had a good idea of the direction we wanted to follow. I quickly moved from mockups to prototypes in order to be able to keep a steady cadence of feedback and collaboration with other designers, developers, project stakeholders and community members.
This allowed everyone involved to get a better picture of how the proposed solution will work before a single line of code was written, which helped us save time and resources.
(Might take a few seconds for the GIF to load)
✌️