web main  - 考虑到网络可访问性

WebAIM的WCAG 2清单

重要!

下面是网站内容可访问性指南(WCAG) 2。它是一个检查表,为那些寻求WCAG一致性的人提供了实现可访问性原则和技术的建议。这里使用的语言显著地简化和压缩了正式的WCAG 2.1规范和支持材料,以使web页面的实现和验证更加容易。

使用此检查表的指导原则:

  • 这个清单不应该在政策或政策采用中被引用。虽然这是WCAG技术实现的有用资源,但这不是全面的策略清单。官方WCAG文件提供了更好的机制,以实现政策或法律的可访问性。
  • WCAG涵盖了所有web内容的可访问性,而不是特定于技术的。这个检查表的语言已经简化,目标是识别HTML和移动内容的最常见技术和失败。因此,它是相当有限的,并受技术变化的影响,而WCAG则远没有这样。
  • 这个清单包含Webaim对WCAG指南和成功标准的解释以及我们推荐的令人满意的那些成功标准的技术。下表的第一列链接到WCAG 2.1成功标准。

WCAG 2.1中添加的成功标准是这样标记的,并有一个浅绿色的背景。

此检查表的PDF版本也可以

可爱
网页内容是可获得的感官-视觉,听觉,和/或触觉

准则1.1
文本备选方案:为任何非文本内容提供文本替代方案

成功的标准 WebAIM的建议
1.1.1非文本内容
(等级a)
  • 图像,表格图像按钮和图像映射热点有适当的,等价物替代文本
  • 不传达内容的图像是装饰性,或包含在文本中已传达的内容的内容是给予空的替代文本(ALT =“”)或实现为CSS背景。所有链接图像都具有描述性的替代文本。
  • 在上下文或单独的链接页面上提供了复杂图像的等效替代方案。
  • 表单按钮具有描述性值。
  • 表单输入已关联文本标签
  • 嵌入式多媒体是通过可访问的文本识别的。万博体育官网网址
  • Frames和iframes是合适的标题为

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

注意:如果音频或视频被指定为Web内容的替代方案(例如,网页的音频或标志语言版本),则Web内容本身就可以作为替代方案。

成功的标准 WebAIM的建议
1.2.1预先录制的音频和视频
(等级a)
  • 一个成绩单仅为非实时音频(音频播客,MP3文件等)提供相关内容。
  • 成绩单或者音频描述的相关内容只提供给非现场视频,除非该视频是装饰性的。
1.2.2字幕(上)
(等级a)
  • 同步字幕提供非实时视频(YouTube视频等)。
1.2.3音频描述或媒体替代(预先录制)
(等级a)
  • 一个记录音频描述提供了非现场视频。
    注意:只有在音频中没有相关的可视内容时才需要。
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)
  • 语义标记用于指定标题(

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

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秒。
3对比(最小)
(要求等级AA)
  • 文本与图像的文本对比度至少为4.5:1。
  • 大字体——至少18点(通常是24像素)或14点(通常是18.66像素)和粗体——的对比度至少是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)
  • 当用户将段落间距为2倍的字体大小,文本行高/间距为1.5倍的字体大小时,不会发生内容或功能的损失,将字体尺寸的单词间隔为.16倍。字体大小。
  • 避免对包含文本的元素进行像素高度定义是最好的支持方法。
1.4.13悬停或焦点的内容
(WCAG 2.1.
等级AA)
  • 当鼠标悬停或键盘焦点上显示其他内容时:
    • 除非内容呈现输入错误或不模糊或干扰其他页面内容,否则新显示的内容可以被解雇(通常通过ESC键)而不移动指针或键盘焦点。
    • 指针可以移动到新内容而不消失。
    • 新内容必须保持可见,直到指针或键盘焦点从触发控制移动,新内容被忽略,或者新内容不再相关。

可操作
界面表单、控件和导航都是可操作的

指南2.1
键盘可访问:使所有万博体育官网网址功能可用的键盘

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

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

成功的标准 WebAIM的建议
2.2.1定时可调
(等级a)
  • 如果页面或应用程序有时间限制,则给出用户关闭,调整或扩展该时间限制的选项。这不是实时事件(例如,拍卖)的要求,其中绝对需要的时间限制,或者如果时间限制长于20小时。
2.2.2暂停,停止,隐藏
(等级a)
  • 用户可以暂停、停止或隐藏持续时间超过5秒的自动移动、闪烁或滚动内容(如旋转木马、marquees或动画)。
  • 可以暂停,停止或隐藏内容(例如,动态更新的新闻零售机,聊天消息等),或者用户可以手动控制更新的定时。
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)
  • 提供了一个链接跳过导航以及跨web页面重复的其他页面元素。
  • Page地区/地标的适当的标题结构和/或识别可能被认为是足够的技术。由于大多数浏览器不支持徽标或区域导航,因此Webaim建议“跳过”链接(除标题和地区除标题和地区)最佳支持键盘用户。
2.4.2标题为题为
(等级a)
  • 该web页面有一个描述性和信息性的页面标题。
2.4.3关注订单
(等级a)
  • 链接、表单元素等的导航顺序是符合逻辑和直观的。
2.4.4链接目的(在文中)
(等级a)
  • 每个链接(或表单图像按钮或图像地图热点)的目的可以仅从链接文本确定,也可以从链接文本及其上下文(例如,周围的文本、列表项、前一个标题或表标题)确定。
  • 链接(或表格映像按钮)与转到不同位置的相同文本易于区分。
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.
水平)
  • 如果基于多点或基于路径的手势(例如捏合,滑动或跨越屏幕)不是功能的必需作用,则还可以用单点激活(例如激活按钮)来执行功能。
2.5.2指针取消
(WCAG 2.1.
水平)
  • 为了避免无意中激活控件,请避免在单击、轻击或长按屏幕时激活非必要的down-event(例如,onmousedown)。使用onclick、onmouseup或类似的方法。如果使用了onmouseup(或类似的),则必须提供一种机制来中止或撤销所执行的操作。
2.5.3名称标签
(WCAG 2.1.
水平)
  • 如果界面组件(链接、按钮等)显示文本(或文本的图像),该组件的可访问名称(标签、替代文本、aria-label等)必须包含可见文本。万博体育官网网址
2.5.4运动驱动
(WCAG 2.1.
水平)
  • 可以禁用通过移动设备(例如摇动或平移移动设备)或用户移动(例如挥动到相机)来触发的功能,并且通过标准控制等等同的功能,如按钮。
2.5.5目标规模
(WCAG 2.1.
水平AAA)
  • 点击目标至少44×44像素大小,除非另一个这种规模的目标,目标是内联(比如链接在一个句子),目标不是author-modified(比如一个默认的复选框),或小目标大小的功能至关重要。
2.5.6并发输入机制
(WCAG 2.1.
水平AAA)
  • 内容不将输入限制为特定的方式,如仅使用触摸或仅使用键盘,但必须支持替代输入(如在移动设备上使用键盘)。

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

指南3.1
可读性:使文本内容可读性和可理解性

成功的标准 WebAIM的建议
3.1.1页面语言
(等级a)
  • 使用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对焦点
(等级a)
  • 当页面元素接收到焦点时,它不会导致对页面的实质性更改、弹出窗口的生成、键盘焦点的额外更改或任何其他可能使用户困惑或迷惑的更改。
3.2.2在输入
(等级a)
  • 当用户输入信息或与控制,它不会导致大幅改变页面,弹出窗口的产卵,一个额外的键盘焦点的变化,或任何其他的变化可能会混淆或迷惑用户,除非用户提前通知的变化。
3.2.3一致的导航
(要求等级AA)
  • 在通过网站导航时,在网页上重复的导航链接不会更改订单。
3.2.4一致的识别
(要求等级AA)
  • 对跨多个web页面具有相同功能的元素进行一致标识。例如,网站顶部的搜索框应该始终以相同的方式标记。
3.2.5应要求进行变更
(水平AAA)
  • 页面的实质性更改,弹出窗口的产卵,键盘焦点的不受控制更改,或者必须混淆或讨厌用户的任何其他更改必须由用户发起。或者,用户提供了一种禁用这种改变的选项。

指南3.3
输入辅助:帮助用户避免并纠正错误

成功的标准 WebAIM的建议
3.3.1错误识别
(等级a)
  • 需要特定格式,值或长度的必需的表单元素或表单元素在元素的标签中提供此信息。
  • 表格验证错误是有效的、直观的、容易理解的。万博体育官网网址错误被清楚地识别出来,提供了对问题元素的快速访问,用户可以轻松地修复错误并重新提交表单。
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规范,适当地使用表单、表单标签、框架标题等。
  • 适当地使用ARIA来增强HTML不够时的可访问性。
4.1.3状态信息
(WCAG 2.1.
等级AA)
  • 如果出现了重要的状态消息并未将重点设置为该消息,则必须通过ARIA警报或实时区域宣布浏览读者用户的消息。

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