跳转到使用指南
screen-reader-testing作者 Seth Hobson

Screen Reader Testing Skill.

Claude Code 和 Codex 的设计审查 skill:使用 VoiceOver、NVDA 和 JAWS 屏幕阅读器测试 Web 应用。

  • Design Review & Accessibility
  • 审查报告
wshobson/agents · plugins/accessibility-compliance/skills/screen-reader-testing/SKILL.mdSKILL.md
--- name: screen-reader-testing description: Test web applications with screen readers including VoiceOver, NVDA, and JAWS. Use when validating screen reader compatibility, debugging accessibility issues, or ensuring assistive technology support. --- ## When to Use This Skill ## Core Concepts ## VoiceOver (macOS) ## VoiceOver Testing Checklist ## NVDA (Windows) ## NVDA Test Script
前言和章节标题读取自上游文件,时间为 2026-09-14 · 完整内容 12,020 字符

01 功能说明

screen-reader-testing Skill 在 Claude Code 和 Codex 中的作用

摘要、工作流与产物,均读自该 skill 的 SKILL.md。

来自 SKILL.md读取于 2026-09-14 · 非实际运行记录

以 skill 自身的术语

在 macOS、Windows、iOS 和 Android 平台上,使用 VoiceOver、NVDA、JAWS、TalkBack 和 Narrator 屏幕阅读器测试 Web 应用程序。通过实际屏幕阅读器进行实机测试,验证屏幕阅读器兼容性、调试辅助技术问题,并确保 ARIA 实现正确。

涵盖导航、表单、动态内容通知、焦点管理和模态对话框。提供特定平台的命令、测试清单和常见无障碍模式的代码示例。强调在不同屏幕阅读器模式(浏览、焦点、应用程序)下进行测试,并优先使用语义化 HTML,将 ARIA 作为补充增强。

它产出什么

  • VoiceOver 测试清单,涵盖页面加载、导航、链接、表单、动态内容和表格
  • NVDA 测试脚本,提供关于初始加载、地标、标题、表单、交互元素和动态内容的分步说明
  • 展示无障碍模式的 HTML 代码示例,并针对未标注的按钮、未播报的动态内容、表单错误等常见问题给出修复方案
  • 用于焦点管理的 JavaScript 代码,包括模态对话框、焦点陷阱和标签界面的键盘导航
查看示例提示词 ↗

工作方式

  1. 01
    按平台测试主流屏幕阅读器

    在 Windows 上使用 NVDA 配合 Firefox(占比 31%)、在 macOS 和 iOS 上使用 VoiceOver 配合 Safari(占比 15%)、使用 JAWS 配合 Chrome(占比 40%)、在 Android 上使用 TalkBack(占比 10%),以及使用 Narrator 配合 Edge(占比 4%)。

  2. 02
    使用屏幕阅读器专属命令进行导航

    执行诸如 VO+右箭头(VoiceOver 元素导航)、H(NVDA 标题跳转)、Insert+F7(JAWS 链接列表)以及双指滑动(TalkBack 滚动)等命令。

  3. 03
    在浏览模式和焦点模式下测试

    验证屏幕阅读器能否正确地在用于阅读内容的浏览模式与用于操作表单控件的焦点模式之间切换,并留意模式切换的语音提示。

  4. 04
    验证语义结构和 ARIA

    检查标题是否可通过转子或元素列表被发现,地标是否正确标注,实时区域是否会宣读更新内容,以及 dialog、tab、progressbar 等角色是否正确实现。

  5. 05
    验证焦点管理和键盘交互

    确保表单提交后焦点移动到错误提示处,模态框能正确捕获焦点并在关闭时将焦点返回,且标签界面能响应方向键、Home 和 End 键。

  6. 06
    测试动态内容通知

    触发内容更新,确认带有 aria-live="polite" 的 role="status" 会在当前语音播报完成后宣读变更,而 role="alert" 会立即打断播报。

02 找到适合场景

何时使用 screen-reader-testing Skill

在 Claude Code 或 Codex 中使用 screen-reader-testing skill 进行此类设计审查。适用范围和限制来自该 skill 自身的文件。

适合场景

  • 验证 Web 应用程序能否与屏幕阅读器软件正确配合工作
  • 测试 ARIA 角色、状态和属性是否正确实现
  • 调试影响辅助技术用户的问题
  • 确保表单控件具备正确的标签和错误通知,从而具备可访问性
  • 测试动态内容更新是否会向屏幕阅读器用户宣读

了解边界

  • 仅依靠视觉检查来验证无障碍性
  • 仅测试成功路径,而不验证错误状态和边界情况
  • 跳过 iOS 和 Android 上的移动端屏幕阅读器测试

03 Skill 内部

screen-reader-testing Skill 给 Claude Code 和 Codex 的规则

SKILL.md 为 Agent 设定的 8 条具体指令、默认值与限制——文件中真正改变结果的部分。

  1. 使用真实的屏幕阅读器测试,而非模拟器

    始终使用真实的屏幕阅读器软件(VoiceOver、NVDA、JAWS、TalkBack、Narrator)进行测试,而不是模拟工具或仿真器。

  2. 优先使用语义化 HTML,ARIA 只是补充

    先用原生 HTML 元素构建界面,再添加 ARIA 属性。ARIA 增强语义化 HTML,但不能替代它。

  3. 最低覆盖范围:NVDA+Firefox、macOS 与 iOS 上的 VoiceOver+Safari

    至少要在 Windows 上用 NVDA 配合 Firefox、在 macOS 上用 VoiceOver 配合 Safari、在 iOS 上用 VoiceOver 配合 Safari 进行测试,才能认为应用已通过验证。

  4. 在浏览模式和焦点模式下都要测试

    确认在浏览模式(使用方向键阅读内容)和焦点模式(与控件交互)下的体验,因为屏幕阅读器会自动或手动在两者之间切换。

  5. 在屏幕阅读器测试之前先进行纯键盘导航测试

    先完成纯键盘测试,因为它是屏幕阅读器可访问性的基础,并能早期发现交互问题。

  6. 验证单页应用的焦点管理

    确保在内容动态变化时正确管理焦点,尤其是在页面切换无需完全重新加载的 SPA 中。

  7. 切勿只用一种屏幕阅读器测试

    只用一种屏幕阅读器进行测试是不够的。不同的屏幕阅读器在各平台上有不同的行为和使用模式。

  8. 始终测试动态内容和错误状态

    不要跳过对动态更新内容的测试,也不要只测试正常路径。动态内容和错误处理是最常见的可访问性问题来源。

04 投入使用

在 Claude Code 或 Codex 中安装 screen-reader-testing

一条 npx skills add 命令,然后在你的 Agent 中执行第一个任务和对结果的清单检查。

向 Claude Code、Codex 或你的 Agent 添加 screen-reader-testing

在你的项目中运行;安装程序会询问要把它添加到哪个 Agent。

Terminal
npx skills add https://github.com/wshobson/agents --skill screen-reader-testing

用于 plugins/accessibility-compliance/skills/screen-reader-testing/SKILL.md 的通用 skills CLI 形式;仓库可能会记录其自身的路径。

为 Skill 提供第一个设计审查任务

按 skill 自身的术语撰写;把括号中的部分换成你的内容。

Starter prompt
Test the [checkout form] on [staging.example.com] with NVDA and VoiceOver to verify that all field labels are announced, required field indicators are read correctly, validation errors are communicated when the form is submitted with invalid data, and focus moves to the first error. Also confirm that the loading state during payment processing is announced and the success confirmation is read by the screen reader.

来源:依据 SKILL.md,按 skill 自身的术语撰写。

检查首次结果

SKILL.md 本身如何描述正确的结果:

  • 验证页面加载时会朗读页面标题
  • 确认可以通过转子(VoiceOver)或元素列表(NVDA、JAWS)发现所有标题
  • 检查标签是否与其关联的输入字段一起被朗读
  • 确保表单提交无效数据时会朗读错误信息
  • 验证焦点在模态对话框内被正确锁定,且无法逃出

在 OpenDesign 中从其 SKILL.md 链接导入 screen-reader-testing:Plugins → Add → Skill → Import from link,然后在顶部栏中选择它。

05 开源、可追溯

来源、许可与验证

本页面事实的来源,以及最后检查时间。

Repository
github.com/wshobson/agents 分支 main
Skill 文件
plugins/accessibility-compliance/skills/screen-reader-testing/SKILL.md 验证时记录的内容校验和;提交 4236bb9
License
MIT 来自 LICENSE。
仓库星标数
39,635 GitHub 快照拍摄于 2026-09-14,针对整个 wshobson/agents 仓库,该仓库在此目录中包含 18 个 skills。不是 screen-reader-testing 的评分或使用次数。
已由 OpenDesign 验证
2026-09-14 已检查源文件、路径、许可文本和 star 数量。未内置在 OpenDesign 主程序(检查日期 2026-08-28);本页面未记录实际运行。

SKILL.md 内部

  1. 何时使用此 skill列出验证兼容性、测试 ARIA、调试辅助技术以及验证表单和导航等场景
  2. 核心概念涵盖按平台和使用场景分类的主要屏幕阅读器、最低测试优先级,以及浏览模式、焦点模式与应用模式的区别
  3. VoiceOver(macOS)设置说明、包含修饰键的常用命令、转子导航、测试清单,以及常见 HTML/ARIA 问题的修复方法
  4. NVDA(Windows)设置与命令、标题与地标导航、浏览模式与焦点模式切换,以及分步测试脚本
  5. JAWS(Windows)常用命令,包括虚拟光标、各类元素的快捷键、表单模式,以及表格导航快捷键
  6. TalkBack(Android)设置开关、用于导航和激活的触摸手势,以及阅读控制粒度选项
  7. 常见测试场景包含代码的无障碍模式,涵盖具有焦点陷阱的模态对话框、实时区域,以及支持键盘操作的标签页界面
  8. 调试技巧用于记录元素的可访问名称、角色、状态以及屏幕阅读器所感知的可见性的 JavaScript 函数
  9. 最佳实践涵盖实际测试、语义化 HTML 优先、模式测试、焦点管理,以及避免仅用单一屏幕阅读器验证等注意事项
Skill 自身的描述
"使用屏幕阅读器(包括 VoiceOver、NVDA 和 JAWS)测试 Web 应用程序。用于验证屏幕阅读器兼容性、调试无障碍问题或确保辅助技术支持。"

SKILL.md 中的前置描述。完整文件约 12,020 个字符。在 GitHub 上阅读完整文件。

屏幕阅读器测试

在真实设计评审任务上运行 screen-reader-testing。

下载 OpenDesign,从其 SKILL.md 链接导入 screen-reader-testing,粘贴上方的提示词,在查看结果前先阅读计划。

终端
npx skills add https://github.com/wshobson/agents --skill screen-reader-testing

OpenDesign 桌面客户端

一套设计系统,让每一次创作都保持品牌一致

在完整的 Vibe Design Workspace 中,用同一套品牌规则生成网页、PPT、可交互原型、数据看板、图像与 HTML 视频。连接本地 Codex、Claude Code、Cursor 等编程助手,即可免费创作。

  • 覆盖网页、PPT、原型、数据看板、图像与视频
  • 140+ 设计系统,以及完整模板与技能库
  • 连接本地 Codex 与 21+ 款编程助手 · 免费使用
免费下载

支持 macOS 与 Windows