WebAIM的WCAG 2检查表

重要!

以下是《网页内容无障碍指引》(WCAG) 2。它是一个清单,为那些寻求WCAG一致性的人提供了实现可访问性原则和技术的建议。这里使用的语言大大简化和压缩了正式的WCAG 2.1规范和支持材料,使其更容易实现和验证网页。

使用本检查表的指南:

  • 这个清单不应在策略或策略采用中引用.虽然这对于WCAG的技术实现是一个有用的资源,这不是一个全面的政策清单。正式的WCAG文档为政策或法律实现可访问性提供了更好的机制。
  • wcag包含所有Web内容的可访问性,并且不是特定于技术的。此检查表的语言已被简化并有针对性地确定HTML和移动内容的最常见技术和失败。它是什么,因此,相当有限,可能会发生技术变化,而wcag则要少得多。
  • 这个清单包含WebAIM对WCAG指南和成功标准的解释以及我们自己为满足这些成功标准而推荐的技术.下表的第一列链接到正式的WCAG 2.1成功标准。

wcag 2.1中添加的成功标准标记为类似,背景为浅绿色。

此清单的PDF版本也可以

可感知的
网络内容可用于感官-视觉,听力,和/或触摸

准则1.1
文本替换:为任何非文本内容提供文本替换

成功标准 WebAIM的建议
1.1.1非文本内容
(水平)
  • 所有图片,窗体图像按钮,图像地图热点有适当的,等效可选文字.
  • 不传达内容的图像,是装饰,或者包含已经在文本中传递的内容,将被赋予空的alt文本(alt=“”)或实现为css背景。所有链接的图像都有描述性替代文本。
  • 在上下文或单独的链接页上提供了复杂图像的等效替代方案。
  • 表单按钮具有描述性值。
  • 表单输入已经关联文本标签.
  • 通过可访问的文本识别嵌入式多媒体。万博体育官网网址
  • 框架和iframes是适当的有头衔的.

1.2指导
基于时间的媒体:为基于时间的媒体提供替代方案

注意:如果音频或视频被指定为Web内容的替代品(例如,网页的音频或手语版本,例如,然后,Web内容本身就可以作为备选方案。

成功标准 WebAIM的建议
1.2.1仅预录音频和视频
(水平)
  • 包含相关听觉内容的描述性文本转录本仅用于非实时音频(音频播客,MP3文件,等等)。
  • 仅为非实时视频(例如,没有音轨的视频),除非视频是装饰性的。
1.2.2标题(预先记录)
(水平)
  • 同步字幕提供非实时视频(YouTube视频,等等)。
1.2.3音频描述或媒体替代(预先录制)
(水平)
  • 描述性文字抄本音频描述轨道提供非直播视频。
    注:仅当视频所传达的内容不是通过音轨所呈现的视觉内容时才需要。
1.2.4字幕(现场)
(要求等级AA)
  • 同步字幕提供给所有现场多媒体,其中包括音频(音频广播,网络投视频会议,等)
1.2.5音频描述(预录)
(要求等级AA)
  • 所有视频内容都提供了音频描述
    注:仅当视频所传达的内容不是通过音轨所呈现的视觉内容时才需要。
  • 虽然AA级不需要,WebAIM推荐使用描述性文本,而不是音频描述,以达到最佳的可访问性。
1.2.6手语(预录)
(AAA级)
  • 为包含音频的所有媒体内容提供手语视频。
1.2.7扩展音频描述(预先录制)
(AAA级)
  • 当音频描述由于音频定时无法添加到视频时(例如,音频暂停不足),提供了视频的另一个版本,其中包含允许音频描述的暂停。
1.2.8媒体备选方案(预录)
(AAA级)
  • 为所有具有视频跟踪的预录制媒体提供描述性文本记录。为获得最佳的可访问性,WebAIM强烈推荐所有多媒体内容的成绩单。
1.2.9自成一派(生活)
(AAA级)
  • 描述性文本记录(例如:直播音频的脚本)是为所有有音频的直播内容提供的。

准则1.3
适应性:创建可以以不同方式呈现的内容(例如更简单的布局),而不会丢失信息或结构

成功标准 WebAIM的建议
1.3.1信息和关系
(水平)
  • 语义标记用于指定标题(

    )地区/地标,列表(
      ,
        ,和
        )强调或特殊文本( ,,,
        ,例如,等。适当地使用语义标记。
      1. 用于表格数据,数据单元格与其标题相关联。数据表标题,如果存在,与数据表关联。
      2. 文本标签与表单输入元素关联。相关的表单元素用字段集/图例进行分组。当标准HTML不够用时,可以使用ARIA标签。

1.3.2意义的序列
(水平)
1.3.3感官特征
(水平)
  • 指令不依赖形状,尺寸,或视觉位置(例如:“单击方形图标继续”或“说明位于右栏”)。
  • 指令不依赖于声音(例如,“嘟嘟声表示您可以继续。”)。
1.3.4定向
(WCAG 2.1)
等级AA)
  • Web内容的方向不仅限于纵向或横向,除非需要特定的方向。
1.3.5确定输入目的
(WCAG 2.1)
等级AA)
1.3.6识别目的
(WCAG 2.1)
AAA级)
  • HTML5区域或ARIA地标用于标识页面区域。
  • 使用咏叹调,在适当的地方,增强HTML语义,更好地识别界面组件的用途。

准则1.4
可区分:让用户更容易看到和听到内容,包括区分前景和背景

成功标准 WebAIM的建议
1.4.1色彩的使用
(水平)
  • 颜色不是传达内容或区分视觉元素的唯一方法。
  • 颜色本身不用于区分链接除非链接与周围文本的对比度至少为3:1,否则从周围文本中删除额外的区别(例如,当链接悬停在上方并获得焦点时,它将变为下划线)。
1.4.2音频控制
(水平)
  • 提供一个停止机构,暂停,哑巴,或调整音量的音频,自动播放在一个页面上超过3秒。
1.4.3对比度(最小)
(要求等级AA)
  • 文本和文本图像具有对比度至少4.5:1。
  • 大文本—至少18点(通常为24px)或14点(通常为18.66px)和粗体—的对比度至少为3:1。
1.4.4调整文本
(要求等级AA)
  • 当页面缩放到200%时,页面可读且功能正常。注:1.4.10(以下)对缩放内容提出了更高的要求。
1.4.5文本图像
(要求等级AA)
  • 如果相同的视觉表现可以单独使用文本,图像不用于显示该文本。
1.4.6对比度(增强)
(AAA级)
  • 文本和文本图像具有对比度至少是7:1。
  • 大文本-至少18点(通常为24px)或14点(通常为18.66px)粗体-具有至少4.5:1的对比度。
1.4.7低或无背景音频
(AAA级)
  • 带语音的音频没有或非常低的背景噪声,因此很容易区分语音。
1.4.8视觉呈现
(AAA级)
  • 长度超过一个句子的文本块:
    • 宽度不超过80个字符。
    • 不完全对齐(对齐到左边缘和右边缘)。
    • 具有足够的行距(至少为文本高度的1/2)和段落间距(行距的1.5倍)。
    • 具有指定的前景色和背景色。这些可以应用于特定的元素或使用CSS的整个页面(从而由所有其他元素继承)。
    • 文本大小翻倍时不需要水平滚动。
1.4.9文本图像(无例外)
(AAA级)
  • 文本仅用于图像内部的装饰(图像不传达内容),或者当信息不能单独用文本呈现时。
1.4.10回流
(WCAG 2.1)
等级AA)
  • 当内容以320像素的宽度显示时,不会丢失内容或功能,并避免水平滚动。
    • 这需要对大多数web站点进行响应式设计。最好将浏览器窗口设置为1280像素宽,然后将页面内容缩放到400%。
  • 需要水平滚动的内容,例如数据表,复杂的图像(如地图和图表),工具栏,等。被豁免。
1.4.11非文本对比
(WCAG 2.1)
等级AA)
  • 对比度至少为3:1,用于区分图形对象(如图表或图形的图标和组件)和编写自定义接口组件(如按钮,表单控件,以及焦点指标/大纲)。
  • 各种状态(焦点,盘旋,活跃的,等)的作者定制的交互组件都必须呈现3:1的对比度。
1.4.12文本间距
(WCAG 2.1)
等级AA)
  • 当用户将文本行高/间距调整为字体大小的1.5倍时,不会丢失内容或功能。段落间距为字体大小的2倍,字间距为字体大小的.16倍,字母间距是字号的。12倍。
  • 最好是避免为包含文本的元素定义像素高度。
1.4.13悬停或聚焦内容
(WCAG 2.1)
等级AA)
  • 当鼠标悬停或键盘焦点上显示其他内容时:
    • 在不移动指针或键盘焦点的情况下,可以忽略新显示的内容(通常通过Esc键)。除非内容出现输入错误或不模糊或干扰其他页面内容。
    • 可以将指针移动到新内容,而不会使内容消失。
    • 新内容必须保持可见,直到指针或键盘焦点从触发控件移开,新内容被删除,或者新内容不再相关。

可操作的
接口形式,控制,导航是可操作的

准则2.1
键盘可访问:通过键万博体育官网网址盘提供所有功能

成功标准 WebAIM的建议
2.1.1键盘
(水平)
  • 所有页面功能都可以使用键盘,除非该功能无法以任何已知的方式使用键盘来实现(例如,自由手绘)。
  • 页面指定的快捷键和accesskey(通常应避免accesskey)与现有的浏览器和屏幕阅读器快捷键不冲突。
2.1.2无键盘陷阱
(水平)
  • 键盘焦点永远不会锁定或困在某个特定的页面元素中。用户只需要一个键盘就可以在所有可导航的页面元素之间进行导航。
2.1.3键盘(不例外)
(AAA级)
  • 所有页面功能都可以使用键盘。
2.1.4字符键快捷方式
(WCAG 2.1)
A级)
  • 如果键盘快捷方式使用可打印字符键,那么用户必须能够禁用key命令,将定义的键更改为不可打印的键(ctrl,Alt,等)或者只在相关的接口组件或按钮被聚焦时激活快捷方式。

2.2指导
足够的时间:为用户提供足够的时间阅读和使用内容

成功标准 WebAIM的建议
2.2.1定时可调
(水平)
  • 如果一个页面或应用程序有时间限制,用户可以选择关闭,调整,或者延长这个期限。这不是实时事件的要求(例如,拍卖)确需限期的,或者如果时限超过20小时。
2.2.2暂停,停止,隐藏
(水平)
  • 自动移动,闪烁,或滚动内容(如旋转木马,马奎斯或动画)如果持续时间超过5秒,则可以暂停,停止,或者被用户隐藏。
  • 自动更新内容(例如,动态更新的新闻标签,聊天消息,)可暂停,停止,或者被用户隐藏,或者用户可以手动控制更新的时间。
2.2.3没有时间
(AAA级)
  • 内容和功能没有时间限制或约束。
2.2.4中断
(AAA级)
  • 中断(警报,页面更新,)可被用户延迟或抑制。
2.2.5认证
(AAA级)
  • 如果身份验证会话过期,用户可以重新验证并继续该活动,而不会丢失当前页面中的任何数据。
2.2.6超时
(WCAG 2.1)
AAA级)
  • 必须警告用户任何可能导致数据丢失的超时,除非数据被保存超过20小时的用户不活动。

2.3指导
癫痫发作和身体反应:不要以已知会引起癫痫发作或身体反应的方式设计内容。

成功标准 WebAIM的建议
2.3.1三次闪光或低于阈值
(水平)
2.3.2闪烁三次
(AAA级)
  • 没有页面内容每秒闪烁超过3次。
2.3.3互动动画
(WCAG 2.1)
AAA级)
  • 用户可以禁用由用户交互触发的非必要动画和移动。

2.4指导
可导航:提供帮助用户导航的方法,找到的内容,确定它们在哪里。

成功标准 WebAIM的建议
2.4.1绕过块
(水平)
  • 链接提供给跳过导航以及在整个web页面中重复出现的其他页面元素。
  • 适当的标题结构和/或识别页面区域/地标可能被认为是一项足够的技术。由于大多数浏览器不支持按标题或区域导航,WebAIM建议使用“跳过”链接(除了标题和区域),以最好地支持有视力的键盘用户。
2.4.2标题页
(水平)
  • 网页具有描述性和信息性的网页标题。
2.4.3关注订单
(水平)
  • 链接的导航顺序,表格元素,等。是合乎逻辑和直觉的。
2.4.4链接目的(在上下文中)
(水平)
  • 每个链接(或窗体图像按钮或图像映射热点)的用途可以单独从链接文本确定,或从链接文本及其上下文(例如,环绕文字,列表项,表格单元格,或表格标题)。
  • 具有相同文本的链接(或表单图像按钮)可以很容易地识别到不同的位置。
2.4.5多种方式
(要求等级AA)
  • 多种方式可在网站上找到其他网页-至少两个:相关网页列表,目录,站点地图,网站搜索,或所有可用网页的列表。
2.4.6标题和标签
(要求等级AA)
  • 表单和交互控件的页面标题和标签具有信息性。避免重复标题(例如,“更多详细信息”)或标签文本(例如,除非结构提供了它们之间的充分区别。
2.4.7焦点可见
(要求等级AA)
  • 可以直观地看出哪个页面元素具有当前的键盘焦点(即,当你翻页时,你可以看到你在哪里)。
2.4.8位置
(AAA级)
  • 如果一个网页是一个网页序列的一部分或在一个复杂的网站结构,提供当前页面位置的指示,例如,通过面包屑或按顺序指定当前步骤(例如,“第2步,共5步-送货地址”)。
2.4.9链接目的(仅链接)
(AAA级)
  • 每个链接(或表单图像按钮或图像地图热点)的目的可以仅从链接文本中确定。
  • 不存在指向不同位置的具有相同文本的链接(或表单图像按钮)。
2.4.10节标题
(AAA级)
  • 除了提供完整的文档结构外,使用标题指定内容的各个部分,在适当的情况下。

准则2.5
输入方式:使用户通过键盘以外的各种输入更容易操作功能。

成功标准 WebAIM的建议
2.5.1指针笔势
(WCAG 2.1)
A级)
  • 如果多点或基于路径的手势(如挤压,刷,或者在屏幕上拖动)对功能不重要,然后,还可以通过单点激活(例如激活按钮)来执行该功能。
2.5.2指针取消
(WCAG 2.1)
A级)
  • 为了避免意外激活控件,避免非必要的停机事件(例如,onmousedown)点击激活,攻丝,或者长按屏幕。使用onclick,onmouseup,或者类似的。如果使用了OnMouseup(或类似产品),必须提供中止或撤消所执行操作的机制。
2.5.3名称中的标签
(WCAG 2.1)
A级)
  • 如果接口组件(链接,按钮,)显示文本(或文本的图像),可访问的万博体育官网网址名称(标签,替代文本,aria-label,对于该组件,必须包括可见文本。
2.5.4运动驱动
(WCAG 2.1)
A级)
  • 通过移动设备(如震动或移动设备)或用户移动(如向相机挥手)触发的功能可以被禁用,通过按钮等标准控件提供同等功能。
2.5.5目标尺寸
(WCAG 2.1)
AAA级)
  • 可单击目标的大小至少为44×44像素,除非提供该大小的替代目标,目标是内联的(例如一个句子中的链接),目标未经作者修改(例如默认复选框)。或者较小的目标大小对于功能来说是必不可少的。
2.5.6并发输入机制
(WCAG 2.1)
AAA级)
  • 内容不限制输入到特定形式,如仅触摸或仅键盘,但必须支持其他输入(如在移动设备上使用键盘)。

可以理解的
信息和用户界面的操作必须是可以理解的。

准则3.1
可读性:使文本内容可读和可理解

成功标准 WebAIM的建议
3.1.1页面语言
(水平)
  • 使用html lang属性(例如,)
3.1.2零件语言
(要求等级AA)
  • 使用lang属性(例如,
3.1.3异常词
(AAA级)
  • 这可能是模棱两可的,不熟悉的,或者以非常具体的方式使用,通过相邻的文本定义,一个定义列表,一个术语表,或者其他合适的方法。
3.1.4缩略语
(AAA级)
  • 一个不熟悉的缩写词的含义是通过第一次使用时展开来提供的,使用元素,或链接到定义或术语表。
3.1.5阅读水平
(AAA级)
  • 一个更容易理解的替代方案是,提供的内容比一个接受过大约9年小学教育的人能够合理阅读的内容更先进。
3.1.6发音
(AAA级)
  • 如果一个单词的发音对理解这个单词至关重要,它的发音是紧跟着单词或通过链接或词汇表提供的。

准则3.2
可预测:使网页以可预测的方式显示和操作

成功标准 WebAIM的建议
3.2.1聚焦
(水平)
  • 当page元素收到焦点时,它不会导致对页面的实质性更改,弹出窗口的产生,另一个键盘焦点的改变,或任何其他可能使用户迷惑或迷惑的更改。
3.2.2输入
(水平)
  • 当用户输入信息或与控件交互时,它不会导致对页面的实质性更改,弹出窗口的产生,另一个键盘焦点的改变,或任何其他可能使用户感到困惑或迷惑的更改,除非事先通知用户更改。
3.2.3一致的导航
(要求等级AA)
  • 在网页上重复的导航链接在浏览网站时不会更改顺序。
3.2.4一致的识别
(要求等级AA)
  • 跨多个网页具有相同功能的元素被一致地标识。例如,网站顶部的搜索框应始终以相同的方式标记。
3.2.5要求变更
(AAA级)
  • 页面发生重大变化,弹出窗口的生成,键盘焦点不受控制的变化,或者任何其他可能使用户混淆或失去方向感的更改都必须由用户启动。另外,用户可以选择禁用这些更改。

3.3指导
输入帮助:帮助用户避免和纠正错误

成功标准 WebAIM的建议
3.3.1错误识别
(水平)
  • 所需的表单元素或需要特定格式的表单元素,值,或者长度在元素的标签中提供此信息。
  • 表单验证错误是有效的,直观,和访问。万博体育官网网址错误被明确识别,提供了对问题元素的快速访问,用户可以很容易地修复错误并重新提交表单。
3.3.2标签或说明
(水平)
  • 足够的标签,暗示,并通过指令提供所需交互元素的指令,例子,正确放置表单标签,和/或字段集/图例。
3.3.3错误建议
(要求等级AA)
  • 如果检测到输入错误(通过客户端或服务器端验证),为及时、方便地确定输入提供了建议。万博体育官网网址
3.3.4错误预防(合法、金融,数据)
(要求等级AA)
  • 如果用户可以合法更改或删除,金融,或测试数据,可撤销更改/删除,已证实的,或确认。
3.3.5帮助
(AAA级)
  • 在上下文中提供了说明和提示,以帮助完成和提交表单。
3.3.6防错(全部)
(AAA级)
  • 如果用户可以提交信息,提交是可逆的,已证实的,或确认。

健壮的
内容必须足够健壮,能够被各种各样的用户代理解释,包括辅助技术

4.1指导
兼容:最大限度地与当前和未来的用户代理兼容,包括辅助技术

成功标准 WebAIM的建议
4.1.1句法分析
(水平)
4.1.2名,角色,价值
(水平)
  • 标记的使用方式有助于访问。这包括遵循HTML/XHTML规范和使用表单,表单标签,框架标题,等。适当地。
  • 当HTML不够时,可以适当地使用aria来增强可访问性。
4.1.3状态信息
(WCAG 2.1)
等级AA)
  • 如果出现重要的状态消息,并且焦点未设置为该消息,消息必须通知屏幕阅读器用户,通常通过ARIA警报或活动区域。

此清单是作为帮助实现的资源提供的Web内容可访问性指南(WCAG)2.1(W3C建议2018年6月5日)这是版权专利2017~2018W3C®.