mcpField
A
accessibility-compliance

accessibility-compliance

github.com/aj-geddes设计与 UI374484 次安装34 周前更新
代码仓库

关于 accessibility-compliance

面向 Web 应用开发与无障碍审查的实现指南，按 WCAG 整理语义结构、键盘操作、焦点、对比度和屏幕阅读器等实践参考。

主要功能

  1. 01WCAG 2.1/2.2 指南
  2. 02语义 HTML 与 ARIA 模式
  3. 03键盘导航与焦点管理
  4. 04颜色对比度验证
  5. 05屏幕阅读器支持

适用场景

  1. 01构建面向公众的无障碍 Web 应用
  2. 02满足 WCAG、ADA 或 Section 508 要求
  3. 03审查键盘及屏幕阅读器可用性

安装

复制下面的命令，在终端中运行。

$npx skills add https://github.com/aj-geddes/useful-ai-prompts --skill accessibility-compliance

安装后在 Claude Code 中输入/accessibility-compliance确认已加载。

包含的文件

除 SKILL.md 外，安装时一起下载的参考资料和脚本。

references/
color-contrast-validator.md
focus-management.md
keyboard-navigation-handler.md
react-component-with-accessibility.md
screen-reader-announcements.md
semantic-html-with-aria.md
templates/
component-template.tsx

详细介绍

无障碍合规

目录

概述

遵循 WCAG 指南全面实现无障碍功能，确保所有人（包括残障人士）都能使用你的应用程序。

适用场景

  • 构建面向公众的 Web 应用程序
  • 确保符合 WCAG 2.1/2.2 AA 或 AAA 标准
  • 支持屏幕阅读器（NVDA、JAWS、VoiceOver）
  • 实现仅使用键盘的导航
  • 满足 ADA、Section 508 或类似法规的要求
  • 改善 SEO 和整体用户体验
  • 开展无障碍审计

快速开始

最简可运行示例：


<div class="button" onclick="submit()">Submit</div>


<button type="submit" aria-label="Submit form">Submit</button>


<div
  role="button"
  tabindex="0"
  aria-pressed="false"
  onclick="toggle()"
  onkeydown="handleKeyPress(event)"
>
  Toggle Feature
</div>


<form>
  <label for="email">Email Address</label>
  <input
    id="email"
    type="email"
    name="email"
    aria-required="true"
// ... (see reference guides for full implementation)

参考指南

references/ 目录中的详细实现：

指南内容
带 ARIA 的语义化 HTML带 ARIA 的语义化 HTML
具有无障碍功能的 React 组件具有无障碍功能的 React 组件
键盘导航处理程序键盘导航处理程序
颜色对比度验证器颜色对比度验证器
屏幕阅读器播报屏幕阅读器播报
焦点管理焦点管理

最佳实践

✅ 应该
  • 使用语义化 HTML 元素
  • 为图片提供文本替代内容
  • 确保足够的颜色对比度（最低 4.5:1）
  • 支持键盘导航
  • 实现焦点管理
  • 使用屏幕阅读器进行测试
  • 正确使用 ARIA 属性
  • 提供跳过链接
  • 为表单提供标签，确保其易于访问
  • 支持将文本放大至 200%
❌ 不应该
  • 仅依靠颜色传达信息
  • 移除焦点指示器
  • 只支持鼠标或触控交互
  • 不提供控制项就自动播放媒体
  • 创建键盘陷阱
  • 使用正数 tabindex 值
  • 覆盖用户偏好设置
  • 仅在视觉上隐藏本应对屏幕阅读器隐藏的内容

评论

支持 Markdown