puck-plugin-accessibility-checker

A comprehensive accessibility checker plugin for Puck Editor that integrates axe-core to identify and report accessibility issues directly within your editor interface.

Features

• Real-time Accessibility Scanning - Automatically analyzes your Puck editor content for accessibility issues
• Powered by axe-core - Uses the axe-core accessibility testing engine
• WCAG Compliance - Checks against WCAG 2.0, 2.1, and 2.2 guidelines
• Detailed Reports - Categorizes issues by severity (violations, potential violations, recommendations)
• Interactive UI - Expandable sections, issue cards with detailed information, and visual indicators
• Element Highlighting - Click on issues to highlight affected elements in the editor
• Zero Config - Works out of the box with sensible defaults

Installation

Install the plugin using your preferred package manager:

npm install puck-plugin-accessibility-checker

yarn add puck-plugin-accessibility-checker

pnpm add puck-plugin-accessibility-checker

Peer Dependencies

This plugin requires the following peer dependencies:

• @puckeditor/core ^0.21.1
• lucide-react >=0.15.12
• react ^17.0.0 || ^18.0.0 || ^19.0.0

These are typically already installed if you're using Puck Editor.

Usage

Basic Setup

1. Import the plugin and styles:

Import the styles separately

import { Puck } from '@puckeditor/core';
import accessibilityCheckerPlugin from 'puck-plugin-accessibility-checker';
import 'puck-plugin-accessibility-checker/styles.css';

function Editor() {
  return <Puck config={config} data={initialData} plugins={[accessibilityCheckerPlugin]} />;
}

2. Access the plugin in the Puck UI:

The accessibility checker will appear as a tab in the Puck sidebar with the label "A11y" and a person icon. Click the tab to view accessibility issues in real-time as you edit your content.

Development

Building the Plugin

# Production build
npm run build

# Development mode with watch
npm run dev

Build outputs are generated in the dist/ directory:

• index.js / index.cjs - Plugin code (ESM and CommonJS)
• index.d.ts / index.d.cts - TypeScript type definitions
• styles.css - Compiled stylesheet
• Source maps for all files

Troubleshooting

Styles Not Loading

If the plugin appears unstyled:

1. Verify you've imported the CSS:

   import 'puck-plugin-accessibility-checker/styles.css';

2. Check your bundler configuration supports CSS imports

3. Ensure the import appears before your main component renders

TypeScript Errors

If you encounter module resolution errors:

// Add to your global.d.ts or tsconfig.json
declare module 'puck-plugin-accessibility-checker';
declare module 'puck-plugin-accessibility-checker/styles.css';

Contributing

Contributions are welcome! Please:

1. Fork the repository
2. Create a feature branch
3. Make your changes
4. Submit a pull request

Report issues at: https://github.com/tlahmann/puck-plugin-accessibility-checker/issues

License

GPL-3.0 © Tobias Lahmann

This plugin is licensed under the GNU General Public License v3.0. See the LICENSE file for details.

Acknowledgments

• Built for Puck Editor by Measured
• Powered by axe-core by Deque Systems
• Icons from Lucide React