accessibility-compliance

@aj-geddes · 收录于 5 天前 · 上游提交 4 个月前

Implement WCAG 2.1/2.2 accessibility standards, screen reader compatibility, keyboard navigation, and a11y testing. Use when building inclusive web applications, ensuring regulatory compliance, or improving user experience for people with disabilities.

场景无障碍合规网页开发用户体验优化

适合你，如果你需要确保网站对残障用户友好且符合法规

/ 下载安装

https://github.com/aj-geddes/useful-ai-prompts/tree/main/skills/accessibility-compliance ↗

/ 通过 npx 安装 校验哈希

npx oh-my-skill add aj-geddes/useful-ai-prompts/accessibility-compliance

/ 通过 bash 安装

curl -fsSL https://oh-my-skill.com/install.sh | bash -s -- aj-geddes/useful-ai-prompts/accessibility-compliance

/ 已经装过?验证本机副本,不用重装

npx oh-my-skill verify aj-geddes/useful-ai-prompts/accessibility-compliance

安装目标可用 --agent / --scope 或 --to 明确指定;省略时只会在唯一已存在的 agent 目录上自动选择,零命中或多命中会停止并提示。content_hash 缺失或不一致均拒装。

300GitHub stars

~573最小装载

~2.1K含声明引用

~2.1K文本包总量

索引托管

怎么用

商店整理自技能原文 · 版本 3f5182c · 表述以原文为准

它做什么

装上这个技能后，Claude 会帮你把代码改成符合 WCAG 2.1/2.2 无障碍标准的写法，比如使用语义化 HTML、正确的 ARIA 属性、确保键盘导航和屏幕阅读器兼容，并给出详细参考指南。

什么时候触发

当你要求构建面向公众的网页应用、确保 WCAG 合规、支持屏幕阅读器或键盘导航时，Claude 会自动应用无障碍最佳实践。

装好后可以这样说

会生成带ARIA属性的按钮代码

会调用参考指南中的色彩对比验证

会生成键盘事件处理代码

技能原文 SKILL.md作者撰写 · MIT · 3f5182c

Accessibility Compliance

[Overview](#overview)
[When to Use](#when-to-use)
[Quick Start](#quick-start)
[Reference Guides](#reference-guides)
[Best Practices](#best-practices)

Overview

Implement comprehensive accessibility features following WCAG guidelines to ensure your application is usable by everyone, including people with disabilities.

When to Use

Building public-facing web applications
Ensuring WCAG 2.1/2.2 AA or AAA compliance
Supporting screen readers (NVDA, JAWS, VoiceOver)
Implementing keyboard-only navigation
Meeting ADA, Section 508, or similar regulations
Improving SEO and overall user experience
Conducting accessibility audits

Quick Start

Minimal working example:

<!-- Bad: Non-semantic markup -->
<div class="button" onclick="submit()">Submit</div>

<!-- Good: Semantic HTML -->
<button type="submit" aria-label="Submit form">Submit</button>

<!-- Custom components with proper ARIA -->
<div
  role="button"
  tabindex="0"
  aria-pressed="false"
  onclick="toggle()"
  onkeydown="handleKeyPress(event)"
>
  Toggle Feature
</div>

<!-- Form with proper labels and error handling -->
<form>
  <label for="email">Email Address</label>
  <input
    id="email"
    type="email"
    name="email"
    aria-required="true"
// ... (see reference guides for full implementation)

Reference Guides

Detailed implementations in the references/ directory:

| Guide | Contents | |---|---| | [Semantic HTML with ARIA](references/semantic-html-with-aria.md) | Semantic HTML with ARIA | | [React Component with Accessibility](references/react-component-with-accessibility.md) | React Component with Accessibility | | [Keyboard Navigation Handler](references/keyboard-navigation-handler.md) | Keyboard Navigation Handler | | [Color Contrast Validator](references/color-contrast-validator.md) | Color Contrast Validator | | [Screen Reader Announcements](references/screen-reader-announcements.md) | Screen Reader Announcements | | [Focus Management](references/focus-management.md) | Focus Management |

Best Practices

✅ DO

Use semantic HTML elements
Provide text alternatives for images
Ensure sufficient color contrast (4.5:1 minimum)
Support keyboard navigation
Implement focus management
Test with screen readers
Use ARIA attributes correctly
Provide skip links
Make forms accessible with labels
Support text resizing up to 200%

❌ DON'T

Rely solely on color to convey information
Remove focus indicators
Use only mouse/touch interactions
Auto-play media without controls
Create keyboard traps
Use positive tabindex values
Override user preferences
Hide content only visually that should be hidden from screen readers

按 MIT 许可原样转载,未经改动 · 在 GitHub 查看 →

登录即可评论;带「已验证安装」的,是发布者名下有本店的安装或持有记录。

…