Web无障碍合规指南：遵循WCAG标准，提升SEO与用户体验

accessibility-compliance by aj-geddes/useful-ai-prompts

169 周安装量

162 GitHub Stars

GitHub

安装命令

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

开发代码规范用户体验

🇨🇳中文介绍

无障碍合规

概述

遵循 WCAG 指南实施全面的无障碍功能，确保您的应用程序可供所有人使用，包括残障人士。

何时使用

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

快速开始

最小工作示例：

<!-- 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)

参考指南

目录下的详细实现：

广告位招租

在这里展示您的产品或服务

触达数万 AI 开发者，精准高效

联系我们

指南	内容
Semantic HTML with ARIA	带 ARIA 的语义化 HTML
React Component with Accessibility	带无障碍功能的 React 组件
Keyboard Navigation Handler	键盘导航处理器
Color Contrast Validator	颜色对比度验证器
Screen Reader Announcements	屏幕阅读器播报
Focus Management	焦点管理

🇺🇸English

Accessibility Compliance

Overview
When to Use
Quick Start
Reference Guides
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	Semantic HTML with ARIA
React Component with Accessibility	React Component with Accessibility
Keyboard Navigation Handler	Keyboard Navigation Handler
Color Contrast Validator	Color Contrast Validator
Screen Reader Announcements	Screen Reader Announcements
Focus Management	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

Weekly Installs

120

Repository

aj-geddes/usefu…-prompts

GitHub Stars

121

First Seen

Jan 21, 2026

Security Audits

Gen Agent Trust HubPass SocketPass SnykPass

Installed on

opencode97

gemini-cli96

codex93

claude-code92

cursor90

github-copilot83