Web Stories for WordPress

Best Practices

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:

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:

And in case you want to manually optimize videos before uploading:

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.