⚡

无障碍可访问性(WCAG)Skill accessibility-wcag

本技能专注于构建符合WCAG 2.1/2.2标准的无障碍Web应用，涉及语义HTML、ARIA属性、键盘导航、屏幕阅读器支持、包容性设计、合规测试和用户体验优化，适用于前端开发中确保所有用户（包括残疾人）能够访问和使用Web内容，提升Web可访问性和SEO友好性。

前端开发 0 次安装 0 次浏览 更新于 3/18/2026

name: 无障碍可访问性-wcag description: 遵循WCAG 2.1/2.2指南，使用正确的语义HTML、ARIA属性、键盘导航、屏幕阅读器支持和包容性设计，构建无障碍Web应用。当实施ARIA标签和角色、确保键盘导航、支持屏幕阅读器、为图像提供文本替代、管理焦点、创建无障碍表单、构建包容性UI组件、使用无障碍工具测试、满足WCAG合规级别或为残疾人设计时使用。

无障碍可访问性(WCAG) - 构建包容性Web应用

何时使用此技能

  • 实施ARIA标签、角色和属性
  • 确保完全键盘导航支持
  • 支持屏幕阅读器（NVDA、JAWS、VoiceOver）
  • 为图像和媒体提供文本替代
  • 管理焦点和焦点指示器
  • 使用正确标签创建无障碍表单
  • 构建包容性、可用的UI组件
  • 使用axe DevTools或类似工具测试
  • 满足WCAG 2.1/2.2 AA或AAA合规性
  • 为色盲和低视力设计
  • 实现跳过链接和地标
  • 确保足够的颜色对比度比例

何时使用此技能

  • 设计UI、实施组件、确保符合无障碍标准（WCAG 2.1/2.2）。
  • 当处理相关任务或功能时
  • 在需要此专业知识的开发过程中

使用当：设计UI、实施组件、确保符合无障碍标准（WCAG 2.1/2.2）。

核心原则（POUR）

  1. 可感知 - 信息对所有感官可用
  2. 可操作 - 界面元素对所有用户功能性
  3. 可理解 - 内容和界面清晰
  4. 鲁棒 - 在所有技术中工作，包括辅助设备

基本模式

语义HTML

<!-- ✅ 正确的语义结构 -->
<header><nav><ul><li><a></a></li></ul></nav></header>
<main><article><h1></h1><p></p></article></main>
<footer></footer>

<!-- ❌ Div soup -->
<div class="header"><div class="nav"></div></div>

ARIA标签和角色

<button aria-label="关闭对话框">×</button>
<nav aria-label="主导航"></nav>
<input aria-describedby="email-error" />
<div role="alert" aria-live="polite">成功</div>

键盘导航

function Modal({ onClose }: { onClose: () => void }) {
  useEffect(() => {
    const handleEscape = (e: KeyboardEvent) => {
      if (e.key === 'Escape') onClose();
    };
    document.addEventListener('keydown', handleEscape);
    return () => document.removeEventListener('keydown', handleEscape);
  }, [onClose]);
  
  return <div role="dialog" aria-modal="true" tabIndex={-1}>...</div>;
}

焦点管理

const firstFocusableElement = dialogRef.current?.querySelectorAll(
  'button, [href], input, select, textarea, [tabindex]:not([tabindex="-1"])'
)[0];
firstFocusableElement?.focus();

资源