A11y

最全面的网页无障碍覆盖小部件。只需一个 script 标签，即可为任何网站添加浮动式无障碍工具栏，提供 20+ 辅助功能，覆盖视觉、运动、认知和听觉障碍。

符合WCAG 2.1。

快速开始

在 HTML 中添加一行代码 —— 小部件自动初始化，无需额外的 JavaScript：

<script src="/path/to/c-a11y.min.js" defer></script>

或通过 npm 安装：

npm install @william-xu-web/c-a11y

import { init } from "@william-xu-web/c-a11y";
const widget = init({ lang: "zh", position: "bottom-left" });

// 移除小部件并清理所有事件监听器：
widget.destroy();

功能

视觉与显示

| 功能 | WCAG | 适用人群 | | ---------------------------- | -------- | ---------------- | | 字体大小（放大/缩小/重置） | 1.4.4 | 低视力、老年人 | | 高对比度（深色/浅色/反色） | 1.4.3 | 低视力 | | 深色模式 | 1.4.3 | 光敏感 | | 灰度 | 1.4.1 | 色盲 | | 色彩饱和度（滑块） | 1.4.1 | 色彩敏感 | | 文字间距 | 1.4.12 | 阅读障碍、低视力 | | 阅读障碍字体（OpenDyslexic） | 最佳实践 | 阅读障碍 | | 隐藏图片 | 最佳实践 | 认知障碍 | | 色盲模拟 | 1.4.1 | 开发者、意识教育 |

导航与阅读

| 功能 | WCAG | 适用人群 | | --------------------- | ------------ | ---------------- | | 键盘导航 | 2.1.1 | 运动障碍 | | 焦点指示器 | 2.4.7 | 运动障碍、低视力 | | 标题地图 / 目录 | 2.4.10 | 屏幕阅读器用户 | | 页面结构（ARIA 地标） | 2.4.1 | 屏幕阅读器用户 | | 阅读辅助线（标尺） | 最佳实践 | 阅读障碍、多动症 | | 行聚焦 / 内容遮罩 | 最佳实践 | 多动症、认知障碍 | | 大光标 | 最佳实践 | 运动障碍、低视力 | | 屏幕阅读器预览 | 1.1.1, 1.3.1 | 开发者 |

媒体与内容

| 功能 | WCAG | 适用人群 | | ---------------- | ------------ | ---------------- | | 悬停朗读（TTS） | 最佳实践 | 视障、低视力 | | 选中朗读（TTS） | 最佳实践 | 视障、低视力 | | 整页朗读（TTS） | 最佳实践 | 视障、低视力 | | 链接高亮 | 1.4.1, 2.4.4 | 低视力、认知障碍 | | 图片替代文本覆盖 | 1.1.1 | 视障、低视力 | | 停止动画 | 2.3.1, 2.3.3 | 癫痫、前庭障碍 | | 静音所有声音 | 1.4.2 | 听障、认知障碍 |

配置

<script>
  window.OpenA11yConfig = {
    position: "bottom-left", // 'bottom-left', 'bottom-right', 'top-left', 'top-right'
    lang: "zh", // 'zh', 'en'
    bottomOffset: 0, // 桌面端额外向上偏移的像素值
    mobileBottomOffset: 60, // 移动端（≤ 480px）额外向上偏移的像素值
    statementUrl: "/accessibility-statement", // 链接到已有的无障碍声明页面
    statementData: {
      orgName: "我的公司",
      orgPhone: "13088888888",
      orgEmail: "[email protected]",
      coordinatorName: "张三",
      lastAuditDate: "2026-01-15",
    },
  };
</script>

| 选项 | 类型 | 默认值 | 说明 | | -------------------- | ------ | --------------- | ------------------------------------------------------------------------------------------------------ | | position | string | 'bottom-left' | 小部件按钮位置：'bottom-left'、'bottom-right'、'top-left'、'top-right' | | lang | string | 自动检测 | 界面语言：'zh'、'en' | | bottomOffset | number | 0 | 桌面端（屏幕 > 768px）按钮相对于默认位置的额外向上偏移像素值。仅对底部位置生效。 | | mobileBottomOffset | number | 0 | 移动端（屏幕 ≤ 768px）按钮的额外向上偏移像素值。当网站有固定在底部的导航栏时很有用。仅对底部位置生效。 | | statementUrl | string | — | 已有无障碍声明页面的 URL | | statementData | object | — | 内置无障碍声明生成器的数据 |

语言

小部件界面支持 2 种语言，可在运行时切换：

• 中文 - zh
• 英语 - en

法规合规

WCAG 2.1

本小部件同时涵盖 WCAG 2.1 以下标准：

• 1.4.10 回流（Reflow）
• 1.4.12 文字间距
• 1.4.13 悬停或焦点时的内容
• 2.3.3 交互动画
• 4.1.3 状态消息

项目结构

src/
  c-a11y.js           主入口
  styles.js                所有 CSS（注入 Shadow DOM）
  i18n.js                  翻译文件（中文/英语）
  storage.js               localStorage 持久化
  utils.js                 共享工具函数
  modules/                 每个功能一个文件（共 24 个模块）
dist/
  c-a11y.min.js       压缩版 IIFE 包（约 89 KB）
  c-a11y.esm.js       供打包工具使用的 ES 模块
demo.html                  演示页面

架构

• Shadow DOM 隔离防止与宿主页面样式冲突
• 零运行时依赖 — 纯原生 JavaScript
• 模块模式 — 每个功能自包含，提供 enable() / disable() / toggle() 方法
• localStorage 持久化用户偏好，跨会话保留
• ARIA 实时区域 用于屏幕阅读器通知（WCAG 4.1.3）

浏览器支持

• Chrome 80+
• Firefox 78+
• Safari 14+
• Edge 80+

相关链接

• WCAG 2.1 规范