Accessibility Inspector

Runs axe-core against a host app, lists WCAG A/AA violations in a Solid panel, and highlights the element on hover.

Package: @devframes/plugin-a11y · framework: Solid + Vite

Hover to highlight the offending element

Generate prompts to fix issues

What it does

Three pieces, two browser-side:

Piece	Runs in	Role
Agent	the host app's page	runs axe-core, broadcasts the report, draws the highlight ring
Panel	the devtools iframe	Solid SPA: lists violations, highlights on hover
Node	the devframe backend	the get-config RPC (impact taxonomy), baked in static builds

Agent and panel talk over a same-origin BroadcastChannel, so the loop works live or static. The agent is the author-provided bridge (no host DOM access) — one module script scans, reports, and highlights.

In a hub

The agent is the a11y dock's client script: attach a11yAgentBundlePath as the dock's clientScript and the hub imports it into the page. It also mirrors each scan into the hub's messages feed — a summary plus one per rule:

import createA11yDevframe, { a11yAgentBundlePath } from '@devframes/plugin-a11y'

await ctx.install(createA11yDevframe(), {
  dock: { clientScript: { importFrom: `/@fs/${a11yAgentBundlePath}` } },
})

Outside a hub, a <script type="module"> boots the agent (no feed mirror).

Standalone

pnpx @devframes/plugin-a11y

Runs the panel alone at /__devframes_plugin_a11y/; load an agent script to drive a real page.

Mount into a Vite host

In Vite DevTools:

// vite.config.ts
import createA11yDevframe from '@devframes/plugin-a11y'
import { createPluginFromDevframe } from '@vitejs/devtools-kit/node'
import { defineConfig } from 'vite'

export default defineConfig({
  plugins: [
    createPluginFromDevframe(createA11yDevframe()),
  ],
})

Or swap in devframeVite(createA11yDevframe()) from @devframes/vite/single.

Programmatic

createA11yDevframe(options) returns a definition for any adapter:

import { createA11yDevframe } from '@devframes/plugin-a11y'

export default createA11yDevframe({
  port: 9899,
})

RPC surface

Namespaced devframes:plugin:a11y:*:

Function	Type	Returns
get-config	static	The impact taxonomy and the panel's BroadcastChannel coordinates.

Run the demo

The demo serves a broken page and panel from one origin:

pnpm -C plugins/a11y build       # build the panel + the agent bundle
pnpm -C plugins/a11y demo        # dev: live WebSocket RPC
pnpm -C plugins/a11y cli:build   # bake the static deploy (dist/static)
pnpm -C plugins/a11y demo:build  # static: baked RPC dump, no server

Hover a row to highlight the matching element.

Source

plugins/a11y