无障碍网页设计基础知识：WCAG 2.2中AA级成功准则的具体要求

在当今数位化时代，网页内容的无障碍访问性已成为衡量网站质量的重要标准之一。Web内容无障碍指南（WCAG）2.2版本，作为国际公认的网页无障碍设计标准，旨在确保所有用户，无论其身体条件如何，都能平等、方便地访问和使用网页内容。

在本文中，香港网页（HKWEB）将详细解析WCAG 2.2中AA级成功准则的具体要求，并探讨如何在实际网页设计中加以应用。

推荐阅读：

网页设计基础知识点：WCAG 2.2 A级成功准则主要包括哪些内容？



无障碍网页设计基础知识：WCAG 2.2中AA级成功准则的具体要求

1. 字幕（直播）

网页载入声音档案后，如果没有字幕，往往只有听觉健全的使用者才能明白声音档案中的内容。反之，如果能够确保所有「直播」的声音和视像均附有字幕，这将有助于听障人士了解档案内容。

2. 口述影像（预先录制）

网页如提供视像让使用者观看，必须确保同时提供有关该视像内容的口述影像，让看不到视像的人士也能明白当中内容。

3. 方向

除非视像播放器限制了显示方向为横向，否则应该能从直向或横向观看或操作内容，以确保身体残障人士可将设备以固定方向安装在轮椅上，并且能够从最适合他们的方向观看内容。

4. 确定输入目的

启动自动完成属性功能来提升浏览器的能力，同时在表格各栏位预填使用者的选定值，可以让使用者更容易填写表格，特别是方便患有认知障碍的人士使用。

5. 对比度（最低）

在设计文字和图像时，主体与前景的颜色对比度应至少设定为4.5:1，以便使用者可更清楚阅览当中的文字。当然，商标及装饰设计元素无需符合该条件。

6. 调整文字大小

在网页上端部分附加调整文字大小的功能后，确保所有文字都可放大最少两倍，而不会因此失去任何内容或功能，这样可以方便轻度视障人士无须使用屏幕放大软件等辅助技术也能阅览内容。

此外，在建立网站时，应确保内置的浏览器文字大小调整工具能够正常操作。开发人员亦应正确运用层叠样式表（CSS）技术，确保层叠样式表能与内置的浏览器文字大小调整功能相容。

7. 文字图像

在可能的情况下，避免透过图像形式来显示文字，因为一般网页解读辅助工具（如读屏软件等）食无法解读图像内的文字，而必须依赖图像的alt标签。此外，当使用者选用较大的字型时，浏览器也无法调整图像中文字的大小。

8. 重新排列

网站需采用响应式网页设计技术，确保使用者在缩放网页时，不会因此失去任何资讯及功能，以及无须横向滑动来显示内容。

9. 非文字对比

所有提供重要资讯的非文字内容（例如图像、图表、按钮、复选框、单选按钮或输入栏），与相邻颜色的对比度应至少为 3:1，让使用者更容易识别。

10. 文字间距

避免使用绝对值（即像素数目）来界定标题（h1）及次标题（h2）文字的行高，否则用者放大网页内容时，标题及次标题的文字会被截断，而难以阅读。反之，以相对值（即百分比）界定 h1 及 h2 的行高，可以确保使用者在缩放网页内容时，h1 及 h2 的行高能够作出相应的更改，内容也可以更清楚地显示。

11. 在滑鼠停留位置或焦点上的内容

如附加内容在焦点／滑鼠停留位置出现，应确保符合以下所有条件：

— 可关闭的：使用者可以利用键盘（例如以 escape 键）关闭附加内容，而无须移动焦点／滑鼠停留位置；

— 滑鼠可停留的：使用者可在附加内容上移动指针，而不会令附加内容消失；以及

— 持续可见的：附加内容仍然可见，直至在滑鼠停留位置或焦点的触发功能被移除，或使用者关闭附加内容，或附加内容的资讯不再有效为止.

12. 多种途径

网站应该应确保网站提供多于一个选择网页的途径，例如搜寻功能、网页指南、标准导览列等，让使用者能够更方便快捷地查找所需的资讯。对于有学习障碍或无法长时间集中精神的使用者而言，网页指南之类的功能是十分有用的。

13. 标题和标签

标题和标签必须准确描述所附载的内容，这对使用读屏软件的人士会有很大帮助。

14. 清晰可见的焦点

当焦点移到互动元素（例如连结、按钮、表格输入栏等）时，确保游标清楚显示位置。例如，确保游标在文字输入栏内清晰可见，让使用者知道在哪个位置开始输入资料。

15. 不被遮挡的焦点（最小）

当焦点移到某个项目时，确保焦点项目的部分可见，让使用键盘操作网页的使用者能够确定他们在网页上的位置。

16.拖曳动作

任何拖曳动作，应该提供一个简单的指针操作方法，例如在地图上添加上、下、左和右按钮的移动方法；或者是在表格中增加向上和向下按钮作为使用者更改工作坊优先顺序的方法。

17. 目标大小（最小）

确保所有目标的最小尺寸为 24 x 24的像素，或周围有足够的间距，避免使用者避免无意间点击错误的按钮，并使控制项目更易于启动。

18. 各部分的语言

编写内容时，确保当中的文章和语句所使用的语言清晰易明，这可让读屏软件因应所用的语言而准确地发音。

19. 一致的导览列

如导览列或链接会在多个网页出现，应确保它们在所有网页的展示方式一致。

20. 一致识别

如果两个按钮所使用的标签各有不同，可能会令某些使用者产生混淆，特别是那些使用读屏软件的使用者，因为他们可能无法察觉这两个按钮均具相同功能。反之，所有具相同功能的项目使用相同的标签，有助于让使用者知道这些按钮具有相同功能。

21. 错误提示

确保网页在使用者操作出错时，能够提供准确且有效的提示。如果错误提示作用不大，使用者便无法准确知道哪些部分需要更正。

22. 错误预防（针对法律、财务、数据资料）

如果使用者提交须负上法律或财务责任的数据资料，应确保系统可容许使用者在提交前检查并确认有关数据资料，或者在提交数据资料后可以取消交易。

23. 无障碍认证（最小）

确保使用者在登入帐户时有一种无障碍、易于使用且安全的方法进行身份认证，需至少符合下列其中一个条件：

— 提供一种不需要认知评估的方法；

— 协助使用者通过认知测验；

— 认知测验涉及物体识别，或认知测验检查使用者识别流动应用程式内非文字内容的能力。

24. 状态讯息

对于任何可见的状态讯息（例如不明显地加到页面上的错误或成功讯息），即使有关状态讯息不是在焦点上，也应利用辅助技术工具通知使用者。实施这项准则的可行方法之一是界定无障碍多样化网际网路应用程式(Accessible Rich Internet Application,ARIA)的角色（状态、警报）或活动区域。

遵循WCAG 2.2 AA级成功准则，不仅能够提升网页内容的无障碍访问性，还能改善普通用户的体验。通过实施上述准则，我们可以创建一个更加包容、易用、安全的网络环境，让每个人都能平等地享受数位化时代的便利，还有机会为自己的品牌获得好「掌声」及收益。