标准 · WCAG 2.2
WCAG 2.2 成功准则
WCAG 2.2 全部86条成功准则——31条为 A 级,24条为 AA 级,31条为 AAA 级。其中9条为 2.2 版新增,17条源自 2.1 版,60条沿用自 2.0 版。每条条目均含通俗语言摘要、达标说明及实际审计中最常见的失败案例。
1. 可感知
信息和用户界面组件必须以用户能够感知的方式呈现。
- 1.1.1 A
非文本内容
每张图像、图标、图表、音频文件及其他非文本组件,都必须具备传达同等目的的文本替代内容——使屏幕阅读器、盲文设备及开关控制用户能够获取与视力正常用户相同的信息。
- 1.2.1 A
纯音频和纯视频(预录制)
预录制音频需要文本转录稿。预录制静音视频需要文本描述或传达相同信息的音轨——确保无法听到或无法看到内容的用户仍能获取信息。
- 1.2.2 A
字幕(预录制)
每段含有音频的预录制视频,都必须提供同步字幕,涵盖对话、说话人标识及有意义的非语音声音——使失聋和听力受损用户能够从音轨中获取与其他用户相同的信息。
- 1.2.3 A
音频描述或媒体替代内容(预录)
预录视频需提供音频描述音轨,或针对声轨未涵盖的视觉信息提供完整的文本替代内容,以确保盲人用户获得与视力正常的观看者相同的内容。
- 1.2.4 AA
字幕(直播)
同步媒体中的直播音频——网络研讨会、直播流、虚拟活动——必须提供实时字幕。准确率足够高的自动字幕可符合要求,但专业 CART 字幕是最稳妥的选择。
- 1.2.5 AA
音频描述(预录)
预录视频需要一条音频描述音轨,在对话的自然停顿处朗读重要的视觉信息。在 AA 级别,仅提供文字稿已不再充分——描述必须以音频形式呈现。
- 1.2.6 AAA
手语(预录制)
同步媒体中的预录制音频必须配有手语翻译。字幕并非替代方案——对许多聋人用户来说,手语是第一语言,书面文字才是第二语言。
- 1.2.7 AAA
扩展音频描述(预录制)
当对话间隙不足以容纳标准音频描述时,视频必须暂停以播放扩展描述——这样即使内容密集、节奏紧凑,盲人用户也能获得完整的视觉背景信息。
- 1.2.8 AAA
媒体替代方案(预录制)
预录制的同步媒体以及仅含视频的预录制内容,需要提供一个能传达全部相同信息的完整文字替代方案。这超越了字幕和音频描述的范畴:需要一份完整的独立文档。
- 1.2.9 AAA
纯音频(直播)
直播纯音频内容——广播流、纯音频会议通话、直播播客——需要提供实时文字替代方案(如实时字幕),使失聪及听力障碍用户能够即时获取内容。
- 1.3.1 A
信息和关系
通过视觉传达的信息和关系——标题、列表、表格、表单标签、分组——也必须在标记语言中加以表达,以便辅助技术能够正确呈现,仅靠视觉样式是不够的。
- 1.3.2 A
有意义的序列
当内容的阅读顺序影响理解时,DOM 顺序必须与视觉顺序一致。通过 CSS 定位和浮动打乱顺序会破坏屏幕阅读器体验和键盘导航。
- 1.3.3 A
感官特征
操作说明不得仅依赖形状、大小、位置、方向、声音或颜色。“点击右侧绿色按钮”会将无法看见布局或区分颜色的用户排除在外。
- 1.3.4 AA
方向
内容不得锁定为单一方向——竖屏或横屏——除非该方向对功能而言必不可少。固定安装于轮椅或以固定握持姿势使用手机的用户无法旋转设备。
- 1.3.5 AA
识别输入目的
收集常见个人信息的表单字段——姓名、电子邮件、电话、地址、信用卡——必须使用 HTML autocomplete 属性以编程方式声明其用途,以便浏览器自动填充,并允许辅助工具自定义界面。
- 1.3.6 AAA
识别用途
除表单字段外,UI 组件、图标和页面区域的用途必须可通过编程方式识别——以便辅助技术能够替换为符号、简化页面或隐藏非必要内容。
- 1.4.1 A
颜色的使用
颜色不得作为传达信息的唯一方式。必填字段、错误状态、链接区分、图表系列——均需要第二种提示(文本、图标、下划线、图案),以确保色觉障碍用户获得同等信息。
- 1.4.2 A
音频控制
自动播放超过三秒的音频必须提供独立于系统音量的暂停、停止或音量控制,以免盖过屏幕阅读器的语音。
- 1.4.3 AA
对比度(最低限度)
正文文本与背景的对比度至少须达到 4.5:1。大号文本(18pt 及以上,或 14pt 及以上粗体)须达到 3:1。徽标及装饰性文本豁免。
- 1.4.4 AA
文本调整大小
文本放大至 200% 时,内容与功能不得丢失,仍须保持可读可用。字幕及文本图像豁免。
- 1.4.5 AA
文字图像
除非图像不可或缺(如徽标、正在讨论的界面截图)或完全可自定义,否则应以真实文字实现文本,而非光栅化图像。
- 1.4.6 AAA
对比度(增强)
AAA 级对比度要求:正文文字 7:1,大文字 4.5:1。比 1.4.3 更严格,专为对比度需求较高、在舒适阅读时需要更强对比的低视力用户设计。
- 1.4.7 AAA
低音量或无背景音
对于以语音为主的预录音频,背景音必须至少比前景语音低 20 dB,或完全缺席,或可单独静音——以便听力障碍用户能够清晰跟随对话内容。
- 1.4.8 AAA
视觉呈现
对于文本块,用户必须能够控制前景色与背景色、行宽(最多80个字符)、对齐方式(不允许两端对齐)、行间距(1.5倍)和段落间距(1.5倍行高)——在200%缩放时无需水平滚动。
- 1.4.9 AAA
文字图像(无例外)
AAA级:完全不允许使用文字图像,仅标志和必要情形除外(如演示排版效果的截图)。1.4.5中的"可定制化"例外在此被取消。
- 1.4.10 AA
重排
内容必须能在宽度 320 CSS 像素(垂直滚动内容)或高度 256 像素(水平滚动内容)时重排为单列显示,且不丢失信息或功能。不允许双向滚动。
- 1.4.11 AA
非文本对比度
UI 组件(按钮边框、表单字段轮廓、焦点指示器、纯图标控件)及有意义的图形元素(图表系列、状态图标)与相邻颜色的对比度至少须达到 3:1。
- 1.4.12 AA
文本间距
当用户覆盖文本间距——行高 1.5 倍、段落间距 2 倍字号、字母间距 0.12em、字间距 0.16em——页面不得丢失内容或功能。
- 1.4.13 AA
悬停或聚焦时的内容
因悬停或聚焦而出现的工具提示、弹出框及其他内容,必须可关闭、可悬停(用户可将指针移入其中)且持久存在(在用户主动关闭或触发元素失去焦点之前不会消失)。
2. 可操作
用户界面组件和导航必须对所有人可操作。
- 2.1.1 A
键盘
页面上的每项功能必须仅通过键盘即可操作——不依赖鼠标移动、拖拽或特定时序。屏幕阅读器、开关控制和语音控制用户均依赖这一基准能力。
- 2.1.2 A
无键盘陷阱
若键盘焦点可以移入某个组件,则必须能仅用键盘将焦点移离该组件。模态框、嵌入内容及自定义控件是常见的违规场景。
- 2.1.3 AAA
键盘(无例外)
与成功准则 2.1.1“键盘”相同,但不设路径依赖例外。每项功能——包括自由绘图和签名采集——均须具备可通过键盘操作的替代方式。
- 2.1.4 A
字符键快捷键
仅由单个字母、数字或符号组成的键盘快捷键,必须支持关闭、重新映射,或仅在相关组件获得焦点时生效。此条准则旨在保护语音控制和听写用户,防止意外触发操作。
- 2.2.1 A
可调节的时限
内容设置的任何时限,必须允许用户关闭、调整至默认值的至少十倍,或在提前至少20秒警告后进行延长。会话超时和测验计时器是主要适用对象。
- 2.2.2 A
暂停、停止、隐藏
持续超过五秒的移动、闪烁、滚动或自动更新内容,必须允许用户暂停、停止或隐藏。涵盖轮播图、跑马灯、新闻滚动条、动态广告及自动刷新信息流。
- 2.2.3 AAA
无时限
时限根本不是内容的组成部分,非交互式实时事件除外。比2.2.1更严格——没有“警告并延长”的回退方案。
- 2.2.4 AAA
中断
中断——弹出窗口、通知、警报、自动更新——必须允许用户推迟或关闭,紧急情况除外。
- 2.2.5 AAA
重新认证
当已认证会话过期时,用户必须能够在不丢失任何已输入数据的情况下继续操作。会话结束,但进行中的工作不会丢失。
- 2.2.6 AAA
超时
用户必须被告知任何可能导致数据丢失的非活动超时,除非数据在非活动状态超过 20 小时后仍能保留。
- 2.3.1 A
三次闪烁或低于阈值
页面上的任何内容每秒闪烁次数不得超过三次,除非闪烁面积小于规定尺寸且对比度低于规定阈值。旨在防止光敏性癫痫发作。
- 2.3.2 AAA
三次闪烁
页面上的任何内容每秒闪烁次数不得超过三次——无一例外。移除了 2.3.1 所允许的面积和阈值豁免。
- 2.3.3 AAA
交互触发的动画
由交互触发的运动动画必须可由用户禁用,除非该动画是不可或缺的。应遵从 `prefers-reduced-motion` 媒体查询。
- 2.4.1 A
绕过区块
为键盘和屏幕阅读器用户提供一种机制,使其能够跳过每个页面重复出现的内容——通常是页眉、主导航和功能链接——从而无需逐一按 Tab 键浏览数十个链接即可直达主体内容。
- 2.4.2 A
页面标题
每个页面必须具有描述其主题或用途的 `<title>`。该标题是屏幕阅读器在页面加载时朗读的内容,也是用户在标签页、书签、浏览历史和搜索结果中看到的内容。
- 2.4.3 A
焦点顺序
当用户通过 Tab 键在页面中移动时,焦点顺序必须遵循一个能够保留意义和可操作性的序列——通常与视觉阅读顺序一致。即便每个控件本身都能正常工作,混乱的 Tab 顺序在功能上仍是断裂的。
- 2.4.4 A
链接目的(结合上下文)
每个链接的目的必须能从其链接文本中清晰辨识,或从链接文本结合其所在上下文中辨识——即其所在的句子、列表项、表格单元格或段落。屏幕阅读器用户常在脱离上下文的链接列表中逐一听取链接信息。
- 2.4.5 AA
多种途径
用户必须能通过多种方式定位网站内的页面——通常是导航菜单、搜索、网站地图、目录或相关页面列表的组合。例外情况是作为某一流程步骤的页面(结账、多步骤表单)。
- 2.4.6 AA
标题和标签
标题和表单标签必须描述其所引导内容的主题或目的。它们无需唯一,但必须具有信息量——读作「信息」的标题或读作「字段」的标签均不符合本成功准则。
- 2.4.7 AA
焦点可见
任何可通过键盘操作的界面,都必须在当前获得焦点的元素上显示可见的焦点指示器。如果用户看不到键盘焦点所在位置,他们便无法使用键盘操作该网站——毫无例外。本成功准则是审计中被引用最多的准则之一。
- 2.4.8 AAA
位置
用户必须能够了解自己在一组页面中的位置——通常通过面包屑导航、导航栏中的当前页面指示器,或突出显示当前区域的网站地图来实现。
- 2.4.9 AAA
链接目的(仅限链接本身)
2.4.4 的更严格 AAA 版本:链接文本本身——不依赖任何上下文——必须能够说明链接目标。即使上文已解释清楚,“阅读更多”单独出现仍不符合要求。此成功准则专为通过链接列表导航的屏幕阅读器用户而设计。
- 2.4.10 AAA
章节标题
使用标题组织内容。页面中存在明确章节时,每个章节都需要真实的标题元素(`<h1>`–`<h6>`),而非仅在视觉上模拟标题效果的样式化段落。
- 2.4.11 AA 新增 2.2
焦点不被遮挡(最低要求)
当元素获得键盘焦点时,不得被其他 UI 元素——粘性页眉、Cookie 横幅、聊天组件、粘性页脚——完全遮挡。这是 WCAG 2.2 新增的准则,正在重塑团队构建粘性界面的方式。
- 2.4.12 AAA 新增 2.2
焦点未被遮挡(增强版)
2.4.11 的更严格 AAA 版本:当某元素获得焦点时,其任何部分均不得被其他内容遮挡。WCAG 2.2 新增准则。
- 2.4.13 AAA 新增 2.2
焦点外观
键盘焦点指示器必须满足可量化的视觉标准:围绕周界至少 2 个 CSS 像素厚,与未聚焦状态相比对比度至少达到 3:1,且不得被遮挡。WCAG 2.2 新增准则;是该规范迄今为止最具体的焦点样式规则。
- 2.5.1 A
指针手势
任何使用多点或路径型手势的功能——捏合缩放、双指旋转、滑动删除——也必须能够通过无需路径的单点激活方式完成操作。
- 2.5.2 A
指针取消
由单一指针触发的功能必须在抬起事件而非按下事件时触发,以便用户能够拖离目标来中止操作。除非即时激活是必要的,否则必须提供中止、撤销或预激活取消机制。
- 2.5.3 A
名称中的标签
当控件具有可见文本时,该文本必须出现在其可访问名称的开头。否则,使用语音控制的用户说出所见内容后,将无法激活该控件。
- 2.5.4 A
运动触发
由设备运动或用户动作触发的功能——晃动、倾斜、在摄像头前做手势——必须同样可通过标准界面控件操作,且必须允许用户关闭运动触发。
- 2.5.5 AAA
目标尺寸(增强)
交互目标的点击区域应至少为 44×44 CSS 像素。这是 AAA 级别的增强目标尺寸要求;AA 级别的 2.5.8 下限为 24×24。
- 2.5.6 AAA
并发输入机制
网页内容不得限制平台上可用的输入模式的使用——除非该限制是必不可少的、保护内容安全所必需的,或遵从用户设置所必需的。
- 2.5.7 AA 新增 2.2
拖动操作
任何使用拖动操作的功能,也必须可通过无需拖动的单指针操作来完成——通常为点击或轻触。此为WCAG 2.2新增内容。
- 2.5.8 AA 新增 2.2
目标尺寸(最低要求)
交互目标——按钮、链接、表单控件——必须至少为24×24 CSS像素,除非同一页面上有等效的足够大的目标,或目标位于句子中。此为WCAG 2.2新增内容。
3. 可理解
信息及用户界面的操作方式必须可理解。
- 3.1.1 A
页面语言
通过编程方式声明每个页面的默认人类语言——通常使用 html 元素上的 lang 属性。屏幕阅读器、盲文显示器和翻译工具依赖此声明来选择正确的发音规则、语音配置和字符映射。
- 3.1.2 AA
局部语言
当页面中某段文字或短语所使用的语言与页面默认语言不同时,应在其容器上标注 lang 属性,以便屏幕阅读器为该片段切换语音和发音。
- 3.1.3 AAA
非通用词语
为以非常规或限定方式使用的词语提供定义获取机制——包括行业术语、惯用表达和技术词汇。词汇表、行内定义或链接定义均可满足此 AAA 级成功准则。
- 3.1.4 AAA
缩写
为缩写提供查找其完整形式或含义的机制。首次出现时拼写全称、使用带有 title 属性的 abbr 元素,或链接到术语表,均可满足此 AAA 成功准则。
- 3.1.5 AAA
阅读水平
当内容要求的阅读能力超过初中教育水平时,须提供更简单的替代版本——包括纯语言版本、摘要,或插图、音频等补充材料。
- 3.1.6 AAA
发音
当一个词的含义取决于其发音,且正确发音在语境中并不明显时,须提供揭示发音的机制——如注音拼写、音频,或链接至发音指南。
- 3.2.1 A
获得焦点时
当任何用户界面组件获得焦点时,不得触发上下文变化——不得自动导航至新页面、打开新窗口或大幅重排页面内容。焦点用于定位,而非触发操作。
- 3.2.2 A
输入时
更改任何用户界面组件的设置,不得自动触发上下文变化,除非已事先告知用户。选择某个值不应在用户不知情的情况下导致页面导航、表单提交或页面重排。
- 3.2.3 AA
一致的导航
在多个页面重复出现的导航机制——主导航、页脚、面包屑、搜索——必须在每个出现该机制的页面上保持相同的相对顺序。依赖肌肉记忆的用户不应每次都需要重新寻找布局。
- 3.2.4 AA
一致的标识
在同一网站中,功能相同的组件必须以一致的方式加以标识——相同的标签、相同的图标、相同的无障碍名称。在一个页面上标注为“搜索”的按钮,不应在另一个页面上变成“查找”。
- 3.2.5 AAA
按需变化
上下文的改变只应在用户主动请求时发生,或用户可以关闭自动变化功能。不得有自动重定向、意外刷新,也不得有在光标下自动切换内容的轮播图。
- 3.2.6 A 新增 2.2
一致的帮助
如果页面提供帮助机制——联系方式、帮助链接、聊天机器人、自助服务表单——这些机制必须在每个提供该机制的页面上以相同的相对顺序出现。这是 WCAG 2.2 新增条款。
- 3.3.1 A
错误识别
当系统自动检测到用户的表单错误时,必须以文本形式向用户标识并描述该错误——不能仅靠颜色、仅靠图标,也不能保持沉默。
- 3.3.2 A
标签或说明
每个需要用户输入的表单控件,都必须有标签或说明告知用户应填写的内容。仅使用占位文本、仅使用图标或空白输入框均不足以满足要求。
- 3.3.3 AA
错误建议
当系统检测到输入错误且已知修正方式时,必须向用户提供建议——除非此举会危及安全或破坏输入本身的目的。
- 3.3.4 AA
错误预防(法律、金融、数据)
对于涉及法律承诺、金融交易或对用户数据产生重大更改的提交操作,用户必须能够撤销提交、在有机会纠正的情况下经过错误检查,或在操作生效前进行明确确认。
- 3.3.5 AAA
帮助
对于需要用户输入的表单,可提供上下文相关帮助。帮助形式可包括格式示例、页面内提示、链接至指引文档,或联系渠道。
- 3.3.6 AAA
错误预防(所有)
对于任何用户提交操作——不仅限于法律、金融或数据更改类——用户必须能够在提交生效前撤销、检查或确认。这是成功准则 3.3.4 的 AAA 推广版本。
- 3.3.7 A 新增 2.2
冗余输入
用户在同一会话中已提供的信息不得再次要求填写——应自动填充或允许从列表中选择,除非重复输入是必要的(例如确认密码)。WCAG 2.2 新增准则。
- 3.3.8 AA 新增 2.2
无障碍身份验证(最低要求)
身份验证不得要求用户解决认知功能测试——记忆、转录、识别对象——除非提供了替代方案或辅助机制。密码、图形验证码以及“从邮件中复制验证码”流程是常见的失败情形。WCAG 2.2 新增准则。
- 3.3.9 AAA 新增 2.2
无障碍身份验证(增强要求)
身份验证不得要求任何认知功能测试,包括对象识别或个人内容识别。这是 3.3.8 的 AAA 级升级——通行密钥、生物特征和设备绑定凭证成为实际可行的路径。WCAG 2.2 新增准则。
4. 健壮
内容必须足够健壮,能够被包括辅助技术在内的各类用户代理所解析。
没有与筛选条件匹配的成功准则。