Back to Details

accessibility

Compare original and translation side by side

🇺🇸

Original

English
🇨🇳

Translation

Chinese

Web Accessibility

Web可访问性

Apply W3C Web Accessibility Initiative (WAI) principles when working on web interfaces to ensure usability for people with disabilities.
在开发Web界面时应用W3C Web Accessibility Initiative (WAI)原则，确保残障人士也能正常使用。

When to Activate

适用场景

Use this skill when:
  • Designing or implementing user interfaces
  • Reviewing code for accessibility compliance
  • Creating or editing web content (HTML, CSS, JavaScript)
  • Working with forms, navigation, multimedia, or interactive components
  • Conducting code reviews with accessibility considerations
  • Refactoring existing interfaces for better accessibility
在以下场景中使用本技能：
  • 设计或实现用户界面
  • 审查代码的可访问性合规性
  • 创建或编辑Web内容（HTML、CSS、JavaScript）
  • 处理表单、导航、多媒体或交互式组件
  • 开展考虑可访问性的代码审查
  • 重构现有界面以提升可访问性

Core Principles (POUR)

核心原则（POUR）

Web accessibility is organized around four foundational principles:
Web可访问性围绕四大基础原则构建：

1. Perceivable

1. 可感知性

Information must be presentable to users in ways they can perceive.
Key requirements:
  • Provide text alternatives for non-text content (images, icons, charts)
  • Provide captions and transcripts for multimedia
  • Create content that can be presented in different ways (responsive, reflow)
  • Make content distinguishable (color contrast, text sizing, audio control)
Quick example:
html
<img src="chart.png" alt="Sales increased 40% in Q4 2024">
<button aria-label="Close dialog">
  <span class="icon-close" aria-hidden="true"></span>
</button>
For detailed guidance on text alternatives, multimedia, and color contrast, see 
references/perceivable.md
.
信息必须以用户可感知的方式呈现。
关键要求：
  • 为非文本内容（图片、图标、图表）提供文本替代方案
  • 为多媒体提供字幕和文字记录
  • 创建可通过不同方式呈现的内容（响应式、可重排）
  • 确保内容可区分（颜色对比度、文本大小、音频控制）
快速示例：
html
<img src="chart.png" alt="2024年第四季度销售额增长40%">
<button aria-label="关闭对话框">
  <span class="icon-close" aria-hidden="true"></span>
</button>
关于文本替代方案、多媒体和颜色对比度的详细指南，请参阅
references/perceivable.md
。

2. Operable

2. 可操作性

User interface components must be operable by all users.
Key requirements:
  • Make all functionality keyboard accessible
  • Provide sufficient time for users to complete tasks
  • Avoid content that causes seizures (no rapid flashing)
  • Help users navigate and find content
  • Support various input modalities (touch, voice, keyboard)
Quick example:
html
<button>Click me</button>  <!-- Already keyboard accessible -->

<!-- Custom interactive element needs keyboard support -->
<div role="button" tabindex="0"
     onclick="handleClick()"
     onkeydown="handleKeyDown(event)">
  Custom Button
</div>
For keyboard patterns, focus management, and navigation, see 
references/operable.md
.
用户界面组件必须能被所有用户操作。
关键要求：
  • 确保所有功能都可通过键盘访问
  • 为用户完成任务提供充足时间
  • 避免可能引发癫痫的内容（无快速闪烁）
  • 帮助用户导航和查找内容
  • 支持多种输入方式（触摸、语音、键盘）
快速示例：
html
<button>点击我</button>  <!-- 已支持键盘访问 -->

<!-- 自定义交互元素需要添加键盘支持 -->
<div role="button" tabindex="0"
     onclick="handleClick()"
     onkeydown="handleKeyDown(event)">
  自定义按钮
</div>
关于键盘操作模式、焦点管理和导航的详细内容，请参阅
references/operable.md
。

3. Understandable

3. 可理解性

Information and UI operation must be understandable.
Key requirements:
  • Make text readable and understandable
  • Make web pages appear and operate predictably
  • Help users avoid and correct mistakes
  • Provide clear labels and instructions
Quick example:
html
<html lang="en">
<label for="email">Email address</label>
<input type="email" id="email"
       aria-describedby="email-help"
       required>
<div id="email-help">We'll never share your email</div>
For form patterns, error handling, and content clarity, see 
references/understandable.md
.
信息和UI操作必须易于理解。
关键要求：
  • 确保文本可读且易懂
  • 确保网页的外观和操作可预测
  • 帮助用户避免和纠正错误
  • 提供清晰的标签和说明
快速示例：
html
<html lang="en">
<label for="email">电子邮箱</label>
<input type="email" id="email"
       aria-describedby="email-help"
       required>
<div id="email-help">我们绝不会分享您的邮箱信息</div>
关于表单模式、错误处理和内容清晰度的指南，请参阅
references/understandable.md
。

4. Robust

4. 健壮性

Content must work reliably across user agents and assistive technologies.
Key requirements:
  • Use valid, well-formed markup
  • Ensure compatibility with assistive technologies
  • Use ARIA correctly for custom components
  • Follow semantic HTML practices
Quick example:
html
<!-- Use semantic HTML first -->
<nav aria-label="Main navigation">
  <ul>
    <li><a href="/">Home</a></li>
  </ul>
</nav>

<!-- ARIA for custom components when needed -->
<div role="dialog" aria-labelledby="title" aria-modal="true">
  <h2 id="title">Dialog Title</h2>
</div>
For ARIA patterns and custom components, see 
references/robust.md
.
内容必须能在不同用户代理和辅助技术中可靠运行。
关键要求：
  • 使用有效、格式规范的标记
  • 确保与辅助技术兼容
  • 正确为自定义组件使用ARIA
  • 遵循语义化HTML实践
快速示例：
html
<!-- 优先使用语义化HTML -->
<nav aria-label="主导航">
  <ul>
    <li><a href="/">首页</a></li>
  </ul>
</nav>

<!-- 必要时为自定义组件使用ARIA -->
<div role="dialog" aria-labelledby="title" aria-modal="true">
  <h2 id="title">对话框标题</h2>
</div>
关于ARIA模式和自定义组件的内容，请参阅
references/robust.md
。

Common Tasks

常见任务

Making Forms Accessible

实现表单可访问性

Consult 
references/forms.md
for comprehensive form accessibility including:
  • Label association
  • Error identification and suggestions
  • Required field indication
  • Input validation patterns
如需全面的表单可访问性指南，请参阅
references/forms.md
，包括：
  • 标签关联
  • 错误识别与建议
  • 必填字段标识
  • 输入验证模式

Implementing ARIA

实施ARIA

See 
references/aria.md
for:
  • When to use ARIA vs semantic HTML
  • Common ARIA patterns (tabs, accordions, modals)
  • ARIA states and properties
  • Live regions for dynamic content
关于ARIA的使用，请参阅
references/aria.md
：
  • ARIA与语义化HTML的适用场景对比
  • 常见ARIA模式（标签页、折叠面板、模态框）
  • ARIA状态与属性
  • 动态内容的实时区域

Testing for Accessibility

可访问性测试

Consult 
references/testing.md
for:
  • Keyboard navigation testing
  • Screen reader testing procedures
  • Automated testing tools
  • Color contrast checking
测试相关指南请参阅
references/testing.md
：
  • 键盘导航测试
  • 屏幕阅读器测试流程
  • 自动化测试工具
  • 颜色对比度检查

Common Patterns

常见模式

See 
references/patterns.md
for accessible implementations of:
  • Modal dialogs
  • Dropdown menus
  • Tabs and accordions
  • Loading states and notifications
  • Skip links and landmarks
如需可访问性实现的常见模式，请参阅
references/patterns.md
：
  • 模态对话框
  • 下拉菜单
  • 标签页与折叠面板
  • 加载状态与通知
  • 跳转链接与地标区域

Quick Reference Checklist

快速参考检查清单

Every page should have:
  • Valid HTML structure
  • Unique, descriptive page title
  • Proper heading hierarchy (h1, h2, h3...)
  • Language attribute on 
    <html>
  • Sufficient color contrast (4.5:1 minimum)
  • Keyboard accessibility for all interactive elements
  • Visible focus indicators
  • Text alternatives for images
  • Form labels associated with inputs
  • Semantic landmark regions
For interactive components:
  • Keyboard accessible (Tab, Enter, Space, Arrow keys)
  • Proper ARIA roles, states, and properties
  • Focus management (modals, dynamic content)
  • Descriptive labels and instructions
  • Error messages linked to form controls
每个页面都应具备：
  • 有效的HTML结构
  • 唯一且描述性的页面标题
  • 正确的标题层级（h1、h2、h3...）
  • <html>
    标签上的语言属性
  • 足够的颜色对比度（最低4.5:1）
  • 所有交互元素都支持键盘访问
  • 可见的焦点指示器
  • 图片的文本替代方案
  • 表单标签与输入框关联
  • 语义化地标区域
对于交互式组件：
  • 可通过键盘访问（Tab、Enter、Space、方向键）
  • 正确的ARIA角色、状态和属性
  • 焦点管理（模态框、动态内容）
  • 描述性的标签和说明
  • 与表单控件关联的错误提示

Key Principles

核心准则

  • Semantic HTML first: Use native HTML elements before adding ARIA
  • Keyboard accessibility is fundamental: If it works with mouse, it must work with keyboard
  • Test with actual users: Include people with disabilities in testing
  • Color is not enough: Never use color alone to convey information
  • Provide alternatives: Text for images, captions for video, transcripts for audio
  • Make it predictable: Consistent navigation and behavior across pages
  • Help users recover: Clear error messages with suggestions for correction
  • 优先使用语义化HTML：在添加ARIA之前先使用原生HTML元素
  • 键盘可访问性是基础：如果能用鼠标操作，就必须能用键盘操作
  • 与真实用户测试：将残障人士纳入测试环节
  • 不能仅依赖颜色：绝不要仅用颜色来传递信息
  • 提供替代方案：图片配文本、视频配字幕、音频配文字记录
  • 保持可预测性：页面间的导航和行为要一致
  • 帮助用户恢复：提供清晰的错误提示和纠正建议

Resources

参考资源