Web Stories are a new, exciting medium for storytelling on the web. We strongly believe that it is important that everyone is able to enjoy Stories. By virtue of being built on AMP and core web technologies, Web Stories already come equipped with high quality support for many useful accessibility features. Our goal is to ensure that Web Stories are accessible by default, and we recognize that we have a lot to do to get to this goal. It is a top priority for us, and in this blog post, we’ll cover our approach and provide guidance on making more accessible Web Stories.
Working towards accessibility by default
It is important that we establish a clear, consistently-met accessibility standard for this new medium, akin to (or even surpassing) the well understood standards for articles and video. As a starting point, the Web Story format standardizes the core user interaction model and ensures that primary user actions like navigating from page to page, sharing the story, and swiping to page attachments can support important accessibility affordances by default. We are proactively working with industry experts to identify ways we can improve Web Story accessibility and need your input and feedback. If you find accessibility issues (or have suggestions for improvements) please file an issue in our Github repository. We truly appreciate your help!
However, just like with all web pages, publishers and creators need to thoughtfully follow best practices to ensure that their Web Stories achieve the best possible accessibility outcomes.
Begin with web best practices
The core principles to ensure your Web Story is accessible are the same for all web / AMP content. Keep key accessibility principles in mind and evaluate your story against best practices. In particular, given the visually rich nature of Web Stories, it is important to ensure the following are thoughtfully implemented:
Alt text for images
This might be the most familiar best-practice for accessibility on the web, and it applies in the same way to Stories on the web. Make sure all images in your Story provide meaningful alt-text descriptions for folks who are unable to visually perceive all aspects of the image. Here is an example of alt-text for an image:
<amp-img
alt="Stack of blueberry pancakes with powdered sugar"
src="/images/pancakes.jpg"
layout="fill"
>
</amp-img>Code language: HTML, XML (xml)One common pattern in Stories is to use images that include text as part of the image. This is best avoided for ideal accessibility results, but if you cannot avoid it, make sure to provide this “burned in” text as alt text as well.
Aria-label for videos
Videos in Stories take on a role that is really similar to images in most web documents. That is why it often makes sense to provide an `aria-label` that functions in a similar fashion to an alt-text on a video.
Captions/subtitles for videos
Provide subtitles and/or captions for the videos in your Stories. Users often need to consume Stories without audio. Text burned into videos is not available to screen readers and other assistive technologies and should be replaced with the appropriate elements.
Contrast
Stories are media-rich and a common design pattern is to layer text on top of images or video. When doing this, it is critical that you ensure that the text has sufficient contrast against the background. A common technique is to use background colors in text fields that contrast effectively against the text color.
Keyboard navigability
Each page in a Web Story should establish a clear flow of information both when a user engages visually and via assistive technologies (like keyboard navigation). It is important to ensure Web Story markup is organized to reflect the intended engagement order. This can be done naturally in the structure of the DOM, but when this is not as easy to do, the focus order can still be prescribed to follow a meaningful sequence with `tabindex` attributes.
Accessibility audit
While following the best practices described here is a good first step to achieving great accessibility for Stories, they cannot guarantee perfect outcomes. Just like with any other web presence we recommend performing accessibility audits and getting professional support from accessibility specialists to achieve the best outcomes.
Summary
Web Stories are designed for accessibility, and incorporate key capabilities in the overall user experience, but depend on Story authors to follow content best practices like marking up media elements with accessibility text and captions and paying attention to contrast for important text.
Thank you all for helping us make Stories an accessible medium on the web!
Posted by Varun Rao, Web Stories Product Manager, Google