SERIES 01 / WEB FOR EVERYONE
Web 无障碍
让每个人都能使用 Web 的标准。深入理解每项要求,学习如何借助 AI 进行评估。
学习顺序
入门
先了解评估视角与方法。
- 01Web 无障碍入门:如何结合 WCAG 与 AI 设计评估
从用户获取信息并完成任务的过程理解 Web 无障碍。了解 WCAG 2.2 的结构和借助 AI 进行评估的方法,明确目标页面、用户流程及所需证据,为运行第一个评估提示词做好准备。
可感知的 Web
通过视觉、听觉及其他形式获取信息。
- 02替代文本:传达图像所承担的作用
设计能够说明图像目的与上下文,而非仅说明图像存在的替代内容。
- 03预录音频与无声视频:通过其他途径获取相同信息
区分纯音频与纯视频材料所需的替代内容。
- 04预录字幕:同时传达对白与重要声音
评估字幕是否提供、是否准确,以及说话者区分和同步情况。
- 05画面描述与媒体替代内容:说明仅在视频画面中呈现的信息
通过描述或充分的替代内容传达预录视频中的视觉信息。
- 06实时字幕:避免遗漏直播信息
介绍检查实时同步媒体字幕的方法。
- 07预录音频描述:让画面中的关键信息可以被听见
检查 AA 级要求的视觉信息音频描述。
- 08手语翻译:预录音频的另一条语言途径
区分是否提供手语翻译,以及评估所需的语言专业能力。
- 09扩展音频描述:暂停画面,为说明留出时间
检查音频间隙不足的视频是否需要扩展描述。
- 10完整的媒体替代内容:通过文档了解整个视频
检查预录同步媒体和纯视频材料的完整替代内容。
- 11实时音频替代内容:即使听不到也能获取指引
为实时纯音频信息准备等效的替代内容。
- 12信息与关系:通过代码传达画面结构
向辅助技术传达标题、列表、表格和表单中的关系。
- 13有意义的顺序:让显示顺序与阅读顺序相符
评估阅读顺序是否保持信息的含义。
- 14感官指示:不只用右侧或红色来指引
改进依赖形状、颜色、位置或声音的指示。
- 15屏幕方向:横屏与竖屏都能使用
检查是否存在无必要理由的屏幕方向限制。
- 16输入目的:让自动填充能够识别字段
通过代码识别用户个人信息输入的目的。
- 17元素目的:让 UI 能够适应用户需求
介绍识别控件、图标和区域目的的 AAA 级准则。
- 18颜色:不将其作为信息的唯一线索
通过颜色之外的方式传达状态与区别。
- 19自动播放音频:能够停止和调节
确认自动播放超过 3 秒的音频是否有控制途径。
- 20文本对比度:确保可读的明度差异
根据条件计算普通文本与大号文本的对比度。
- 21文本放大:在 200% 时仍保持功能
检查放大文字时是否损失内容或操作功能。
- 22文本图像:以实际文字提供内容
用可调整的文本代替图像中的文字。
- 23增强文本对比度:更高的可读性目标
将 AAA 级对比度目标应用于普通文本与大号文本。
- 24背景声音:清晰传达人声
检查预录纯音频材料中的背景声音。
- 25文本呈现:让用户选择阅读方式
综合讨论行长度、行间距、对齐方式和颜色调整。
- 26文本图像的更严格准则
了解 AAA 级对文本图像的允许范围。
- 27重排:在窄屏上也能阅读与操作
减少放大和小视口情况下的双向滚动。
- 28非文本对比度:区分控件与图形
评估控件和传达信息的图形的明度差异。
- 29文本间距:更改阅读设置后仍保留内容
构建能够适应字间距、词间距、行间距和段落间距变化的页面。
- 30悬停或焦点触发的内容:可以关闭、移入并阅读
确认工具提示和弹出内容的可关闭、可悬停与持续显示条件。
可操作的 Web
减少键盘、指针、时间与导航方面的障碍。
- 31键盘:无需指针也能执行主要功能
在实际使用流程中确认功能能否通过键盘执行。
- 32键盘陷阱:能够离开已进入的位置
确认在组件和对话框中移动焦点的途径。
- 33无例外的键盘支持:扩展至 AAA 级目标
在更严格的范围内评估所有功能的键盘操作。
- 34字符快捷键:防止意外触发
检查单字符快捷键的关闭、修改和启用范围。
- 35时间可调:确保有时间阅读与输入
评估时间限制的关闭、调整、延长及其例外。
- 36移动与自动更新:停下来阅读
确认是否提供停止自动移动和更新的手段。
- 37不依赖时间的任务:无需匆忙也能完成
确认在 AAA 级下能否不受时间限制地完成功能。
- 38干扰:推迟通知,保持专注
让用户能够控制紧急情况以外的干扰。
- 39重新认证:避免丢失已填写的内容
在会话过期后的重新认证过程中保留数据与进度。
- 40超时提示:输入前告知限制
告知因无操作而可能导致数据丢失的时限。
- 41闪烁:定量检查危险的视觉刺激
区分闪烁次数评估与一般闪烁、红色闪烁阈值评估。
- 42三次闪烁:AAA 级的更严格准则
检查每秒闪烁次数的 AAA 级准则。
- 43交互动画:提供减少动态效果的选择
确认能否关闭由操作触发的动态效果。
- 44跳过重复区块:快速进入正文
确认是否有跳过重复导航的途径。
- 45页面标题:识别当前打开的内容
检查文档标题是否说明主题与目的。
- 46焦点顺序:保持操作含义的连贯性
评估键盘移动顺序是否保持信息与功能之间的关系。
- 47上下文中的链接目的:让用户知道去向
结合链接及其以编程方式关联的上下文,评估链接目的。
- 48多种导航方式:找到所需页面
确认是否有多种途径查找站点内的页面。
- 49标题与标签:准确说明内容与目的
评估已有标题与标签是否具有明确含义。
- 50焦点可见:显示当前操作位置
在实际状态下确认键盘焦点的视觉指示。
- 51当前位置:说明在站点中的上下文
检查是否提供说明当前页面所属位置的信息。
- 52仅凭链接传达目的:AAA 级准则
检查是否有无需上下文也能识别链接目的的途径。
- 53章节标题:划分长篇内容,便于导航
介绍使用主题标题组织文档的 AAA 级准则。
- 54焦点遮挡:至少保持部分可见
在 AA 级下评估固定元素是否完全遮挡获得焦点的目标。
- 55焦点遮挡的增强准则:整个目标都可见
在 AAA 级下评估获得焦点的目标是否存在部分遮挡。
- 56焦点外观:以足够的面积与对比度显示
测量 AAA 级焦点指示的面积及状态间对比度。
- 57指针手势:为复杂动作提供替代方式
确认多点触控和基于路径的手势是否有简单操作替代方式。
- 58指针取消:撤销误按操作
检查按下与释放的时机,以及取消和撤销手段。
- 59让可见名称与无障碍名称相符
使语音操作能够通过屏幕上的标签找到目标。
- 60运动触发:无需摇动设备也能执行
确认基于设备运动的功能是否有 UI 替代方式和关闭手段。
- 61操作目标尺寸:AAA 级的宽裕触控区域
检查 44×44 CSS px 的增强目标及其例外。
- 62并行输入方式:同时使用触控与键盘
确认是否因一种输入方式而限制其他方式。
- 63拖动:无需拖拽也能获得相同结果
评估拖动功能的单指针替代方式。
- 64操作目标尺寸:AA 级的尺寸与间距条件
根据适用条件评估 24×24 CSS px 要求以及间距等例外。
可理解的 Web
可预测的行为、输入和身份验证流程。
- 65页面语言:正确发音的起点
让程序能够识别文档的默认语言。
- 66局部语言:标注语言变化的区段
根据含义及例外情况,标注正文中的其他语言区段。
- 67不常见的词语:提供查找含义的途径
检查专业术语和特殊用法的解释方式。
- 68缩略语:获取完整表达的含义
让用户能够确认缩略语的完整形式或含义。
- 69阅读水平:为复杂说明提供替代内容
为难懂的文本提供易于理解的补充途径。
- 70发音:说明会改变含义的读法
为含义随发音而变化的表达提供确认读法的途径。
- 71不因获得焦点就改变画面
确认是否仅因进入某个元素就发生上下文变化。
- 72输入变化:预先告知将发生什么
检查是否预先告知设置变化所引发的上下文变化。
- 73一致的导航:相同路径,相同顺序
保持重复出现的导航结构的相对顺序。
- 74一致的识别:相同功能使用相同名称
为相同功能提供一致的名称与表达。
- 75按请求进行变化:可预期的上下文切换
在 AAA 级下,使上下文变化由用户请求触发,或可由用户关闭。
- 76一致的帮助:在相同位置获取所需帮助
保持重复出现的帮助方式的相对位置。
- 77错误识别:说明哪里出了什么问题
通过文本传达自动发现的输入错误。
- 78标签与说明:输入前即可了解要求
在输入前说明所需信息与格式。
- 79错误修正建议:指引下一步操作
将已知的修正方法与错误消息关联起来。
- 80重要提交:确认法律、财务与数据变更
检查重要操作的撤销、检查和确认途径。
- 81符合上下文的帮助:在受阻处获得支持
提供符合输入与任务上下文的帮助。
- 82所有提交的错误预防:扩展至 AAA 级
检查各类信息提交中的撤销、检查和确认手段。
- 83重复输入:同一流程中不再询问相同信息
提供复用或选择已输入信息的方式。
- 84无障碍认证:减少对记忆与解谜的依赖
检查 AA 级认证中认知功能测试的替代方式与支持手段。
- 85认证的增强准则:更广泛的认知无障碍
检查 AAA 级认证允许的替代方式与支持范围。
稳健的 Web
向辅助技术传达名称、角色与状态。
- 86名称、角色与值:与辅助技术共享 UI 状态
向程序传达自定义控件的含义与状态变化。
- 87状态消息:无需移动焦点即可告知结果
向辅助技术传达操作结果与进度状态。
连接到服务
将标准评估整合到智能体与运维流程中。
- 88将无障碍评估与智能体和服务连接起来
设计协调各项提示词并衔接依据、改进与复查的系统,以及资料分发和向服务转化的结构。