Accessibility Checker built into Storyblok

Super proud and happy to announce that as of this week, we have an Accessibility Checker built into the Visual Editor of Storyblok. Big kudos to Jessica, Ronny & Jakub, who made all of this possible 💛

New, Built-in Accessibility Checker in the Visual Editor

This new feature can be found on the right-hand side in the Visual Editor side navigation panel, below the "Tools" section.

Upon opening the "A11y" tab, we are running a check behind the scenes to see if the Accessibility Checker package has already been set up and is ready to go. If not, the user is guided through the setup. If the package is setup, you are ready for running the first automated accessibility check.

Setting up the Accessibility Checker

The Accessibility Checker needs to be set up on the code side once before editors can use the feature in the Visual Editor. The Accessibility Checker is using axe-core under the hood and works with any JavaScript framework.

To find out more about how to set up the Accessibility Checker, please check the Storyblok docs.

Running your first Accessibility Check

The Accessibility Checker package lets users run automated accessibility check directly in the Visual Editor. Users can configure the WCAG version (2.0 - 2.2) and level of accessibility (A or AA), as well as opt in for testing for best practices.

After setting up the package, you can select "Check Story".

The results are presented in three categories: "Violations", "Warnings" (which highlight elements which have to be confirmed manually) as well as a list of "Passed" items, which shows a full overview of all rules which have been tested.

For each category, the results are organized by topic. The topics include:

• Aria
• Alt text
• Color
• Forms
• Keyboard
• Language
• Name, role, value
• Semantics
• Sensory and visual cues
• Structure
• Tables

Inspecting & Fixing Accessibility Issues in Storyblok

If an accessibility issue was found on a Storyblok element, it can be highlighted and inspected directly in the Visual Editor. Clicking on the highlighted element will open the corresponding field, so that the user may fix the accessibility issue right away, directly in the Visual Editor.

Accessibility issues which are not part of a Storyblok element are still shown in the list of results, but can not be highlighted or fixed in the Visual Editor. For each element, a code snippet is provided, so that developers can identify the element in question right away.

Important Note: Automated accessibility testing can only correctly identify a limited number of accessibility issues. Therefore, it should only be complimentary to manual testing and always be verified.

Next steps

This is just the first iteration of our Accessibility Checker, we are already buzzing with ideas on how to build onto it's capabilities. In the backlog are, among other things an option for a customizable download, configurations directly in the Storyblok UI and severity ratings on each violation.

Can you think of anything else which would make this more useful to your day to day work? Please let us know, we'd love to hear your thoughts!