Using assistive text for images & video
Make your images and videos accessible to users of screen readers by adding assistive text.
For images, insert a description of the image in the "Accessibility" section of the Design panel.
For videos, fill out both the "Title" and "Assistive text" text fields in the "Accessibility section of the Design panel. The title should be a description of the video itself, whereas the assistive text should describe the contents of the video.
Note: Ensure these text fields are empty for images and videos that are purely presentational and have no meaning to a screen reader user.
Include video captions
Add video captions to give viewers with hearing impairments, or who are in situations where they can't listen to audio, the full story. Include captions by:
- Formatting caption text in the required WebVTT file
- Select the video element on the canvas
- Open the "Captions" drop down in the Design Panel
- Click the "Upload captions" button and select the WebVTT file
Tip: There are several tools and online services that allow you to create such WebVTT files, many of them are free.
Avoiding ‘burned-in’ text on assets
It’s tempting to reuse video and composite images you have prepared before. Oftentimes, these assets have ‘burned-in’ text, which means that the text is part of the actual image or video. This isn’t only bad for accessibility, but also makes it hard for search engines to understand your content.
Instead, use assets that are clean, and layer text elements on top using the element.
Optimizing your images & videos
Did you know? When you upload videos to the story editor, it will automatically optimize videos for optimal load times. While this feature can be disabled in the settings, we recommend keeping it enabled. Video files that are too large or have an unsupported format (like
.mov) will otherwise not display properly.
The editor doesn’t yet have the capability to automatically optimize image content, it’s a good idea to invest into optimizing them in advance.
To optimize your images:
- Crop to only the visible portion of your image
- Use PNG8+alpha or WebP for images that require transparency (for example by using ImageAlpha or Squoosh)
- Use optimized JPEGs or WebP for all other images (easy with Squoosh)
- Avoid GIFs (use autoplaying looping video instead)
And in case you want to manually optimize videos before uploading:
- Trim to the exact length you need
- Crop to only the visible portion of our video (usually vertical, 9:16)
- Encode with the highest compression yielding acceptable results. For H264, that’s often below a CRF of 23 or a bit rate below 1500kbps
Embedding Web Stories across your site
The Web Stories WordPress plugin not only makes it easy for you to create beautiful stories. It also provides numerous ways to embed Web Stories across your site, including a versatile Web Stories block, integration of Web Stories into the theme customization process, and integration with the classic editor.
Integrating Web Stories into your content strategy allows you to enhance the quality of your content strategy and to diversify your traffic sources. You can embed your own Web Stories or Web Stories created by other publishers on your site.
Check out the Web Stories embeds blog post to learn more.