可操作性

本文提供了一些实用建议,说明如何编写 Web 内容,使其符合 Web 内容无障碍指南 (WCAG) 2.0 和 2.1 中概述的 **可操作性** 原则的成功标准。可操作性指出用户界面组件和导航必须可操作。

注意:要阅读 W3C 对可操作性及其指南和成功标准的定义,请参阅 原则 2:可操作性 — 用户界面组件和导航必须可操作。

指南 2.1 — 键盘可访问:使所有功能都可通过键盘访问

此指南涵盖了使核心网站功能可通过键盘以及其他方式(例如鼠标)访问的必要性,以便依赖键盘控件的用户可以访问它们。

成功标准 如何符合标准 实用资源
2.1.1 键盘 (A) 所有功能都应可以使用键盘控件访问,除非无法使用键盘进行操作(例如手绘)。应尽可能使用内置控件(例如,通过表单控件进行制表符导航),并且仅在需要时构建自定义功能。 请参阅 UI 控件重新构建键盘可访问性
2.1.2 无键盘陷阱 (A)

使用键盘进入某个功能部分时,您应该能够使用键盘退出该部分。例如,如果您在聚焦的按钮上按下 Enter/Return 以打开选项窗口,则您应该能够再次关闭该窗口并使用键盘返回到主要内容。

这非常重要,这样键盘用户就不会被应用程序的特定部分困住。

2.1.3 键盘 — 所有功能 (AAA) 这是 2.1.1 标准的进一步步骤。要实现 AAA 符合性,所有功能都应可以使用键盘控件访问 — 无任何例外。 请参阅 UI 控件重新构建键盘可访问性
2.1.4 字符键快捷方式 (A) 在 2.1 中添加 如果存在单个字符键快捷方式,则至少满足以下条件之一:可以关闭单个字符键快捷方式、重新映射或仅在相关用户界面组件处于焦点时激活。 了解字符键快捷方式

注意:另请参阅 WCAG 对 指南 2.1 键盘可访问:使所有功能都可通过键盘访问 的描述。

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

此指南涵盖了功能可能具有时间限制的情况。例如,出于安全原因,有时需要在时间限制内完成购买。

成功标准 如何符合标准 实用资源
2.2.1 时间可调整 (A)

对于具有时间限制的功能(例如,完成酒店或航班预订通常具有时间限制),应为用户提供控件,允许他们调整、延长或关闭时间限制。

例外情况是时间限制超过 20 小时的活动、实时事件(例如,多人在线游戏)以及任何其他需要时间限制且如果关闭则会失效的活动。

2.2.2 暂停、停止、隐藏 (A)

对于自动开始、持续时间超过 5 秒且与其他内容一起显示的移动/闪烁内容,应提供控件来暂停、停止或隐藏它。这并不适用于对体验至关重要的移动/闪烁内容。示例包括滚动文本和视频。

对于自动开始并与其他内容一起显示的自动更新信息,应提供控件来暂停、停止或隐藏它,或控制更新频率。这并不适用于对体验至关重要的自动更新内容。示例包括轮播或轮换公告。

2.2.3 无时间限制 (AAA) 此标准基于 2.2.1 标准,指出想要通过 AAA 符合性的内容不应有时间限制。
2.2.4 抑制中断 (AAA)

任何中断,例如警报或插页式广告,都应具有抑制或推迟其功能的功能,除非是紧急警报。
2.2.5 重新身份验证 (AAA) 如果在使用 Web 应用程序期间身份验证会话过期,则用户可以重新进行身份验证并继续使用,而不会丢失任何数据。
2.2.6 超时 (AAA) WCAG 2.1 中新增

如果发生超时(由用户不活动引起),请在流程开始时警告用户,以免他们对超时存在感到意外(或者仅允许在 20 小时不活动后发生超时)。

理解超时

指南 2.3 — 癫痫发作和身体反应:不要以已知会导致癫痫发作或身体反应的方式设计内容

这指的是如果内容不发生变化,可能会导致患有癫痫等疾病的用户发生癫痫发作,或者可能导致患有前庭疾病等疾病的用户出现身体反应(如头晕)。

成功标准 如何符合标准 实用资源
2.3.1 三次或以下闪烁阈值 (A) 内容不包含任何每秒闪烁超过三次的方面,或者闪烁内容低于可接受的 闪烁和红色闪烁阈值
2.3.2 三次闪烁 (AAA) 内容不包含任何每秒闪烁超过三次的方面。
2.3.3 交互动画 (AAA) WCAG 2.1 中新增 允许用户禁用交互动画(除非动画必不可少)。 理解交互动画

指南 2.4 — 可导航:提供帮助用户导航、查找内容并确定其所在位置的方法

本指南下的符合性标准与用户可以预期如何定位自己以及在当前页面或网站的其他页面上查找他们正在寻找的内容和功能的方式有关。

成功标准 如何符合标准 实用资源
2.4.1 跳过块 (A)

应提供一种机制,允许用户直接跳过到页面上可用的主要内容或功能,跳过重复的功能(例如公司徽标或导航)。这通常是通过“跳过链接”实现的——在页面源代码顶部放置的链接,这些链接指向主要内容,并通过 CSS 隐藏。

如果提供了适当的标题和语义容器结构进行导航(例如 <section><aside> 等),则无需添加“跳过链接”。

需要添加关于“跳过链接”的部分。
2.4.2 包含页面标题 (A) 每个网页都应包含一个信息性的 <title>,其内容描述页面的内容/目的。 请参阅 添加标题
2.4.3 逻辑焦点顺序 (A) 可聚焦页面功能(例如链接、按钮、表单输入)的“制表符顺序”具有逻辑意义,这意味着页面仍然可以通过非视力/键盘用户使用。 请参阅 UI 控件,了解关于制表符切换到控件的一般建议。如果您需要以不寻常的布局放置元素,最好确保源顺序合理,然后使用 CSS 功能(如 定位)来处理布局。
2.4.4 链接目的(在上下文中)(A) 链接的目的/目标可以从链接文本或其周围环境(例如周围文本)确定。例外情况是链接目的对所有用户都模棱两可(请参阅 对一般用户来说模棱两可,了解对此的有用解释)。 请参阅 有意义的文本标签。另请注意,您应尽量减少同一文本的多个副本链接到不同位置的情况。这可能会导致屏幕阅读器用户出现问题,他们通常会无上下文地列出链接——几个都标记为“点击此处”、“点击此处”、“点击此处”的链接会令人困惑。
2.4.5 多种导航机制 (AA)

您应提供至少两种通用的导航机制来查找您网站上的页面,例如导航菜单、面包屑轨迹、网站搜索、网站地图、相关链接列表等。

唯一的例外情况是页面是流程中的一步,因此在逻辑上只应具有指向先前步骤和后续步骤的链接。

大多数这些机制可以使用简单的 HTML 功能创建,例如请参阅 搜索字段创建导航菜单将链接样式化为按钮
2.4.6 标题和标签 (AA) 标题(例如 <h2>)和 <label> 元素清楚地描述了它们应该描述的内容和表单元素的目的。

请参阅 UI 控件有意义的文本标签标题和段落的基本知识<label> 元素

请注意,您应避免重复标题或标签(例如“更多信息”的多个实例),除非结构允许您轻松区分它们。

2.4.7 可聚焦元素的可见焦点 (AA) 当通过制表符键遍历可聚焦元素(如链接或表单输入)时,应有一个视觉指示器来显示当前哪个元素具有焦点。这通常是默认情况下带点的或蓝色的轮廓(取决于浏览器、平台等),但这可以通过 CSS 覆盖。 请参阅 使用原生键盘辅助功能
2.4.8 站点中的位置 (AAA) 当位于复杂站点或一组步骤中的页面上时,应向用户提供其在站点中的位置指示器,例如面包屑轨迹、站点地图或文本,例如“表单第 2 页,共 10 页”。
2.4.9 链接目的(仅链接)(AAA) 此标准建立在 2.4.4 的基础上,指出要符合 AAA,链接的目的/目标应仅从链接文本中确定,即使在脱节的情况下也是如此。 请参阅 有意义的文本标签。另请注意,您应尽量减少同一文本的多个副本链接到不同位置的情况。这可能会导致屏幕阅读器用户出现问题,他们通常会无上下文地列出链接——几个都标记为“点击此处”、“点击此处”、“点击此处”的链接会令人困惑。
2.4.10 节标题 (AAA)

除了创建有用的文档结构外,标题还应准确地描述和将内容区域分解为逻辑部分。

请注意,此标准指的是一般 Web 内容中的标题和标题(例如文本内容中的标题)。用户界面的标题和标题是标准 4.1.2 中涵盖的特殊情况。

请参阅 标题和段落的基本知识

2.4.11 焦点不模糊(最低)(AA)

当用户界面组件获得键盘焦点时,该组件不会因包含作者创建的内容而完全隐藏。

注意:如果界面的内容可以由用户重新定位,则仅将用户可移动内容的初始位置视为符合此标准的测试。此外,用户打开的内容可能会模糊获得焦点的组件。此外,如果用户可以在不更改键盘焦点的基础上显示获得焦点的组件,则该组件在符合性和测试目的方面不被视为隐藏。

查看 了解焦点不模糊(最低),以详细了解此标准。

2.4.12 焦点不模糊(增强)(AAA)

遵循 2.4.11 的规则,但当用户界面组件获得焦点时,该组件的任何部分都不能被作者创建的内容隐藏。如果界面是可配置的,则仅将用户可移动内容的初始位置视为测试和满足此标准。

查看 了解焦点不模糊(增强)(AAA 级别),以详细了解此标准。

2.4.13 焦点外观 (AAA)

当键盘焦点指示器可见时,焦点指示器的区域满足以下所有条件

  • 必须至少与未聚焦组件或子组件的 2px 厚边框区域一样大,其中包括组件的内容、边框和背景,不包括外部阴影或辉光效果。
  • 在聚焦和未聚焦状态下,相同像素之间的对比度比率必须至少为 3:1

例外情况是

  • 焦点指示器由用户确定,作者无法调整。
  • 焦点指示器及其背景颜色不会被作者修改。

查看 了解焦点外观(AAA 级别),以详细了解此标准。

指南 2.5 输入模式:使用户更容易通过键盘之外的各种输入操作功能

本指南下的符合性标准确保用户能够使用键盘或鼠标以外的不同输入方法(包括触摸屏、语音、设备运动或替代输入设备)与数字技术进行交互。

成功标准 如何符合标准 实用资源
2.5.1 指针手势 (A) WCAG 2.1 中新增 可以使用指针操作的所有功能都可以使用单点操作进行操作。操作任何功能都不需要基于路径或多点手势。存在例外。 理解指针手势
2.5.2 指针取消 (A) WCAG 2.1 中新增 对于可以使用单个指针操作的功能,至少满足以下条件之一:无按下事件、中止/撤消、向上反转或必不可少。 理解指针取消
2.5.3 名称中的标签 (A) WCAG 2.1 中新增 对于每个包含可见文本标签的用户界面组件,请确保可访问名称与标签中的可见文本匹配(或包含)。 理解名称中的标签
2.5.4 运动启动 (A) WCAG 2.1 中新增 确保对于可以通过 a) 设备运动(如摇动、倾斜)或 b) 设备传感器检测到的用户手势(包括摄像头)触发的功能,以下两点均成立:1)可以禁用运动启动,以及 2)可以在不使用设备运动或用户手势的情况下操作该功能。存在例外。 理解运动启动
2.5.5 目标尺寸 (AAA) WCAG 2.1 中新增 可操作项的触摸目标的大小在宽度和高度上必须至少为 44 个 CSS 像素。存在例外。 理解目标尺寸
2.5.6 并发输入机制 (AAA) WCAG 2.1 中新增 确保人们可以在与数字内容交互时使用和切换不同的输入模式,包括触摸屏、键盘、鼠标、语音命令或替代输入设备。存在一个必要的例外。 理解并发输入机制
2.5.8 目标大小最小值 (AA) 指针输入的目标大小应至少为 24px 宽和 24px 高,以下情况除外:
  • 间距:小于 24px x 24px 的目标的定位方式为:如果以每个目标的边界框为中心绘制一个直径为 24px 的圆圈,则这些圆圈不会与任何其他目标或其他尺寸不足的目标的圆圈相交。
  • 等效:同一页面上提供了满足此标准的、实现相同功能的独立控件。
  • 内联:目标位于一行文本中,其大小受行高或周围非目标文本的限制。
  • 用户代理控制:目标的大小由用户代理确定,且未被作者修改。
  • 必要:目标的特定呈现方式对于所传达的信息至关重要或法律要求。
查看 了解目标大小最小值

另请参阅