前端无障碍设计检查清单

从语义结构、键盘操作、对比度和动态提示提升可访问性。

核心思路

优先使用原生按钮、链接与表单元素，确保焦点顺序合理且清晰可见。图片提供有意义的替代文本，装饰图片使用空文本。

落地步骤

弹窗要管理焦点并支持 Escape 关闭。用键盘和屏幕阅读器完成一次核心流程，比只跑自动检查更可靠。

验证清单

实施后不要只确认“能运行”，还应检查错误率、延迟、资源占用和异常路径。把验证命令、预期结果和回滚方式写进变更记录，后续维护会轻松很多。

小结

好的工程实践不是堆叠工具，而是用清晰边界、可观察结果和可逆变更降低长期成本。先解决最重要的问题，再逐步自动化。

可执行实践

使用语义 HTML，保证键盘可完成核心流程、焦点顺序合理且可见。表单 label 与错误提示关联，图片提供有意义 alt，动态状态使用适当 live region。

验证与退出条件

自动扫描后仍要手工完成键盘和屏幕阅读器测试。弹窗打开时移动焦点、关闭时归还焦点，并测试放大、深色模式和减少动画偏好。

实践场景

以“让一个表单能被键盘和读屏稳定使用”为例。实施前先保存当前版本、配置和关键指标基线，写明成功条件与停止条件；涉及生产数据或外部写入时，先在隔离环境验证。

分步实施

使用原生 label、button 和 heading 语义；焦点顺序与视觉顺序一致，错误信息通过描述关系关联字段。每完成一步都记录可观察结果，不把命令返回零等同于业务正确。

故障演练

只用键盘完成提交，使用读屏检查名称与状态，并测试 200% 缩放、减少动画和高对比度。演练应使用可清理的测试数据，并验证告警、日志和恢复路径，而不只是确认系统最终又能访问。

观测与回滚

跟踪自动检查与人工任务通过率；组件改造出现阻塞时回退单个组件而非关闭全站语义。变更单中应写清负责人、观察窗口、阈值和回滚触发器，避免故障发生后再临时争论。

完成后把使用的版本、关键命令、观测窗口和结果写入变更记录。没有验证证据的“已完成”不能作为上线结论。

第二轮实践复核

可复用交付物： 键盘任务清单、读屏记录和自动扫描报告。复用时先固定软件版本、依赖锁文件、测试数据规模和运行环境；文章中的命令包含占位符，必须替换成自己的非生产目标后再执行。

最低验证： 不使用鼠标完成主要任务，并检查焦点可见、标签关联与错误提示

执行记录要保存命令、退出码、关键输出、观察窗口和回滚结果。若验证会产生写入，先使用隔离环境或 dry-run；任何失败都不能通过扩大权限、关闭校验或跳过测试来“解决”。

完整实战：可访问的异步表单

以“创建项目”表单为例，验收目标不是扫描工具零告警，而是用户只用键盘、放大页面或使用读屏时仍能理解错误并完成提交。

<form aria-labelledby="create-title" novalidate>
  <h2 id="create-title">创建项目</h2>

  <label for="project-name">项目名称</label>
  <input
    id="project-name"
    name="name"
    required
    aria-describedby="name-hint name-error"
    aria-invalid="true"
  >
  <p id="name-hint">2～40 个字符</p>
  <p id="name-error" role="alert">请输入项目名称</p>

  <button type="submit">创建</button>
  <p role="status" aria-live="polite"></p>
</form>

标签、错误和帮助文字需要通过 ID 建立程序关系；placeholder 不能代替 label。提交失败后把焦点移到错误摘要，摘要中的链接再把焦点带到具体字段。提交成功或后台状态变化使用 role="status" 的礼貌播报，避免每次输入都打断读屏。

弹窗与焦点管理

弹窗打开时将焦点放到标题、首个输入或最安全的操作；Tab 不应跑到遮罩后的页面；关闭后回到触发按钮。Escape 是否关闭取决于操作风险，不能让“确认付款”之类的流程被误触取消。视觉隐藏文本要使用可访问的 CSS 技术，不能用 display:none 后仍期待读屏朗读。

测试维度	操作	通过条件
键盘	Tab、Shift+Tab、Enter、Space、Escape	顺序符合视觉与任务逻辑，无焦点陷阱
200%/400% 缩放	缩放并完成表单	内容不被裁切，不依赖双向滚动
读屏	浏览标题、字段、错误和状态	名称、角色、状态与错误均可理解
高对比/强制颜色	切换系统模式	焦点、边界和选中态不只靠颜色
动效偏好	开启减少动态效果	非必要动画停用，操作信息不丢失

自动化可以检查缺少 label、无效 ARIA 和部分对比度问题，但无法证明焦点顺序合理、替代文本传达了正确含义，或读屏用户能完成任务。CI 使用静态规则和浏览器测试，发布前仍要走一遍关键任务手工脚本。

回归发现阻断性问题时，优先关闭新组件或回退交互，不要用删除 ARIA 属性“消除告警”。为每个问题保存页面、浏览器、辅助技术版本、复现按键与实际播报，才能让修复可重复验证。

一手资料

资料与版本边界复核日期：2026-08-22。工具行为可能演进，实施前以锁定版本对应的官方文档为准。