Build Accessible Web Experiences with Refactored and Storyblok
Storyblok is the first headless CMS that works for developers & marketers alike.
Awareness of the importance of web accessibility is increasing - and with good reason. For too long, people with disabilities have been overlooked. Developers especially have a responsibility to create inclusive experiences on the web—for everyone. Refactored is an agency who understands this responsibility. For them accessibility isn’t just about meeting a mandate, it’s the foundation for building a truly inclusive online experience. Their clients know that inclusivity is important to their bottom line—but at the heart of it, they want to do what’s right for their visitors and their staff.
However, website accessibility is complex and requires an investment of time and resources that at first can seem overwhelming. To address those challenges from the start of website planning and development, Refactored has created two practical solutions, firmly rooted in Storyblok best practices:
- Web Accelerator: A pre-built, complete website framework, continuously validated to meet the current international Web Content Accessibility Guidelines (WCAG) at both the code and configuration levels.
- Guided Web Accessibility Audit: An automated accessibility conformance scan paired with professional analysis and remediation planning.
With these two foundations in place, Refactored outlines the path to achieving accessibility by helping your organization:
- Understand accessibility requirements
- Ensure you have the right technology for your accessibility program
- Build accessibility into your Storyblok-based website
- Establish a long-term accessibility governance model
According to the U.S. Centers for Disease Control (CDC), 27% of people in the U.S. live with a disability that makes it difficult to access online information.
What does online inclusivity mean?
Some barriers to website accessibility seem obvious, like color contrast or legibility.
Other barriers aren’t as easy to imagine if we haven’t experienced them. For example, someone with neurodiversity challenges may have trouble focusing on content in a linear way, or they may read certain fonts better than others.
And inclusivity goes beyond meeting the needs of people who have disabilities. It also encompasses language or cultural barriers.
Modern Websites Serve People with Diverse Needs
Auditory: full or partial hearing loss, difficulty with background noise
Visual: low vision, blindness, color blindness, light sensitivity
Cognitive: learning disabilities, neurodiversity, behavioral and mental health disorders
Physical: muscular, sensory, joint, and pain disorders; any limited movement
Speech: difficulty with video chat, teleconferencing, or voice recognition technologies
Communication: language and cultural differences
A, AA, AAA: What do WCAG levels say about your site?
Web Content Accessibility Guidelines (WCAG) is the international standard for accessibility developed by the Worldwide Web Consortium (W3C).
As Storyblok Developer Relations Engineer Josefine Schaefer explains in her blog, the WCAG standard is designed to help you make your site:
- Perceivable
- Operable
- Understandable
- Robust
WCAG 2.1—the version that most web accessibility mandates currently refer to—includes a total of 78 criteria grouped into three conformance levels.
- Level A: These are the 30 most basic criteria—the minimum you must do for accessibility.
- Level AA: This level adds 20 criteria and represents the minimum you should do to achieve a broadly acceptable baseline of accessibility.
- Level AAA: At this level, you are meeting 28 additional criteria beyond Level AA. These are things you may want to do if you have an advanced site experience or are meeting a specific internal or external mandate.
In October 2023, WCAG 2.2—which adds nine new criteria—became the W3C’s recommended web standard. You may see more mandates moving to update to the current version.
Accessibility Toolbar: Improve User Experience
An accessibility toolbar—also known as an accessibility overlay—is a widget, plugin, or attachment that can be added to a website to allow users to customize and adjust elements to their needs.
A good toolbar can help you quickly improve your user experience, but it won’t make you compliant on its own.
Refactored recommends using the Assistive Toolbar from Recite Me. It goes beyond the basic screen reader and contrast toggles, adding thoughtfully designed reading aids, granular page customization, and AI-driven translations for over 100 languages—including 65 text-to-speech voices.
Site Audit: Discover where you stand
The first step to achieve accessibility is an automated site audit. Once again, the expert recommendation from Refactored is the Recite Me’s Web Accessibility Checker. It provides clear assessment of your overall accessibility compliance, prioritized listings of issues to fix, progress tracking, and reporting.
If your internal teams are new to accessibility or don’t have a lot of bandwidth, you may want some guidance—up front and possibly in an ongoing capacity. To address that need, Refactored offers a [Guided Website Accessibility Audit](https://www.refactoredmedia.com/connect/landing-pages/website-accessibility-audit/). We’ll support you in performing the scan and help you interpret the results, prioritize technical fixes, and establish a remediation plan.
Launching a new site in Storyblok?
Ensuring accessibility requires content modeling, thoughtful design, and solid coding practices.
A headless CMS solution like Storyblok can make achieving initial accessibility conformance easier. Then, with proper governance, it can also help you be more successful in maintaining accessibility standards over the long term.
When it comes to designing and launching a new website, accessibility is divided into three distinct considerations: content modeling, site design, and site construction.
In their Web Accelerator solution, Refactored’s website framework includes enhanced editor and tech team controls to ensure accessibility best practices are in place from the start—and easy to maintain.
Content Modeling
Building content structures is a core focus when you’re building a modern headless site. You can adopt certain parts of the accessibility standard as you develop the content components that make up the site.
For example, you can establish metadata fields—including alt text, meta descriptions, and aria labels—and require content editors to include content for these fields as they work.
Additionally, the way Storyblok structures content blobs in JSON allows for flexible markup styles that enable developers to interpret and display markup in ways that help achieve a more accessible result.
Site Design
From a design perspective it’s important for the creative team to be familiar with accessibility standards so that they can ensure that the assets they are creating meet compliance standards.
With accessibility top of mind, designers can ensure essentials such as proper color contrast, font size, and legibility of copy. They can also check for nuances such as including images that support copy on the page—but don’t include copy that’s essential to understanding the image.
And of course, an excellent UX design will reduce cognitive load on your site users with best practices such as:
Reducing content density
Ensuring CTAs and link styles are clear and easy to use
Enabling actions to be taken in multiple ways (such as navigation with a mouse or a keyboard)
Site Construction
Finally, it’s critical that your site planning and design are executed with the proper approach to coding of HTML and CSS.
Your developers must be familiar with accessibility standards so that they can build a website that can be easily consumed by screen readers.
- This includes:
- Ensuring proper document structure
- Building effective navigation and menus
- Providing ways to skip to content
- Managing site links, labels, and lists in ways that meet the WCAG standard
![](http://a.storyblok.com/f/88751/2880x1412/2875a4d665/image-alt-text.png/m/840x0/filters:quality(90))
Using a headless CMS like Storyblok ensures that content is decoupled from its presentation. This separation is crucial for maintaining accessibility as it prevents human authors from embedding HTML directly into content, which can lead to unmaintainable and invisible code.
To ensure compliance, educate your editors on this best practice and utilize your project's programming language to strip any HTML tags that may inadvertently be included in content.
Headings
Headings play a vital role in informing users about the content structure on a page, which is particularly important for assistive technologies. These technologies use headings for in-page navigation, so it's essential to use them hierarchically from highest to lowest without skipping levels.
Storyblok can enforce this by allowing only one <h1> per page, ensuring that any <h1> tags are generated in code rather than added by editors. For fields where editors can insert headings, like markdown or rich text editors, you can control and transform the output, ensuring consistent heading levels and preventing accessibility issues.
Accessible Iframes
Iframes are often used to embed videos from platforms like YouTube or Vimeo, which come with built-in keyboard controls, enhancing accessibility. In Storyblok, you can create a “video_embed” component with required fields for the URL and a descriptive title. This practice ensures that all embedded iframes have appropriate titles, improving navigability for users relying on screen readers. This approach can be extended to any iframe usage within your project.
Managing Alt Text for Images
In the asset library settings, you can make alt text a mandatory field, ensuring every image has a descriptive alt attribute. This requirement can be enforced in the general tab of your space's settings, significantly enhancing the accessibility of image content on your website.
Color Contrast Management
Proper color contrast is essential for users with visual impairments. To maintain accessibility, limit color choices for editors by using an option field instead of a color picker in Storyblok. This method ensures that all selectable colors have been tested for contrast compliance, preventing the selection of colors that could impair readability.
Editor Notes and Guidance
Providing editors with notes on how to use fields designed for accessibility can enhance compliance. Use the description attribute in field settings to offer brief, clear instructions. For example, explain the importance of alt text and provide examples directly within the visual editor, ensuring that editors understand and follow best practices.
Landmarks
Landmarks help communicate the structure of the page to users with disabilities. In a headless CMS setup, you can control these elements entirely within your app's code. If you’re generating regions dynamically, include fields to set the name of landmarks within components, ensuring consistency and accessibility.
Semantic Code
Semantic code is crucial for web accessibility. Using HTML elements appropriately, such as hierarchical heading tags and landmarks, improves navigation for screen readers and enhances overall user experience. This practice also benefits SEO and code maintainability, reducing bugs and errors.
Regulated Flexibility
Storyblok allows you to balance flexibility and control by restricting access and defining roles and permissions. This regulation ensures that content remains accessible without limiting editors' creative capabilities. For example, controlling headline hierarchies and ensuring sufficient color contrast are essential steps in maintaining accessibility standards.
Careful Nudging
Storyblok’s features can be used to nudge your team towards creating accessible content. Examples include adding explanatory notes, making alt text mandatory, and limiting component usage to maintain a semantic structure. These gentle reminders help maintain accessibility without stifling creativity.
Atomic Design
Following atomic design principles within Storyblok allows you to create reusable components that ensure a consistent and accessible design. By defining and controlling the scope of these components, you can maintain a coherent structure and brand identity, making it easier to build and scale accessible websites.
By incorporating these detailed tactics, Storyblok provides a robust foundation for building and maintaining accessible websites, ensuring compliance as your site adapts and scales over time.
When you’re building a website, you’re likely spending most of your upfront time building the basic framework—before you even get to the site UX and content. Refactored’s Web Accelerator solution gives you a complete Storyblok website framework, built with best practices in place and over 40 components that are 100% compliant with WCAG 2.2 AA—from the start. [We invite you to visit our website to learn more](https://www.refactoredmedia.com/web-accelerator/).
Maintaining your culture of online inclusivity
Just like any aspect of your website, accessibility isn’t a project you finish and put on a shelf. Your business evolves, content is added, new mandates emerge, and user needs change.
So you must have an accessibility practice that supports continuous improvement:
- Identify highest priority fixes and implement them first
- Create systems and workflows to ensure issues are reviewed and addressed over time
- Perform regular, periodic scans of your site as updates are made
- Track improvements
- Leverage reporting to demonstrate progress
When you follow this structure and take a methodical approach, you’ll see meaningful progress.
Building an inclusive online presence with Storyblok
Storyblok provides an unbeatable foundation for building and maintaining an inclusive website experience supported by best-in-class tools and processes.
To achieve the level of conformance you and your users need, align yourself with a partner that has both deep experience in Storyblok and deep understanding of your organizational needs.
The outcome will be a truly modern website with accessibility created in a way that makes it practical and sustainable to manage—for both your developers and your content editors.