Build Accessible Web Experiences with Refactored and Storyblok

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

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.

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.

Three steps to improving website accessibility

With a combination of practical tools and consistent remediation, you can demonstrate progress toward the goal of achieving and maintaining Level AA conformance.

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

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.

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.