moinframe/kirby-accessibility-check

Kirby plugin to add accessibility checks

1.1.0 2026-07-24 16:07 UTC

Requires

• getkirby/cms: ^5.0
• getkirby/composer-installer: ^1.2

Requires (Dev)

• phpstan/phpstan: ^2.1
• phpstan/phpstan-deprecation-rules: ^2.0
• phpstan/phpstan-strict-rules: ^2.0

MIT

• Justus Kraft

• plugin
• cms
• check
• accessibility
• kirby

Published on Packagist.org on 2026-07-24 16:13 UTC

README

This plugin adds accessibility checking capabilities to your Kirby CMS powered website. With the panel button, editors can enable an accessibility overlay to easily spot issues in the frontend of your website. By default, the Accessibility quality assurance tool Sa11y is used and added via CDN. Additional providers such as Editoria11y can be enabled via configuration.

Features

• Adds accessibility check button to panel
• Only active when editor chooses to enable it (uses session)
• Automatically includes required assets when active

Installation

There are three options to install the plugin.

Download

Download and copy this repository to /site/plugins/accessibility-check.

Git submodule

git submodule add https://github.com/moinframe/kirby-accessibility-check.git site/plugins/accessibility-check

Composer

composer require moinframe/kirby-accessibility-check

Setup

This plugin registers a new panel view button you can use in your page blueprints.

# site/blueprints/pages/default.yml

buttons:
 # new button
 - accessibility-check
 # default buttons
 - preview
 - languages
 - settings
 - status

Configuration

You can configure the plugin in your site/config/config.php file:

return [
    // Enable/disable the plugin entirely
    'moinframe.accessibility-check.enabled' => true, // default: true

    // Which providers to render when the check is enabled.
    // Available: 'sa11y', 'editoria11y'
    'moinframe.accessibility-check.providers' => ['sa11y'], // default: ['sa11y']

    // Which Sa11y release to load ('latest' or a pinned version like '5.0.8')
    'moinframe.accessibility-check.sa11y.version' => 'latest', // default: 'latest'

    // Load Sa11y from the jsDelivr CDN. Set to false to self-host.
    'moinframe.accessibility-check.sa11y.cdn' => true, // default: true

    // When `cdn` is false, point this at your copy of Sa11y's `dist`
    // folder (no trailing slash). Required for self-hosting.
    'moinframe.accessibility-check.sa11y.assets' => '/assets/sa11y', // default: null

    'moinframe.accessibility-check.editoria11y.version' => 'latest', // default: 'latest'
    'moinframe.accessibility-check.editoria11y.cdn' => true,         // default: true
    'moinframe.accessibility-check.editoria11y.assets' => '/assets/editoria11y', // default: null
];

Providers

The plugin can render one or more accessibility tools ("providers") when an editor enables the check. Choose them with the providers option:

Name	Tool	Notes
sa11y	Sa11y	Default. WCAG checker overlay.
editoria11y	Editoria11y	Alternative editor-focused checker

Self-hosting Sa11y

To avoid the CDN, set sa11y.cdn to false and copy Sa11y's dist folder somewhere public (e.g. assets/sa11y/dist/...), then point sa11y.assets at it. The plugin expects the standard Sa11y layout below the base URL:

<assets>/css/sa11y.min.css
<assets>/js/lang/<lang>.umd.js
<assets>/js/sa11y.umd.min.js

For full control over the markup, you can still override the whole snippet at site/snippets/accessibility-check/providers/sa11y.php.

Self-hosting Editoria11y

Same idea for Editoria11y: set editoria11y.cdn to false and point editoria11y.assets at your copy of its dist folder. The expected layout is:

<assets>/css/editoria11y.min.css
<assets>/js/lang/<lang>.umd.js
<assets>/js/ed11y.umd.min.js

License

MIT

Credits

• Justus Kraft
• Accessibility quality assurance tool Sa11y
• Accessibility checker Editoria11y