Accessible Web Development with Storyblok

Awareness of the importance of web accessibility is increasing - and with good reason. For too long, people with disabilities have been overlooked. As developers, it's our responsibility to create inclusive experiences on the web - for everyone. We at Storyblok acknowledge that there is still much room for improvement on our side as well - both in the app and on our website - and we are working on it. Regardless of our own imperfections, we want to share some points on what you, as a developer, could do to improve web accessibility when working with Storyblok. 

This is meant as an ongoing conversation. Have you been working on making your Storyblok project accessible? Maybe created your own field-type plugins or extensions? Or have some cool tips to share about Storyblok and accessibility? Or are you struggling with something regarding web accessibility? Please let us know; we’d love to learn more and chat! 

Semantic Code 

At its core, many aspects of web accessibility are semantic code - something we as developers should strive for whenever possible. Semantic markup refers to providing as much context and structure to our code as possible, for instance, using the <h> tags in a hierarchical and meaningful order, considering landmarks and using elements as intended (think button vs link). 

Providing this context will not only improve the experience of people with disabilities, general user experience, search engine optimization and performance - it will likely also make the code easier to read and maintain, lowering the risk of bugs and errors.  

Writing semantic code will already resolve many potential accessibility challenges, like tab flow and keyboard navigation as well as providing context for screen readers and compatibility with assistive tech. 

Regulated flexibility

How much freedom should editors in the CMS have? In the end, it comes down to this almost philosophical question. Within Storyblok, you have a lot of power to restrict access, create different roles and permissions, and limit how specific components or content types can be used. By using this power wisely, you can regulate the flexibility of authors and make sure without depriving them of all editing capabilities that the content still is accessible. 

This could for example mean efforts to control headline hierarchies to make sure context is provided for assistive tech (and Google crawlers, for that matter); or making sure the colour contrast between the background and the foreground is always sufficient for everyone to perceive your content. 

Careful Nudging

You can also use Storyblok’s capabilities to carefully nudge your team members in the right direction when it comes to creating accessible content, for example, by: 

• Adding notes to explain why something is necessary
• Making alt text or captions a requirement
• Limiting how and where different kinds of components can be used in order to stick to a semantic structure
• Making sure page changes are announced

Atomic Design 

One of the many beauties of a headless CMS like Storyblok is that you can follow a component approach and atomic design principles. By breaking down your product’s visual aspects into the smallest possible parts and making them reusable, you can create a coherent brand identity and clearer appearance and save a lot of time and effort in putting together new pages. 

By defining the scope for each of the individual components and how to nest them, you can make sure people use them exactly in the way they were intended and stick to an accessible page structure. 

But these are only a few things to keep in mind when making one’s product more accessible - there is much more. That’s why we created a series on web accessibility when working with Storyblok, covering a few of the many aspects of creating inclusive experiences on the web: 

• Headline Hierarchies
• ARIA Landmarks & Labels
• Keyboard accessibility
• Asset Meta Fields
• Appearance / Color Contrast Ratio

Got any feedback? Requests? Let us know - we’d love to hear how you are experiencing working with Storyblok and Web Accessibility!