Built-in Accessibility Checker

The Accessibility Checker adds an A11y tab to the right-hand sidepanel of the Visual Editor. Developers enable it once in the project, and editors can then check the page they are working on without leaving Storyblok. Findings are sorted by topic and who can resolve them, so next steps are clear immediately.

What’s new?

• One-time setup: Developers install @storyblok/accessibility-checker from npm and enable it in code that runs in the browser. It starts only inside the Visual Editor and works with any JavaScript-based framework.
• Configurable standards: The ruleTags option controls which rules run, for example WCAG 2.2 AA. By default, the checker runs WCAG 2.0, 2.1, and 2.2 rules at levels A and AA, plus best-practice rules.
• Automated checks in the Visual Editor: Editors run a check from the A11y tab. Results are split into violations, warnings that need a manual review, and passed checks.
• Highlight and fix in Storyblok: Issues linked to a Storyblok component can be highlighted in the Visual Editor. Selecting the highlighted element opens the corresponding field, so editors can fix issues such as missing labels, missing alternative text, or buttons without text right away.
• Issues to resolve in code: Issues without a linked Storyblok component, can’t be highlighted or fixed in Storyblok. They are listed with the affected code so developers can locate them.

The Accessibility Checker is available on all plans. Checks run in the Visual Editor only, not in the form editor. Automated checks detect only a subset of accessibility issues and don’t replace manual testing.

Learn more in the developer documentation and the Visual Editor manual.