agent-skills可访问性检查清单：构建人人可用的应用

【免费下载链接】agent-skills Production-grade engineering skills for AI coding agents. 项目地址: https://gitcode.com/GitHub_Trending/agentskill/agent-skills

agent-skills是一套面向AI编码代理的专业工程技能集合，其中包含了全面的可访问性检查方案，帮助开发者构建人人可用的应用。通过遵循agent-skills提供的可访问性标准，你的应用将能服务更广泛的用户群体，包括残障人士和使用辅助技术的用户。

为什么可访问性对现代应用至关重要 🚀

在数字时代，可访问性不再是可有可无的功能，而是构建包容性产品的基本要求。根据世界卫生组织统计，全球约有10亿人存在某种形式的障碍，这意味着不符合可访问性标准的应用可能会将五分之一的潜在用户拒之门外。

agent-skills提供的可访问性检查方案基于WCAG 2.1 AA标准，这是国际公认的网页可访问性基准。通过实施这些标准，你不仅能扩大用户群体，还能提升整体用户体验，改善SEO表现，并确保符合全球各地的法规要求。

开始使用agent-skills可访问性检查清单

agent-skills的可访问性检查清单位于项目的references/accessibility-checklist.md文件中，可与frontend-ui-engineering技能配合使用，为你的前端开发提供全面的可访问性指导。

核心检查类别

键盘导航检查 ✅

键盘导航是可访问性的基础，确保所有用户（包括使用屏幕阅读器的用户）都能完全操作你的应用：

• 所有交互元素可通过Tab键聚焦
• 焦点顺序遵循视觉和逻辑顺序
• 焦点状态可见（如聚焦元素的轮廓或高亮）
• 自定义组件支持键盘操作（Enter键激活，Escape键关闭）
• 无键盘陷阱（用户始终可以Tab离开组件）
• 页面顶部提供"跳转到内容"链接（至少在键盘聚焦时可见）
• 模态框打开时捕获焦点，关闭时返回焦点

屏幕阅读器兼容性检查 🔊

屏幕阅读器是视障用户的主要导航工具，确保你的应用能被正确解读：

• 所有图片都有alt文本（装饰性图片使用alt=""）
• 所有表单输入都有关联标签（使用<label>或aria-label）
• 按钮和链接有描述性文本（避免使用"点击这里"等模糊文本）
• 纯图标按钮提供aria-label
• 页面只有一个<h1>且标题不跳级
• 动态内容变化有aria-live区域宣布
• 表格使用<th>表头并设置scope属性

视觉可访问性检查 🌈

确保应用对有视觉障碍的用户友好：

• 文本对比度≥4.5:1（普通文本）或≥3:1（大文本，18px+）
• UI组件与背景对比度≥3:1
• 不单独依靠颜色传递信息
• 文本可调整至200%大小而不破坏布局
• 没有每秒闪烁超过3次的内容

表单可访问性检查 📝

表单是用户交互的关键部分，需要特别注意可访问性：

• 每个输入都有可见标签
• 必填字段有明确指示（不单独依靠颜色）
• 错误消息具体且与字段关联
• 错误状态通过多种方式可见（图标、文本、边框）
• 表单提交错误有汇总且可聚焦
• 已知字段使用自动完成（如type="email" autocomplete="email"）

实用HTML模式示例

agent-skills提供了多种符合可访问性标准的HTML模式，帮助你快速实现无障碍组件：

按钮与链接的正确使用

<!-- 使用<button>用于操作 -->
<button onClick={handleDelete}>删除任务</button>

<!-- 使用<a>用于导航 -->
<a href="/tasks/123">查看任务</a>

<!-- 切勿使用div/span作为按钮 -->
<div onClick={handleDelete}>删除</div>  <!-- 错误示例 -->

表单标签关联

<!-- 显式标签关联 -->
<label htmlFor="email">电子邮箱</label>
<input id="email" type="email" required />

<!-- 隐式包裹 -->
<label>
  电子邮箱
  <input type="email" required />
</label>

<!-- 隐藏标签（优先使用可见标签） -->
<input type="search" aria-label="搜索任务" />

可访问性测试工具

agent-skills推荐以下工具来测试和验证应用的可访问性：

# 自动化审计
npx axe-core          # 程序化可访问性测试
npx pa11y             # CLI可访问性检查器

# 浏览器中
# Chrome DevTools → Lighthouse → Accessibility
# Chrome DevTools → Elements → Accessibility tree

# 屏幕阅读器测试
# macOS: VoiceOver (Cmd + F5)
# Windows: NVDA (免费) 或 JAWS
# Linux: Orca

ARIA Live Regions快速参考

ARIA Live Regions用于向屏幕阅读器用户宣布动态内容变化：

Value	行为	用途
aria-live="polite"	在下一个暂停时宣布	状态更新，保存确认
aria-live="assertive"	立即宣布	错误，时间敏感的警报
role="status"	与polite相同	状态消息
role="alert"	与assertive相同	错误消息

常见反模式及解决方案

避免这些常见的可访问性陷阱：

反模式	问题	解决方案
使用div作为按钮	不可聚焦，无键盘支持	使用<button>
缺少alt文本	图片对屏幕阅读器不可见	添加描述性alt
仅用颜色表示状态	对色盲用户不可见	添加图标、文本或图案
自动播放媒体	令人迷失方向，无法停止	添加控制，不要自动播放
自定义下拉菜单无ARIA	键盘/屏幕阅读器无法使用	使用原生<select>或正确的ARIA列表框
移除焦点轮廓	用户无法看到当前位置	设置样式化轮廓，不要移除
空链接/按钮	"链接"被宣布但无描述	添加文本或aria-label
tabindex > 0	破坏自然Tab顺序	仅使用tabindex="0"或-1

开始构建更包容的应用

通过agent-skills的可访问性检查清单，你可以系统地改进应用的可访问性。记住，可访问性是一个持续过程，而非一次性任务。将这些检查整合到你的开发流程中，定期进行审计，并在用户研究中包含残障用户，将帮助你构建真正人人可用的产品。

更多详细的可访问性要求和测试工具，请参阅agent-skills项目中的references/accessibility-checklist.md文件。结合frontend-ui-engineering技能，你将拥有构建无障碍应用所需的全部工具和知识。

【免费下载链接】agent-skills Production-grade engineering skills for AI coding agents. 项目地址: https://gitcode.com/GitHub_Trending/agentskill/agent-skills