A11y Async Button

Developer tool · Interactive example

Catch async button mistakes

This development-only checker scans your A11y Async Button markup for broken semantics, missing labels, invalid settings, and form issues—then explains how to fix each one. It reports problems without changing the page.

Quick facts

At a glance

Import path
a11y-async-button/addons/debug
Pattern
Developer diagnostics
Runtime behavior
Scans and reports only
Runtime deps
None

Live demo

Try the checker on a broken example

We placed several intentional accessibility and configuration mistakes in a hidden sample. Run the scan to see what the addon catches and the fix it recommends for every issue.

Debug report has not run yet.

    Try it

    Useful checks

    Example code

    Import only the debug addon

    import { createAsyncButtonDebugReport } from "a11y-async-button/addons/debug";

const report = createAsyncButtonDebugReport(document, {
  includeInfo: true,
  log: true
});

for (const finding of report.findings) {
  console.log(finding.code, finding.recommendation);
}

    Accessibility notes

    What changes for users

    Runtime behavior

    • The addon does not initialize buttons or forms.
    • The addon does not move focus, change ARIA, or write to storage.
    • Console logging happens only when requested.

    Findings

    • Errors identify markup that breaks the plugin contract.
    • Warnings identify likely user-experience or accessibility bugs.
    • Info findings point to optional polish such as state-specific text.