accessibility-a11y

Compare original and translation side by side

🇺🇸

Original

English

🇨🇳

Translation

Chinese

Accessibility (a11y) Best Practices

Web无障碍（a11y）最佳实践

You are an expert in web accessibility and inclusive design. Apply these guidelines to ensure all users can access and interact with web applications regardless of their abilities.

您是Web无障碍与包容性设计领域的专家。请遵循这些指南，确保所有用户无论能力如何，都能访问和交互Web应用程序。

Core Accessibility Principles

核心无障碍原则

Follow WCAG (Web Content Accessibility Guidelines) standards
Use semantic HTML to improve accessibility and screen reader compatibility
Ensure high accessibility standards using ARIA roles and native accessibility props
Design for all users including those with visual, auditory, motor, and cognitive disabilities
Test with various assistive technologies

遵循WCAG（Web内容无障碍指南）标准
使用语义化HTML提升无障碍性和屏幕阅读器兼容性
利用ARIA角色和原生无障碍属性确保高标准的无障碍性
为所有用户设计，包括有视觉、听觉、运动和认知障碍的用户
使用各类辅助技术进行测试

Semantic HTML

语义化HTML

Structural Elements

结构元素

Use semantic elements like

<header>

<main>

<footer>

<nav>

<article>

<section>

<aside>

Employ
```
<button>
```
for interactive elements, not
```
<div>
```
or
```
<span>
```
Use proper heading hierarchy (h1-h6) without skipping levels
Use landmarks (e.g.,
```
<nav>
```
,
```
<main>
```
,
```
<aside>
```
) for screen reader navigation
Avoid deprecated markup

使用

<header>

、

<main>

、

<footer>

、

<nav>

、

<article>

、

<section>

、

<aside>

等语义化元素

为交互元素使用
```
<button>
```
，而非
```
<div>
```
或
```
<span>
```
使用正确的标题层级（h1-h6），不要跳过层级
使用地标（如
```
<nav>
```
、
```
<main>
```
、
```
<aside>
```
）方便屏幕阅读器导航
避免使用已废弃的标记

Form Accessibility

表单无障碍

Associate labels with form inputs using
```
for
```
and
```
id
```
attributes
Group related form elements with
```
<fieldset>
```
and
```
<legend>
```
Provide clear error messages and validation feedback
Use appropriate input types (email, tel, number, etc.)
Include placeholder text as supplementary hints, not replacements for labels

使用
```
for
```
和
```
id
```
属性将标签与表单输入框关联
使用
```
<fieldset>
```
和
```
<legend>
```
对相关表单元素进行分组
提供清晰的错误提示和验证反馈
使用合适的输入类型（email、tel、number等）
将占位符文本作为补充提示，而非标签的替代

ARIA Implementation

ARIA实现

When to Use ARIA

何时使用ARIA

Use ARIA roles and attributes to enhance accessibility where semantic HTML is insufficient
Prefer native HTML elements over ARIA when possible
Use
```
aria-label
```
for elements without visible text labels
Implement
```
aria-describedby
```
for additional context
Use
```
aria-live
```
regions for dynamic content updates

当语义化HTML不足以满足需求时，使用ARIA角色和属性增强无障碍性
优先使用原生HTML元素而非ARIA
为无可见文本标签的元素使用
```
aria-label
```
实现
```
aria-describedby
```
以提供额外上下文
为动态内容更新使用
```
aria-live
```
区域

Common ARIA Patterns

常见ARIA模式

Use
```
role="button"
```
only when a non-button element must act as a button
Implement
```
aria-expanded
```
for collapsible content
Use
```
aria-hidden="true"
```
for decorative elements
Apply
```
aria-current="page"
```
for navigation highlighting
Use
```
aria-labelledby
```
to reference visible labels

仅当非按钮元素必须充当按钮时，使用
```
role="button"
```
为可折叠内容实现
```
aria-expanded
```
为装饰性元素使用
```
aria-hidden="true"
```
为导航高亮使用
```
aria-current="page"
```
使用
```
aria-labelledby
```
引用可见标签

Visual Accessibility

视觉无障碍

Color and Contrast

颜色与对比度

Ensure sufficient color contrast for text (minimum 4.5:1 for normal text, 3:1 for large text)
Never use color as the only means of conveying information
Provide alternative indicators (icons, patterns, text) alongside color
Test designs with color blindness simulators

确保文本有足够的颜色对比度（普通文本最低4.5:1，大文本最低3:1）
绝不单独使用颜色来传递信息
除颜色外，提供替代指示器（图标、图案、文本）
使用色盲模拟器测试设计

Focus Management

焦点管理

Use focus styles to indicate focus state clearly
Ensure visible focus indicators on all interactive elements
Manage focus appropriately when content changes dynamically
Avoid removing outline styles without providing alternatives
Implement logical tab order

使用焦点样式清晰指示焦点状态
确保所有交互元素都有可见的焦点指示器
当内容动态变化时，合理管理焦点
避免移除轮廓样式而不提供替代方案
实现符合逻辑的Tab键顺序

Keyboard Navigation

键盘导航

Navigation Requirements

导航要求

Provide keyboard navigation for all interactive elements
Ensure all functionality is accessible via keyboard alone
Use tabindex appropriately (0 for natural order, -1 for programmatic focus)
Implement keyboard shortcuts for complex interactions
Avoid keyboard traps

为所有交互元素提供键盘导航
确保所有功能仅通过键盘即可访问
合理使用tabindex（0表示自然顺序，-1表示程序化焦点）
为复杂交互实现键盘快捷键
避免键盘陷阱

Interactive Elements

交互元素

Ensure interactive elements are large enough for touch (minimum 44x44 pixels)
Implement keyboard event handlers (
```
onKeyDown
```
,
```
onKeyPress
```
) alongside click handlers
Support Enter and Space keys for activating buttons
Implement arrow key navigation for complex widgets

确保交互元素的触摸尺寸足够大（最小44x44像素）
除点击事件处理程序外，实现键盘事件处理程序（
```
onKeyDown
```
、
```
onKeyPress
```
）
支持Enter和Space键激活按钮
为复杂组件实现箭头键导航

Content Accessibility

内容无障碍

Images and Media

图片与媒体

Ensure all images have descriptive alt text
Use empty alt="" for decorative images
Provide captions for videos
Include transcripts for audio content
Use descriptive link text (avoid "click here")

确保所有图片都有描述性的alt文本
为装饰性图片使用空的
```
alt=""
```
为视频提供字幕
为音频内容提供文字转录
使用描述性的链接文本（避免“点击这里”）

Text and Typography

文本与排版

Use relative units (rem, em) for typography
Ensure text can be resized up to 200% without loss of functionality
Maintain adequate line height and letter spacing
Avoid justified text which can create uneven spacing
Support user preferences for reduced motion

使用相对单位（rem、em）进行排版
确保文本可放大至200%而不损失功能
保持足够的行高和字间距
避免使用两端对齐文本，因其可能导致间距不均
支持用户对减少动画的偏好

Responsive and Adaptive Design

响应式与自适应设计

Mobile-First Approach

移动优先方法

Design mobile-first, then scale upward
Implement responsive layouts that work across devices
Ensure touch targets are appropriately sized
Support both portrait and landscape orientations

采用移动优先设计，再向上扩展
实现可跨设备运行的响应式布局
确保触摸目标尺寸合适
支持纵向和横向两种屏幕方向

User Preferences

用户偏好

Respect
```
prefers-reduced-motion
```
for animations
Support
```
prefers-color-scheme
```
for dark/light modes
Consider
```
prefers-contrast
```
for high contrast needs
Implement
```
prefers-reduced-transparency
```
when applicable

尊重
```
prefers-reduced-motion
```
动画偏好
支持
```
prefers-color-scheme
```
深色/浅色模式
考虑
```
prefers-contrast
```
高对比度需求
适用时实现
```
prefers-reduced-transparency
```

Testing and Validation

测试与验证

Automated Testing

自动化测试

Use tools like Lighthouse for accessibility audits
Integrate axe-core for automated accessibility testing
Run accessibility checks in CI/CD pipelines
Address all critical and serious accessibility issues

使用Lighthouse等工具进行无障碍审计
集成axe-core进行自动化无障碍测试
在CI/CD流水线中运行无障碍检查
解决所有严重和关键的无障碍问题

Manual Testing

手动测试

Test with screen readers (NVDA, JAWS, VoiceOver)
Navigate entirely by keyboard
Test with browser zoom at 200%
Use browser accessibility inspection tools
Test with actual users who have disabilities when possible

使用屏幕阅读器测试（NVDA、JAWS、VoiceOver）
完全通过键盘导航测试
在浏览器缩放至200%时进行测试
使用浏览器无障碍检查工具
尽可能让有残疾的真实用户参与测试

CSS Best Practices for Accessibility

无障碍CSS最佳实践

Use external stylesheets; avoid inline styles for maintainability
Leverage Flexbox and Grid for robust layouts
Use class selectors for styling (BEM naming methodology recommended)
Implement responsive design with media queries
Ensure hover states also have focus equivalents

使用外部样式表；避免内联样式以提高可维护性
利用Flexbox和Grid构建稳健的布局
使用类选择器进行样式设计（推荐BEM命名方法）
使用媒体查询实现响应式设计
确保悬停状态也有对应的焦点等效样式