A11y Shield is a lightweight, Gutenberg-compatible WordPress plugin designed to help identify and resolve accessibility issues. It integrates real-time accessibility auditing into WordPress Gutenberg blocks using axe-core. In addition, it provides client-side temporal micro-scheduling for individual blocks, allowing you to set start and end visibility windows.
Warning
THIS IS AN EXPERIMENTAL PLUGIN.
- It is NOT suitable for production environments.
- It is a work in progress and subject to breaking changes.
- The developers are not responsible for any losses, site breakages, data corruption, accessibility fines, compliance issues, or other damages arising from the use of this software. Use entirely at your own risk.
- Real-Time Accessibility Auditor: Integrates
axe-corein the Gutenberg block editor. The scanner posts raw block content to the server in real-time, processes it using WordPress's native block rendering engine, and runs audits on the clean, static HTML representation. This avoids dynamic Gutenberg canvas DOM interference and natively flags contrast violations, missing alt attributes, heading hierarchy skips, empty/unlabeled links, unlabeled buttons, missing table headers, and duplicate ID attributes. - Temporal Micro-Scheduling: Content creators can define start and end visibility date/time windows for any block. Scheduled blocks are rendered to the DOM and processed on the fly using a highly optimized, client-side vanilla JavaScript engine that adjusts for client clock skew against server timestamps.
apply_filters( 'a11y_shield_supported_blocks', array $blocks )
Allows developers to restrict or extend which specific block slugs are targeted by the accessibility and temporal scheduling systems. Returns an empty array[]by default (meaning all blocks are supported).apply_filters( 'a11y_shield_temporal_css_class', 'a11y-shield-hidden' )
Overrides the default CSS class used to hide expired scheduled blocks on the frontend (styled asdisplay: none !important).apply_filters( 'a11y_shield_third_party_block_wrappers', array $selectors )
Allows mapping specific block names to outermost parent wrapper CSS selectors. Ensures that temporal scheduling hiding is applied to nested/third-party blocks safely.
do_action( 'a11y_shield_before_rendering_scheduled_block', $block_content, $block )
Fires on the frontend right before a scheduled block is evaluated and processed, enabling tracking, logging, or custom rendering integrations.
a11y_shield.outermost_wrapper_selector
Applied via Gutenberg'sblocks.getSaveContent.extraPropsfilter. Developers can tap into this filter to register specific structural overrides for custom properties.wp.hooks.addFilter( 'a11y_shield.outermost_wrapper_selector', 'my-theme/override-wrapper', ( extraProps, blockType, attributes ) => { if ( blockType.name === 'my/nested-block' ) { extraProps['data-a11y-shield-wrapper'] = '.my-outermost-container'; } return extraProps; } );
To build and compile CSS/JS assets, run the following commands:
-
Install PHP Dependencies:
composer install
-
Install Node Dependencies:
npm install
-
Build Assets:
npm run build
-
Watch Assets (Development):
npm run start
Run the testing and linting suites directly inside your terminal:
-
PHPUnit Suite (Unit & Integration):
vendor/bin/phpunit
-
Jest JS Suite (Filters & Editor React):
npm run test:js
-
PHP CodeSniffer (WordPress Style Linting):
composer lint:phpcs
-
PHP Code Beautifier (Auto-Fix Code Style):
composer lint:phpcbf
-
PHPStan (Static Analysis):
composer lint:phpstan