# @devframes/plugin-a11y 中文文档

规范地址：https://npmcn.com/package/%40devframes/plugin-a11y/

版本：1\.3\.3
npm 元数据更新时间：2026-11-10T08:40:35.291Z
中文译文更新时间：2026-11-12T03:08:04.743Z
软件包许可：MIT

本文由上游 README 翻译，可能存在偏差，请结合原文核对 API、命令与配置。版权与许可归原作者所有。

原始 npm 页面：https://www.npmjs.com/package/%40devframes/plugin-a11y
原文对照：https://npmcn.com/package/%40devframes/plugin-a11y/?lang=original
项目主页：https://github.com/devframes/devframe#readme
源码仓库：https://github.com/devframes/devframe

## 关键信息（来自 npm 元数据）

- 包体积（解压后）：1.6 MB，18 个文件
- 模块格式：ES Module
- TypeScript 类型：包内自带
- 运行依赖：1 个
- peer 依赖：vite ^8\.0\.0，devframe 1\.3\.3，@devframes/plugin-a11y--assets 1\.3\.3
- 首次发布：2026-07-06T05:04:03.062Z
- 最新版本发布：2026-11-10T08:40:34.824Z
- 近 30 天下载量：9343（2026-10-12 至 2026-11-10，npm 官方下载统计）
- 已发布版本数：68（近 12 个月 68 个）

## 中文简介

内建的devframe用轴来审计用户应用,并突出页面中的访问问题.

## 安装

```sh
npm install @devframes/plugin-a11y
```

也可以使用：`pnpm add @devframes/plugin-a11y`、`yarn add @devframes/plugin-a11y`、`bun add @devframes/plugin-a11y`

## README

# @devframes/plugin-a11y (英语)

> 实验 这个devframe是实验性的,可能会在不发生重大版本突起的情况下改变,直到 它稳定.

一名无障碍视察员利用 [副总裁](https://npmcn.com/package/packages/devframe)它运行 [轴核](https://github.com/dequelabs/axe-core) 针对用户应用程序和 显示在 a [固态](https://www.solidjs.com/) 面板 :

-   **了解路线的跟踪**: 桶内违规 `location.pathname` 和音轨 在您浏览用户应用程序( 历史- API 补丁、 框架中立) 时, 它们会持续 内 `sessionStorage` 因此历史在标签会话中继续重载.
-   **盘子+分组违规**: 一个 Dashboard 标签( 总数、 严重性) 分类、每行盘点、扫描控制)和违规标签列表 每个有轨电车路线, 分组, 并标出活动路线 .
-   **选择 + 突出显示**: 徘徊预览违法元素;勾选 变量的复选框选择它,使牌具有不同的状态并绘制 全球数字徽章覆盖了页面中的所有元素. `<html>`编号 :`<body>` 目标得到一个角通知 而不是一个取景器填充环.
-   **生成固定提示**: 一个导航按钮收集选定的违反(规则) 元数据、 WCAG 标记、 文档以及每个元素的选取/标记/失败摘要, 按路由分组) 在一个对话框中组合成一个已粘贴准备的 AI 提示 .
-   **恒定扫描**: 一个DOM `MutationObserver` 加减 鼠标/键盘/touch recans,从Dash板可切换.
-   **WCAG 2.0-2.2 + 最佳做法**: 扩展轴标签集,并有最佳做法 规则标记和可过滤.
-   **控制台记录**:新发生的侵犯事件被记录(daddup)到 浏览器控制台.

扫描 + 突出显示环路的工作原理相同 服务器或作为烤制的静态构建.

## 如何运作

3个,其中2个是浏览器侧:

| 块 | 运行在 | 作用 |
| --- | --- | --- |
| **页面脚本** (单位:千美元)`src/inject`(中文(简体) ) | 用户应用程序的页面 | 运行轴核、 轨迹路径、 拥有聚合状态、 绘制预览 + 被绑定的环 |
| **小组讨论会** (单位:千美元)`src/spa`(中文(简体) ) | 脱衣舞女 | 实心SPA: Dashboard + 分组违规,火灾预览/pin/rescan |
| **节点** (单位:千美元)`src/index.ts`, (中文(简体) ), `src/node`, (中文(简体) ), `src/rpc`(中文(简体) ) | 节点侧 | `get-config` RPC(影响分类学+运行时配置):活于dev中,在静态建筑中烘烤 |

页面脚本和面板在 deframe 的页面内聊天 (单位:千美元)[`devframe/in-page-channel`](https://npmcn.com/package/packages/devframe/src/in-page-channel/index.ts), (中文(简体) ), 合同 [`src/shared/protocol.ts`](https://npmcn.com/package/%40devframes/plugin-a11y/src/shared/protocol.ts)),而不是编剧 RPC后端. 就是这个让直播循环继续运转 **两种模式**: 无 一半需要服务器才能到达另一半, 只有同一来源的握手在同一个 选项卡。 页面脚本拥有权威路由 ~ 报告映射作为频道的 共享状态, 它被重放到后加入面板中, 并在每个面板上作为补丁流出 改变,所以面板保持 它的纯质。 副总裁 RPC在顶上搭载了数据模型; `get-config` 是一个 `static` 函数,所以 解决 WebSocket in dev 和从静态建筑中烤起的垃圾堆 面板将其运行时配置切片转发到频道上的页面脚本,保留 页面脚本本身没有RPC依赖性.

devframe 故意不提供用户应用程序的 DOM 访问权限,所以 页面脚本是作者提供的桥接进入用户应用程序的页面. 在一个中心 页面脚本是 a11y 的码头 **客户端脚本**,定义通过 因此,枢纽服务 相同的来源和 `devframes: ['@devframes/plugin-a11y']` 工作时没有主机接线。 枢纽的客户端运行时间( E)`createDevframeClientRuntime` 从 `@devframes/hub/client`)然后将其导入主机页面并调用默认值 以客户端字符上下文导出。 一个主机也可以为模块本身服务(例如. 通过 `/@fs/…` 以附加方式 `a11yClientScriptBundlePath` 作为每个峰值 `clientScript`。由此推导,页脚本也 将活动路线扫描镜像到中心 **消息种子**: 一个摘要条目 通过装载 + 闲置的生命周期 + 每个违反规则的条目, 带有撞击图级、作为标签的WCAG标签和首个违法者 元素的选择器和边框(由 `@devframes/plugin-messages` 何时 中心将它挂起。 每个条目还附有 **导航动作**: 点击它 在信件面板中激活 a11y 码头(`hub:docks:activate`) 深相联 到规则+路由(或Dashboard,用于摘要)。 两个最小的枢纽实例 完全这样。 在中心外,一个 `<script type="module">` 用于同一捆绑的工作; 下面的演示 显示它( 没有中枢上下文, 因此种子镜只保留 ) .

## 配置

将选项传递到 `createA11yDevframe()` (从地面穿过) `get-config`所以他们 到达面板和页脚本:

```ts
createA11yDevframe({
  autoScan: true, //         rescan on debounced interaction (default true)
  logIssues: true, //        log new violations to the console (default true)
  defaultHighlight: false, // auto-pin a route's violations on first scan (default false)
  axe: {
    tags: [
      'wcag2a',
      'wcag2aa',
      'wcag21aa',
      'wcag22aa',
      'best-practice'
    ],
    runOptions: {}, //       extra axe `run` options merged over the defaults
  },
})
```

## 运行演示

演示为有意中断的主机页面和面板服务 **一个 来源** 所以他们分享频道.

```sh
pnpm -C plugins/a11y build       # build the panel + the page-script bundle
pnpm -C plugins/a11y demo        # dev: live WebSocket RPC → http://localhost:4477/

pnpm -C plugins/a11y cli:build   # bake the static deploy (dist/static)
pnpm -C plugins/a11y demo:build  # static: baked RPC dump, no server
```

打开 URL, 然后在面板中任意一行徘徊, 并在页面中显示匹配元素 获得焦点环(并滚动到屏幕外的视图). 两种演示模式 行为一致; 面板 `websocket` 编号 : `static` 标记是唯一的告诉.

独立, 没有用户应用程序 :

```sh
pnpx @devframes/plugin-a11y      # the published package, panel only, at /__devframes_plugin_a11y/
pnpm -C plugins/a11y dev         # from source: same, at /__devframes_plugin_a11y/
```

## 文件地图

| 路径 | 导出 | 目的 |
| --- | --- | --- |
| `src/index.ts` | `.` | `createA11yDevframe()` (同时也是默认导出),宣布页面脚本为它的码头客户端脚本; `a11yClientScriptBundlePath` 是那个模块吗 |
| `src/node/index.ts` | `/node` | `setupA11y(ctx, options?)` 用运行时配置注册 RPC 函数 |
| `src/cli.ts` | `/cli` | `createA11yCli()` 备份 `devframes_plugin_a11y` 选项 |
| `src/client/index.ts` | `/client` | `connectA11y()`,一个已键入的浏览器 RPC 客户端包 |
| `src/rpc/` | 内部 | `get-config` 静态 RPC + 类型安全客户登记册 |
| `src/shared/protocol.ts` | 内部 | 页面脚本 qq 面板在页面中的频道合同 (`A11yChannelProtocol`(中文(简体) ) |
| `src/inject/` | 内部 | 页面脚本(轴扫描、突出显示、中枢信息镜像) ~ `dist/inject/inject.js` |
| `src/spa/` | 内部 | 硬面板 SPA − `assets-pkg/dist` (船舶在 `@devframes/plugin-a11y--assets`(中文(简体) ) |
| `demo/` | 内部 | 同源主机页面+服务器(dev+静态模式) |
| `tests/` | 内部 | dev-server RPC + 静态建设垃圾堆 |

## 常见问题

### @devframes/plugin-a11y 是什么？

内建的devframe用轴来审计用户应用,并突出页面中的访问问题\.

### 如何安装 @devframes/plugin-a11y？

在项目目录运行 npm install @devframes/plugin-a11y，或使用 pnpm add / yarn add / bun add。它还需要宿主项目提供 peer 依赖：devframe（1\.3\.3）。npm 7 及以上与 pnpm 8 及以上默认会自动安装必需的 peer 依赖，Yarn 需要手动安装。它还提供命令行工具 devframes\_plugin\_a11y，可以用 npx devframes\_plugin\_a11y 直接运行。

### @devframes/plugin-a11y 支持 TypeScript 吗？

支持。包内自带 TypeScript 类型声明（package\.json 声明了 types 入口），安装后即可获得类型提示，无需再安装 @types 包。

### @devframes/plugin-a11y 支持 ESM 还是 CommonJS？

以 ES Module 形式发布，推荐使用 import 引入。在 CommonJS 项目中，Node\.js 20\.19\+ / 22\.12\+ 可以直接 require\(\) 不含顶层 await 的 ES Module，更早的版本需要改用动态 import\(\)。

### @devframes/plugin-a11y 可以商用吗？

@devframes/plugin-a11y 使用 MIT 许可。宽松许可：允许商业使用、修改和再分发，通常只需在分发时保留原版权与许可声明。以上为概括，不构成法律意见，请以许可原文为准。

### @devframes/plugin-a11y 的下载量有多少？

根据 npm 官方下载统计，@devframes/plugin-a11y 在 2026/10/12 – 2026/11/10 这 30 天内被下载 9,343 次，日均约 311 次。下载量会把 CI 构建、镜像同步和作为其他包依赖的安装一并计入，适合横向比较热度，不能直接等同于使用人数。

### @devframes/plugin-a11y 还在维护吗？

最新版本 1\.3\.3 发布于 2026/11/10（1 天前）；至今共发布 68 个版本，其中过去 12 个月发布了 68 个；首次发布于 2026/07/06。发布频率只是参考信号：功能稳定的工具可能很少需要更新，建议结合源码仓库的 issue 和提交记录判断。