WebAIM WCAG 2清单

重要!

以下是网页内容无障碍指南(WCAG)2这是一份清单,介绍了我们为实现WCAG一致性的人员实施可访问性原则和技术的建议这里使用的语言显着简化和浓缩官方WCAG 2.1规范和支持材料,以便更容易实现和验证网页。

使用这个清单指南:

  • 这份清单should not be referenced in policies or in policy adoption虽然这是WCAG技术实施的有用资源,但它不是一个全面的政策核对清单WCAG官方文件为实施政策或法律的可访问性提供了更好的机制。
  • WCAG涵盖所有Web内容的可访问性,并非特定于技术该清单的语言已经过简化,目标是识别HTML和移动内容的最常见技术和故障因此,它相当有限并且受技术变化的影响,而WCAG则不那么重要。
  • 这个清单包含WebAIM对WCAG指南和成功标准的解释以及我们自己推荐的满足这些成功标准的技术下表的第一列链接到WCAG 2.1官方成功标准。

WCAG 2.1中添加的成功标准被标记为具有浅绿色背景。

此核对表的PDF版本也可以

感知
网络内容可供感官使用 - 视觉,听觉和/或触摸

1.1指导
文本替代方案:为任何非文本内容提供文本替代方案

成功标准 WebAIM的建议
1.1.1非文本内容
(A级)
  • 所有图片、表单图片按钮和图像映射热点有适当,等价的替代文本
  • 不传达内容,装饰性或包含已在文本中传达的内容的图像将被赋予空替换文本(alt =“”)或实现为CSS背景所有链接的图像都有描述性的替代文字。
  • 复杂图像的等效替代方案在上下文中或在单独的链接页面上提供。
  • 表单按钮具有描述性值。
  • 表单输入有相关联的文字标签
  • 嵌入式多媒体通过万博体育官网网站文本识别。
  • 框架和iframe是适当的标题

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

注意:如果指定的音频或视频替代web内容(例如,一个音频或手语版的网页,例如),然后web内容本身作为替代。

成功标准 WebAIM的建议
1.2.1预录制仅音频和仅视频
(A级)
  • 一个描述性的文字记录,包括有关听觉内容non-live自成一派(音频播客,MP3文件,等等)。
  • 除非视频是装饰性的,否则为非实况视频(例如,没有音频轨道的视频)提供描述性文本转录本或音频描述。
1.2.2字幕(预先录制)
(A级)
  • 同步标题提供非实时视频(YouTube视频等)。
1.2.3音频描述或媒体替代(预先录制)
(A级)
  • A descriptive text成绩单要么音频描述跟踪是为非实时视频提供的。
    注意:仅在视频以视觉方式传达未通过音轨呈现的内容时才需要。
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信息和关系
(A级)
  • 语义标记is used to designate headings (<h1>), regions/landmarks, lists (<ul>, <ol>, and <dl>), emphasized or special text (<strong>, <code>, <abbr>, <blockquote>, for example), etc语义标记被适当地使用。
  • 用于表格数据,数据单元格与其标题相关联数据表标题(如果存在)与数据表相关联。
  • 文本标签与表单输入元素相关联相关表单元素与fieldset / legend组合在一起当标准HTML不足时,可以使用ARIA标签。
1.3.2有意义的序列
(A级)
1.3.3感官特征
(A级)
  • 说明不依赖于形状,大小或视觉位置(例如,“单击方形图标继续”或“说明位于右侧列”)。
  • 说明不依赖于声音(例如,“哔哔声表示您可以继续。”)。
1.3.4定位
(WCAG 2.1
AA级)
  • 除非需要特定的方向,否则网页内容的方向不仅限于纵向或横向。
1.3.5识别输入的目的
(WCAG 2.1
AA级)
1.3.6确定目的
(WCAG 2.1
AAA级)
  • HTML5区域或ARIA地标用于标识页面区域。
  • 在适当的情况下,ARIA用于增强HTML语义,以更好地识别接口组件的用途。

准则1.4
难以区分:让用户更容易看到和听到内容,包括将前景与背景分开

成功标准 WebAIM的建议
1.4.1颜色的使用
(A级)
  • 颜色不是用于传达内容或区分视觉元素的唯一方法。
  • 单独的颜色不用于区分链接从周围的文本除非链接之间的对比度和周围文本至少是3:1当链接悬停在并且接收焦点时,提供另外的区别(例如,它变得加下划线)。
1.4.2音频控制
(A级)
  • 提供了一种机制,用于停止,暂停,静音或调整自动在页面上播放超过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像素的宽度呈现时,不会发生内容或功能的丢失,并且避免水平滚动。
    • 这需要大多数网站的响应式设计这是最好的测试通过设置浏览器窗口1280像素宽,然后缩放页面内容到400%。
  • 需要水平滚动的内容,例如数据表,复杂图像(如地图和图表),工具栏等免除。
1.4.11非文本对比
(WCAG 2.1
AA级)
  • 对于区分图形对象(例如图标和图表或图形的组件)和作者定制的界面组件(例如按钮,表单控件和焦点指示符/轮廓),存在至少3:1的对比度。
  • 作者定制的交互式组件的各种状态(焦点,悬停,活动等)必须都呈现3:1的对比度。
1.4.12文本间距
(WCAG 2.1
AA级)
  • No loss of content or functionality occurs when the user adapts text line height/spacing to 1.5 times the font size, paragraph spacing to 2 times the font size, word spacing to .16 times the font size, and letter spacing to .12 times the font size.
  • 避免包含文本的元素的像素高度定义可以最好地支持这一点。
1.4.13内容悬浮或焦点
(WCAG 2.1
AA级)
  • 在悬停或键盘焦点上显示其他内容时:
    • 除非内容呈现输入错误或不模糊或干扰其他页面内容,否则可以在不移动指针或键盘焦点的情况下解除新显示的内容(通常通过Esc键)。
    • 指针可以移动到新内容而内容不会消失。
    • 在指针或键盘焦点远离触发控件,新内容被解除或新内容不再相关之前,新内容必须保持可见。

可操作性
界面表单,控件和导航是可操作的

准则2.1
Keyboard 万博体育官网网址: Make all functionality available from a keyboard

成功标准 WebAIM的建议
2.1.1键盘
(A级)
  • 所有的页面功能可以使用键盘,除非功能不能使用任何已知的方法完成键盘(例如,徒手画)。
  • 页面指​​定的快捷键和访问键(通常应避免使用accesskey)与现有的浏览器和屏幕阅读器快捷方式不冲突。
2.1.2没有键盘陷阱
(A级)
  • 键盘焦点永远不会锁定或陷入某个特定的页面元素用户可以仅使用键盘导航到所有可导航页面元素和从导航页面元素导航。
2.1.3键盘(无例外)
(AAA级)
  • 使用键盘可以使用所有页面功能。
2.1.4字符键快捷键
(WCAG 2.1
水平)
  • If a keyboard shortcut uses printable character keys, then the user must be able to disable the key command, change the defined key to a non-printable key (Ctrl, Alt, etc.), or only activate the shortcut when an associated interface component or button is focused.

准则2.2
足够的时间:为用户提供足够的时间来阅读和使用内容

成功标准 WebAIM的建议
2.2.1时序可调
(A级)
  • 如果页面或应用程序有时间限制,则会为用户提供关闭,调整或延长该时间限制的选项这不是对实时事件(例如,拍卖)的要求,其中绝对需要时间限制,或者如果时间限制超过20小时。
2.2.2 Pause, Stop, Hide
(A级)
  • Automatically moving, blinking, or scrolling content (such as carousels, marquees, or animations) that lasts longer than 5 seconds can be paused, stopped, or hidden by the user.
  • 可以由用户暂停,停止或隐藏自动更新内容(例如,动态更新的新闻自动收报机,聊天消息等),或者用户可以手动控制更新的定时。
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三次闪烁或低于阈值
(A级)
2.3.2三次闪烁
(AAA级)
  • 没有页面内容每秒闪烁超过3次。
2.3.3交互动画
(WCAG 2.1
AAA级)
  • 用户可以禁用不必要的动画和运动所引发的用户交互。

准则2.4
通航:提供方法来帮助用户浏览,找到内容,并确定他们在哪里。

成功标准 WebAIM的建议
2.4.1绕过块
(A级)
  • 提供链接跳过导航以及在网页上重复的其他页面元素。
  • 适当的标题结构和/或页面区域/标记的标识可以被认为是足够的技术由于大多数浏览器不支持按标题或区域导航,因此WebAIM建议使用“跳过”链接(除了标题和区域)以最好地支持有视力的键盘用户。
2.4.2页面标题
(A级)
  • 该网页具有描述性和信息性的页面标题。
2.4.3焦点顺序
(A级)
  • 链接,表单元素等的导航顺序是合乎逻辑且直观的。
2.4.4链接的目的(背景)
(A级)
  • 每个链接(或表单图像按钮或图像映射热点)的目的可以单独从链接文本确定,或者从链接文本及其上下文(例如,周围文本,列表项,表格单元格或表格标题)确定。
  • Links (or form image buttons) with the same text that go to different locations are readily distinguishable.
2.4.5多种方式
(AA级)
  • 多种方式可以在网站上找到其他网页 - 至少有两个:相关页面列表,目录,站点地图,站点搜索或所有可用网页的列表。
2.4.6标题和标签
(AA级)
  • 表单和交互式控件的页面标题和标签是提供信息的避免重复标题(例如,“更多细节”)或标签文本(例如,“名字”),除非该结构提供它们之间的充分区分。
2.4.7焦点可见
(AA级)
  • 在视觉上可以看出哪个页面元素具有当前键盘焦点(即,当您在页面中切换时,您可以看到您的位置)。
2.4.8位置
(AAA级)
  • 如果一个web页面的页面是一个序列的一部分或在一个复杂的网站结构,表明当前页面位置,例如,通过面包屑或指定当前步骤序列(例如,“5 -送货地址的步骤2”)。
2.4.9链接目的(仅限链接)
(AAA级)
  • 每个链接(或表单图像按钮或图像映射热点)的目的可以仅从链接文本中确定。
  • 没有链接(或表单图像按钮)具有到不同位置的相同文本。
2.4.10节标题
(AAA级)
  • 除了提供整体文档结构之外,在适当的情况下,使用标题指定内容的各个部分。

准则2.5
输入模式:用户可以通过键盘以外的各种输入更轻松地操作功能。

成功标准 WebAIM的建议
2.5.1指针手势
(WCAG 2.1
水平)
  • 如果基于多点或基于路径的手势(例如在屏幕上进行捏合,滑动或拖动)对功能不是必需的,则还可以通过单点激活(例如激活按钮)来执行功能。
2.5.2指针取消
(WCAG 2.1
水平)
  • 为了避免无意中激活控件,请在单击,点击或长按屏幕时避免非必要的故障事件(例如,onmousedown)激活请改用onclick,onmouseup或类似物如果使用onmouseup(或类似),则必须提供中止或撤消所执行操作的机制。
2.5.3名称中的标签
(WCAG 2.1
水平)
  • 如果界面组件(链接,按钮等)呈现文本(或文本图像),则该组件的名称(标签,替代文本,咏叹调标签等)必须包含可见文本。
2.5.4运动驱动
(WCAG 2.1
水平)
  • 可以禁用通过移动设备(例如摇动或平移移动设备)或通过用户移动(例如向相机挥手)触发的功能,并通过标准控件(如按钮)提供相同的功能。
2.5.5目标大小
(WCAG 2.1
AAA级)
  • Clickable targets are at least 44 by 44 pixels in size unless an alternative target of that size is provided, the target is inline (such as a link within a sentence), the target is not author-modified (such as a default checkbox), or the small target size is essential to the functionality.
2.5.6并发输入机制
(WCAG 2.1
AAA级)
  • 内容不会限制特定模态的输入,例如仅触摸或仅键盘,但必须支持其他输入(例如在移动设备上使用键盘)。

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

准则3.1
可读:使​​文本内容易读且易于理解

成功标准 WebAIM的建议
3.1.1页面语言
(A级)
  • 使用HTML lang属性(例如,<html lang =“en”>)标识页面的语言。
3.1.2部件语言
(AA级)
  • 使用lang属性(例如,<blockquote lang =“es”>)来标识不同语言的页面内容的语言。
3.1.3不寻常的词
(AAA级)
  • that may be ambiguous, unfamiliar, or used in a very specific way are defined through adjacent text, a definition list, a glossary, or other suitable method.
3.1.4缩写
(AAA级)
  • 通过在第一次使用时扩展它,使用<abbr>元素或链接到定义或术语表来提供不熟悉的缩写的含义。
3.1.5阅读水平
(AAA级)
  • 对于比具有大约9年小学教育的人合理阅读的内容而言,提供了更易理解的替代方案。
3.1.6发音
(AAA级)
  • 如果一个词的发音是至关重要的理解这个词,它的发音是词或通过一个链接或后立即提供术语表。

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

成功标准 WebAIM的建议
3.2.1聚焦
(A级)
  • 当页面元素获得焦点时,它不会导致页面的实质性更改,弹出窗口的产生,键盘焦点的额外更改或可能使用户感到困惑或迷惑的任何其他更改。
3.2.2在输入
(A级)
  • When a user inputs information or interacts with a control, it does not result in a substantial change to the page, the spawning of a pop-up window, an additional change of keyboard focus, or any other change that could confuse or disorient the user unless the user is informed of the change ahead of time.
3.2.3一致的导航
(AA级)
  • 导航链接网页上重复浏览网站时不要改变订单。
3.2.4一致的识别
(AA级)
  • 一致地识别在多个网页上具有相同功能的元素例如,网站顶部的搜索框应始终以相同的方式标记。
3.2.5变更请求
(AAA级)
  • 实质性的修改页面,弹出窗口的产卵,不受控制的键盘焦点的变化,或任何其他可能混淆的变化或迷惑用户必须由用户发起另外,用户提供一个选项来禁用这些变化。

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

成功标准 WebAIM的建议
3.3.1错误识别
(A级)
  • 所需的表单元素或需要特定格式的表单元素,价值,或者在元素的标签长度提供这些信息。
  • 表格验证错误是高效,直观和有效的The error is clearly identified, quick access to the problematic element is provided, and the user can easily fix the error and resubmit the form.
3.3.2标签或说明
(A级)
  • 通过指令,示例,正确定位的表单标签和/或字段集/图例提供对所需交互元素的足够标签,提示和指令。
3.3.3错误的建议
(AA级)
  • 如果检测到输入错误(通过客户端或服务器端验证),则会提供建议,以便及时修复输入。
3.3.4错误预防(法律,财务,数据)
(AA级)
  • 如果用户可以更改或删除法律,财务或测试数据,则可以撤消,验证或确认更改/删除。
3.3.5帮助
(AAA级)
  • 上下文中提供了说明和提示,以帮助完成和提交表单。
3.3.6错误预防(全部)
(AAA级)
  • 如果用户可以提交信息,则提交是可逆的,已验证或已确认。

强大的
内容必须足够健壮,以便可以由各种用户代理解释,包括辅助技术

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

成功标准 WebAIM的建议
以下4.4.1解析
(A级)
4.1.2名称、作用、价值
(A级)
  • 标记以便于访问的方式使用这包括遵循HTML / XHTML规范并使用表单,表单标签,框架标题等适当。
  • 当HTML不足时,ARIA被适当地用于增强可访问性。
4.1.3状态消息
(WCAG 2.1
AA级)
  • 如果显示重要状态消息并且未将焦点设置为该消息,则必须通过ARIA警报或实时区域向屏幕阅读器用户公布该消息。

此核对表是作为帮助实施的资源提供的Web内容可访问性指南(WCAG)2.1(W3C 2018年6月5日建议书),即版权©2017-2018W3C®