SERIES 01 / WEB FOR EVERYONE

Web 无障碍

让每个人都能使用 Web 的标准。深入理解每项要求,学习如何借助 AI 进行评估。

学习顺序

START

入门

先了解评估视角与方法。

  1. 01
    Web 无障碍入门:如何结合 WCAG 与 AI 设计评估

    从用户获取信息并完成任务的过程理解 Web 无障碍。了解 WCAG 2.2 的结构和借助 AI 进行评估的方法,明确目标页面、用户流程及所需证据,为运行第一个评估提示词做好准备。

    已发布
PRINCIPLE 01

可感知的 Web

通过视觉、听觉及其他形式获取信息。

  1. 02
    替代文本:传达图像所承担的作用

    设计能够说明图像目的与上下文,而非仅说明图像存在的替代内容。

    1.1.1A准备中
  2. 03
    预录音频与无声视频:通过其他途径获取相同信息

    区分纯音频与纯视频材料所需的替代内容。

    1.2.1A准备中
  3. 04
    预录字幕:同时传达对白与重要声音

    评估字幕是否提供、是否准确,以及说话者区分和同步情况。

    1.2.2A准备中
  4. 05
    画面描述与媒体替代内容:说明仅在视频画面中呈现的信息

    通过描述或充分的替代内容传达预录视频中的视觉信息。

    1.2.3A准备中
  5. 06
    实时字幕:避免遗漏直播信息

    介绍检查实时同步媒体字幕的方法。

    1.2.4AA准备中
  6. 07
    预录音频描述:让画面中的关键信息可以被听见

    检查 AA 级要求的视觉信息音频描述。

    1.2.5AA准备中
  7. 08
    手语翻译:预录音频的另一条语言途径

    区分是否提供手语翻译,以及评估所需的语言专业能力。

    1.2.6AAA准备中
  8. 09
    扩展音频描述:暂停画面,为说明留出时间

    检查音频间隙不足的视频是否需要扩展描述。

    1.2.7AAA准备中
  9. 10
    完整的媒体替代内容:通过文档了解整个视频

    检查预录同步媒体和纯视频材料的完整替代内容。

    1.2.8AAA准备中
  10. 11
    实时音频替代内容:即使听不到也能获取指引

    为实时纯音频信息准备等效的替代内容。

    1.2.9AAA准备中
  11. 12
    信息与关系:通过代码传达画面结构

    向辅助技术传达标题、列表、表格和表单中的关系。

    1.3.1A准备中
  12. 13
    有意义的顺序:让显示顺序与阅读顺序相符

    评估阅读顺序是否保持信息的含义。

    1.3.2A准备中
  13. 14
    感官指示:不只用右侧或红色来指引

    改进依赖形状、颜色、位置或声音的指示。

    1.3.3A准备中
  14. 15
    屏幕方向:横屏与竖屏都能使用

    检查是否存在无必要理由的屏幕方向限制。

    1.3.4AA准备中
  15. 16
    输入目的:让自动填充能够识别字段

    通过代码识别用户个人信息输入的目的。

    1.3.5AA准备中
  16. 17
    元素目的:让 UI 能够适应用户需求

    介绍识别控件、图标和区域目的的 AAA 级准则。

    1.3.6AAA准备中
  17. 18
    颜色:不将其作为信息的唯一线索

    通过颜色之外的方式传达状态与区别。

    1.4.1A准备中
  18. 19
    自动播放音频:能够停止和调节

    确认自动播放超过 3 秒的音频是否有控制途径。

    1.4.2A准备中
  19. 20
    文本对比度:确保可读的明度差异

    根据条件计算普通文本与大号文本的对比度。

    1.4.3AA准备中
  20. 21
    文本放大:在 200% 时仍保持功能

    检查放大文字时是否损失内容或操作功能。

    1.4.4AA准备中
  21. 22
    文本图像:以实际文字提供内容

    用可调整的文本代替图像中的文字。

    1.4.5AA准备中
  22. 23
    增强文本对比度:更高的可读性目标

    将 AAA 级对比度目标应用于普通文本与大号文本。

    1.4.6AAA准备中
  23. 24
    背景声音:清晰传达人声

    检查预录纯音频材料中的背景声音。

    1.4.7AAA准备中
  24. 25
    文本呈现:让用户选择阅读方式

    综合讨论行长度、行间距、对齐方式和颜色调整。

    1.4.8AAA准备中
  25. 26
    文本图像的更严格准则

    了解 AAA 级对文本图像的允许范围。

    1.4.9AAA准备中
  26. 27
    重排:在窄屏上也能阅读与操作

    减少放大和小视口情况下的双向滚动。

    1.4.10AA准备中
  27. 28
    非文本对比度:区分控件与图形

    评估控件和传达信息的图形的明度差异。

    1.4.11AA准备中
  28. 29
    文本间距:更改阅读设置后仍保留内容

    构建能够适应字间距、词间距、行间距和段落间距变化的页面。

    1.4.12AA准备中
  29. 30
    悬停或焦点触发的内容:可以关闭、移入并阅读

    确认工具提示和弹出内容的可关闭、可悬停与持续显示条件。

    1.4.13AA准备中
PRINCIPLE 02

可操作的 Web

减少键盘、指针、时间与导航方面的障碍。

  1. 31
    键盘:无需指针也能执行主要功能

    在实际使用流程中确认功能能否通过键盘执行。

    2.1.1A准备中
  2. 32
    键盘陷阱:能够离开已进入的位置

    确认在组件和对话框中移动焦点的途径。

    2.1.2A准备中
  3. 33
    无例外的键盘支持:扩展至 AAA 级目标

    在更严格的范围内评估所有功能的键盘操作。

    2.1.3AAA准备中
  4. 34
    字符快捷键:防止意外触发

    检查单字符快捷键的关闭、修改和启用范围。

    2.1.4A准备中
  5. 35
    时间可调:确保有时间阅读与输入

    评估时间限制的关闭、调整、延长及其例外。

    2.2.1A准备中
  6. 36
    移动与自动更新:停下来阅读

    确认是否提供停止自动移动和更新的手段。

    2.2.2A准备中
  7. 37
    不依赖时间的任务:无需匆忙也能完成

    确认在 AAA 级下能否不受时间限制地完成功能。

    2.2.3AAA准备中
  8. 38
    干扰:推迟通知,保持专注

    让用户能够控制紧急情况以外的干扰。

    2.2.4AAA准备中
  9. 39
    重新认证:避免丢失已填写的内容

    在会话过期后的重新认证过程中保留数据与进度。

    2.2.5AAA准备中
  10. 40
    超时提示:输入前告知限制

    告知因无操作而可能导致数据丢失的时限。

    2.2.6AAA准备中
  11. 41
    闪烁:定量检查危险的视觉刺激

    区分闪烁次数评估与一般闪烁、红色闪烁阈值评估。

    2.3.1A准备中
  12. 42
    三次闪烁:AAA 级的更严格准则

    检查每秒闪烁次数的 AAA 级准则。

    2.3.2AAA准备中
  13. 43
    交互动画:提供减少动态效果的选择

    确认能否关闭由操作触发的动态效果。

    2.3.3AAA准备中
  14. 44
    跳过重复区块:快速进入正文

    确认是否有跳过重复导航的途径。

    2.4.1A准备中
  15. 45
    页面标题:识别当前打开的内容

    检查文档标题是否说明主题与目的。

    2.4.2A准备中
  16. 46
    焦点顺序:保持操作含义的连贯性

    评估键盘移动顺序是否保持信息与功能之间的关系。

    2.4.3A准备中
  17. 47
    上下文中的链接目的:让用户知道去向

    结合链接及其以编程方式关联的上下文,评估链接目的。

    2.4.4A准备中
  18. 48
    多种导航方式:找到所需页面

    确认是否有多种途径查找站点内的页面。

    2.4.5AA准备中
  19. 49
    标题与标签:准确说明内容与目的

    评估已有标题与标签是否具有明确含义。

    2.4.6AA准备中
  20. 50
    焦点可见:显示当前操作位置

    在实际状态下确认键盘焦点的视觉指示。

    2.4.7AA准备中
  21. 51
    当前位置:说明在站点中的上下文

    检查是否提供说明当前页面所属位置的信息。

    2.4.8AAA准备中
  22. 52
    仅凭链接传达目的:AAA 级准则

    检查是否有无需上下文也能识别链接目的的途径。

    2.4.9AAA准备中
  23. 53
    章节标题:划分长篇内容,便于导航

    介绍使用主题标题组织文档的 AAA 级准则。

    2.4.10AAA准备中
  24. 54
    焦点遮挡:至少保持部分可见

    在 AA 级下评估固定元素是否完全遮挡获得焦点的目标。

    2.4.11AA准备中
  25. 55
    焦点遮挡的增强准则:整个目标都可见

    在 AAA 级下评估获得焦点的目标是否存在部分遮挡。

    2.4.12AAA准备中
  26. 56
    焦点外观:以足够的面积与对比度显示

    测量 AAA 级焦点指示的面积及状态间对比度。

    2.4.13AAA准备中
  27. 57
    指针手势:为复杂动作提供替代方式

    确认多点触控和基于路径的手势是否有简单操作替代方式。

    2.5.1A准备中
  28. 58
    指针取消:撤销误按操作

    检查按下与释放的时机,以及取消和撤销手段。

    2.5.2A准备中
  29. 59
    让可见名称与无障碍名称相符

    使语音操作能够通过屏幕上的标签找到目标。

    2.5.3A准备中
  30. 60
    运动触发:无需摇动设备也能执行

    确认基于设备运动的功能是否有 UI 替代方式和关闭手段。

    2.5.4A准备中
  31. 61
    操作目标尺寸:AAA 级的宽裕触控区域

    检查 44×44 CSS px 的增强目标及其例外。

    2.5.5AAA准备中
  32. 62
    并行输入方式:同时使用触控与键盘

    确认是否因一种输入方式而限制其他方式。

    2.5.6AAA准备中
  33. 63
    拖动:无需拖拽也能获得相同结果

    评估拖动功能的单指针替代方式。

    2.5.7AA准备中
  34. 64
    操作目标尺寸:AA 级的尺寸与间距条件

    根据适用条件评估 24×24 CSS px 要求以及间距等例外。

    2.5.8AA准备中
PRINCIPLE 03

可理解的 Web

可预测的行为、输入和身份验证流程。

  1. 65
    页面语言:正确发音的起点

    让程序能够识别文档的默认语言。

    3.1.1A准备中
  2. 66
    局部语言:标注语言变化的区段

    根据含义及例外情况,标注正文中的其他语言区段。

    3.1.2AA准备中
  3. 67
    不常见的词语:提供查找含义的途径

    检查专业术语和特殊用法的解释方式。

    3.1.3AAA准备中
  4. 68
    缩略语:获取完整表达的含义

    让用户能够确认缩略语的完整形式或含义。

    3.1.4AAA准备中
  5. 69
    阅读水平:为复杂说明提供替代内容

    为难懂的文本提供易于理解的补充途径。

    3.1.5AAA准备中
  6. 70
    发音:说明会改变含义的读法

    为含义随发音而变化的表达提供确认读法的途径。

    3.1.6AAA准备中
  7. 71
    不因获得焦点就改变画面

    确认是否仅因进入某个元素就发生上下文变化。

    3.2.1A准备中
  8. 72
    输入变化:预先告知将发生什么

    检查是否预先告知设置变化所引发的上下文变化。

    3.2.2A准备中
  9. 73
    一致的导航:相同路径,相同顺序

    保持重复出现的导航结构的相对顺序。

    3.2.3AA准备中
  10. 74
    一致的识别:相同功能使用相同名称

    为相同功能提供一致的名称与表达。

    3.2.4AA准备中
  11. 75
    按请求进行变化:可预期的上下文切换

    在 AAA 级下,使上下文变化由用户请求触发,或可由用户关闭。

    3.2.5AAA准备中
  12. 76
    一致的帮助:在相同位置获取所需帮助

    保持重复出现的帮助方式的相对位置。

    3.2.6A准备中
  13. 77
    错误识别:说明哪里出了什么问题

    通过文本传达自动发现的输入错误。

    3.3.1A准备中
  14. 78
    标签与说明:输入前即可了解要求

    在输入前说明所需信息与格式。

    3.3.2A准备中
  15. 79
    错误修正建议:指引下一步操作

    将已知的修正方法与错误消息关联起来。

    3.3.3AA准备中
  16. 80
    重要提交:确认法律、财务与数据变更

    检查重要操作的撤销、检查和确认途径。

    3.3.4AA准备中
  17. 81
    符合上下文的帮助:在受阻处获得支持

    提供符合输入与任务上下文的帮助。

    3.3.5AAA准备中
  18. 82
    所有提交的错误预防:扩展至 AAA 级

    检查各类信息提交中的撤销、检查和确认手段。

    3.3.6AAA准备中
  19. 83
    重复输入:同一流程中不再询问相同信息

    提供复用或选择已输入信息的方式。

    3.3.7A准备中
  20. 84
    无障碍认证:减少对记忆与解谜的依赖

    检查 AA 级认证中认知功能测试的替代方式与支持手段。

    3.3.8AA准备中
  21. 85
    认证的增强准则:更广泛的认知无障碍

    检查 AAA 级认证允许的替代方式与支持范围。

    3.3.9AAA准备中
PRINCIPLE 04

稳健的 Web

向辅助技术传达名称、角色与状态。

  1. 86
    名称、角色与值:与辅助技术共享 UI 状态

    向程序传达自定义控件的含义与状态变化。

    4.1.2A准备中
  2. 87
    状态消息:无需移动焦点即可告知结果

    向辅助技术传达操作结果与进度状态。

    4.1.3AA准备中
FINISH

连接到服务

将标准评估整合到智能体与运维流程中。

  1. 88
    将无障碍评估与智能体和服务连接起来

    设计协调各项提示词并衔接依据、改进与复查的系统,以及资料分发和向服务转化的结构。

    准备中