wcag-accessibility

Compare original and translation side by side

🇺🇸

Original

English

🇨🇳

Translation

Chinese

WCAG Accessibility (EN 301 549 / European Standard)

WCAG无障碍设计（EN 301 549 / 欧洲标准）

The Standard

标准说明

The European Accessibility Act (EAA) requires digital products and services in the EU to meet EN 301 549, which references WCAG 2.2 Level AA as the technical baseline. This is not optional — it is a legal requirement for products operating in the EU market.

Default: always build to WCAG 2.2 AA. Deviating requires explicit, documented justification. Do not skip accessibility requirements because of timeline pressure or design preference.

WCAG 2.2 AA organises requirements under four principles: Perceivable, Operable, Understandable, Robust.

欧洲无障碍法案（EAA）要求欧盟境内的数字产品和服务必须符合EN 301 549标准，该标准以WCAG 2.2 AA级别作为技术基准。这并非可选要求——而是在欧盟市场运营的产品必须遵守的法律规定。

默认要求：始终按照WCAG 2.2 AA级别进行开发。若要偏离该标准，需提供明确的书面理由。不得因时间压力或设计偏好而跳过无障碍要求。

WCAG 2.2 AA将要求分为四大原则：可感知、可操作、可理解、鲁棒性。

Perceivable

可感知

Users must be able to perceive all content and UI components.

用户必须能够感知所有内容和UI组件。

Colour Contrast

颜色对比度

Context	Minimum ratio	Enhanced (AAA)
Normal text (< 18pt / < 14pt bold)	4.5 : 1	7 : 1
Large text (≥ 18pt / ≥ 14pt bold)	3 : 1	4.5 : 1
UI components and graphical objects	3 : 1	—

Check contrast on the real rendered page, not the spec (dembrandt engine, optional). Design-time swatches lie once real text lands on real backgrounds, gradients, and overlays.
get_findings
/
render_report
run against the live DOM and surface the actual failing text/background pairs with their measured ratios — a fast way to catch the combinations a static palette review misses. See
extract-design
.

Disabled elements are exempt. WCAG explicitly excludes inactive UI components from contrast requirements (WCAG 1.4.3 exception). A disabled button may use low-contrast text — this is intentional and correct, as it communicates the unavailable state.

Do not use colour as the only means of conveying information (e.g. a red border alone to indicate an error — add an icon or text label).

场景	最低对比度	增强级（AAA）
普通文本（< 18号字 / < 14号粗体）	4.5 : 1	7 : 1
大文本（≥ 18号字 / ≥ 14号粗体）	3 : 1	4.5 : 1
UI组件与图形对象	3 : 1	—

请在实际渲染页面上检查对比度，而非设计规范（可使用dembrandt引擎）。 设计阶段的色板在实际文本置于真实背景、渐变和遮罩上后会失真。
get_findings
/
render_report
针对实时DOM运行，可显示实际不符合要求的文本/背景组合及其测量的对比度——这是快速发现静态调色板审查遗漏组合的方法。详见
extract-design
。

已禁用元素可豁免。WCAG明确将非活跃UI组件排除在对比度要求之外（WCAG 1.4.3例外条款）。禁用按钮可使用低对比度文本——这是有意且合规的，因为它传达了不可用状态。

不要仅使用颜色来传递信息（例如仅用红色边框表示错误——需添加图标或文本标签）。

Text Alternatives

文本替代方案

Every meaningful image needs
```
alt
```
text describing its content or function
Decorative images use
```
alt=""
```
so screen readers skip them
Icons used as buttons need an accessible label:
```
aria-label
```
or visually hidden text
Charts and data visualisations need a text summary or data table alternative

每个有意义的图片都需要
```
alt
```
文本来描述其内容或功能
装饰性图片使用
```
alt=""
```
，以便屏幕阅读器跳过它们
用作按钮的图标需要可访问标签：
```
aria-label
```
或视觉隐藏文本
图表和数据可视化需要文本摘要或数据表替代方案

Captions and Transcripts

字幕与文字记录

Video content needs captions
Audio-only content needs a transcript

视频内容需要字幕
纯音频内容需要文字记录

Operable

可操作

Users must be able to operate all UI components.

用户必须能够操作所有UI组件。

Keyboard Navigation

键盘导航

All interactive elements must be reachable and operable by keyboard alone.

Every button, link, input, and control must receive focus via Tab
Focus order must follow the visual reading order of the page
No keyboard traps — users must be able to navigate away from any component
Modal dialogs must trap focus inside while open, and return focus to the trigger element on close

所有交互元素必须仅通过键盘即可访问和操作。

每个按钮、链接、输入框和控件都必须能通过Tab键获得焦点
焦点顺序必须遵循页面的视觉阅读顺序
无键盘陷阱——用户必须能够从任何组件导航离开
模态对话框打开时必须将焦点锁定在内部，关闭时将焦点返回到触发元素

Focus Visibility

焦点可见性

A visible focus indicator is required on every interactive element (WCAG 2.2 strengthens focus visibility requirements).

css

/* Minimum: do not remove focus outline without a replacement */
:focus-visible {
  outline: 2px solid var(--color-focus);
  outline-offset: 2px;
}

Never use

outline: none

without providing a custom focus style. The focus ring is not a design problem to eliminate — it is a navigation tool.

每个交互元素都需要可见的焦点指示器（WCAG 2.2强化了焦点可见性要求）。

css

/* Minimum: do not remove focus outline without a replacement */
:focus-visible {
  outline: 2px solid var(--color-focus);
  outline-offset: 2px;
}

永远不要在未提供自定义焦点样式的情况下使用

outline: none

。焦点环不是需要消除的设计问题——它是一种导航工具。

Touch Target Size

触摸目标尺寸

Interactive elements on touch devices must be at least 24×24px (WCAG 2.2) — 44×44px is the recommended comfortable minimum (Apple HIG, Material Design). Small icon buttons need padding to reach this size even if the visual icon is smaller.

触摸设备上的交互元素必须至少为24×24px（WCAG 2.2标准）——44×44px是推荐的舒适最小尺寸（Apple人机界面指南、Material Design）。小型图标按钮需要添加内边距以达到此尺寸，即使视觉图标本身更小。

No Seizure Triggers

无癫痫触发因素

Nothing on screen should flash more than 3 times per second.

屏幕上的任何内容闪烁频率不得超过每秒3次。

Skip Links

跳转链接

Pages with repeated navigation must provide a "Skip to main content" link as the first focusable element, so keyboard users can bypass navigation on every page.

带有重复导航的页面必须提供“跳转到主要内容”链接作为第一个可获得焦点的元素，以便键盘用户在每个页面上都能绕过导航。

Understandable

可理解

Users must be able to understand the content and how the UI works.

用户必须能够理解内容以及UI的工作方式。

Language

语言设置

Set

lang

attribute on the

<html>

element:

<html lang="fi">

<html lang="en">

Mark inline content in a different language with
```
lang
```
on that element

在

<html>

元素上设置

lang

属性：

<html lang="fi">

或

<html lang="en">

对包含不同语言的内联内容，在该元素上标记
```
lang
```
属性

Labels and Instructions

标签与说明

Every form input must have a visible label — not just a placeholder (placeholders disappear on input)
Required fields must be indicated — do not rely on colour alone; add an asterisk and a legend
Error messages must be associated with their input via
```
aria-describedby
```

每个表单输入框都必须有可见标签——不能仅使用占位符（占位符在输入时会消失）
必填字段必须明确标识——不要仅依赖颜色；添加星号和说明文字
错误消息必须通过
```
aria-describedby
```
与对应的输入框关联

Predictability

可预测性

Components that look the same must behave the same (see Consistency and Standards)
Navigation must appear in the same location across pages
Opening a new tab or window must be communicated in advance

外观相同的组件必须表现一致（参见一致性与标准）
导航必须在所有页面上位于相同位置
打开新标签页或窗口必须提前告知用户

Error Identification

错误识别

Form validation errors must identify which field failed
Errors must be described in text — not only by colour or icon

表单验证错误必须指出哪个字段出错
错误必须用文字描述——不能仅依赖颜色或图标

Robust

鲁棒性

Content must be interpreted reliably by assistive technologies.

内容必须能被辅助技术可靠解析。

Semantic HTML

语义化HTML

Use the correct HTML element for the job. Semantics convey role, state, and structure to screen readers for free.

html

<!-- Correct -->
<button>Save</button>
<nav aria-label="Main navigation">...</nav>
<h1>Page title</h1>

<!-- Wrong — requires manual ARIA to replicate what the element provides natively -->
<div onclick="save()">Save</div>
<div class="nav">...</div>
<div class="heading">Page title</div>

使用正确的HTML元素完成对应功能。语义化可自动向屏幕阅读器传达角色、状态和结构。

html

<!-- Correct -->
<button>Save</button>
<nav aria-label="Main navigation">...</nav>
<h1>Page title</h1>

<!-- Wrong — requires manual ARIA to replicate what the element provides natively -->
<div onclick="save()">Save</div>
<div class="nav">...</div>
<div class="heading">Page title</div>

ARIA — Use Sparingly

ARIA — 谨慎使用

ARIA supplements HTML semantics where native elements fall short. It does not fix broken HTML.

Rule: no ARIA is better than incorrect ARIA. Incorrect ARIA actively breaks screen reader output.

Required patterns:

```
aria-label
```
or
```
aria-labelledby
```
for components with no visible text label
```
aria-expanded
```
on toggles, accordions, and dropdowns
```
aria-live
```
regions for dynamic content updates (toast notifications, search results)
```
role="dialog"
```
with
```
aria-modal="true"
```
on modal overlays
```
aria-current="page"
```
on the active navigation item

ARIA用于在原生元素不足时补充HTML语义。它无法修复错误的HTML。

规则：不使用ARIA比错误使用ARIA更好。错误的ARIA会严重破坏屏幕阅读器的输出。

必填模式：

对无可见文本标签的组件使用
```
aria-label
```
或
```
aria-labelledby
```
在切换控件、折叠面板和下拉菜单上使用
```
aria-expanded
```
对动态内容更新（提示通知、搜索结果）使用
```
aria-live
```
区域
在模态遮罩上使用
```
role="dialog"
```
和
```
aria-modal="true"
```
在当前激活的导航项上使用
```
aria-current="page"
```

Status Messages

状态消息

Dynamic updates (success toasts, loading states, error counts) must be announced to screen readers via

aria-live

role="status"

— they will not be announced automatically unless the focused element changes.

动态更新（成功提示、加载状态、错误计数）必须通过

aria-live

或

role="status"

向屏幕阅读器播报——除非焦点元素发生变化，否则这些更新不会自动被播报。

The Disabled Element Exception

禁用元素豁免条款

WCAG 1.4.3 explicitly states: "Text or images of text that are part of an inactive user interface component… have no contrast requirement."

This means:

Disabled buttons, inputs, and links may use low-contrast text and colours
The visual dimming of disabled states is both correct and compliant
Do not add artificial contrast to disabled elements — the reduced contrast communicates "this is unavailable"

WCAG 1.4.3明确规定：“属于非活跃用户界面组件的文本或文本图像……无对比度要求。”

这意味着：

禁用的按钮、输入框和链接可以使用低对比度文本和颜色
禁用状态的视觉变暗既合规又正确
不要为禁用元素添加人为对比度——降低的对比度传达了“此元素不可用”的信息

Review Checklist

审查清单

Area	Check
Contrast	All active text ≥ 4.5:1 (normal) or 3:1 (large/UI)
Contrast	Disabled elements exempt — intentionally low contrast is fine
Colour	Colour is never the only information carrier
Keyboard	All interactive elements reachable and operable by keyboard
Focus	Visible focus indicator on every interactive element
Touch	Interactive targets ≥ 44×44px on touch surfaces
Labels	Every input has a visible label (not just placeholder)
Errors	Validation errors identify the field and describe the problem in text
HTML	Semantic elements used correctly; ARIA only where needed
Language	`lang` attribute set on `<html>`
Skip link	"Skip to main content" as first focusable element
Live regions	Dynamic updates announced via `aria-live` or `role="status"`

检查领域	检查项
对比度	所有活跃文本对比度≥4.5:1（普通文本）或3:1（大文本/UI组件）
对比度	禁用元素可豁免——有意使用低对比度是合规的
颜色	颜色永远不能是唯一的信息载体
键盘	所有交互元素均可通过键盘访问和操作
焦点	每个交互元素都有可见的焦点指示器
触摸	触摸界面上的交互目标≥44×44px
标签	每个输入框都有可见标签（不仅是占位符）
错误	验证错误需指出对应字段并以文字描述问题
HTML	正确使用语义化元素；仅在必要时使用ARIA
语言	`<html>` 元素上已设置 `lang` 属性
跳转链接	“跳转到主要内容”作为第一个可获得焦点的元素
实时区域	通过 `aria-live` 或 `role="status"` 播报动态更新