可操作

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

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

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

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

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

使用键盘进入某个功能区域后,您应该能够使用键盘再次离开该区域。例如,如果您在聚焦按钮上按 Enter/Return 以打开选项窗口,您应该能够再次关闭该窗口并使用键盘返回主内容。

这非常重要,以便键盘用户不会被困在应用程序的特定区域。

2.1.3 键盘 — 所有功能 (AAA) 这是超出标准 2.1.1 的进一步一步。要实现 AAA 符合性,所有功能都应可以使用键盘控制 — 无一例外。 请参阅尽可能使用语义化 UI 控件重新构建键盘可访问性
2.1.4 字符键快捷方式 (A) 如果存在单个字符键快捷方式,则以下至少一项为真:单个字符键快捷方式可以关闭、重新映射或仅在相关用户界面组件处于焦点时才激活。 理解字符键快捷方式

指南 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)

如果存在超时(由用户不活动引起),请在流程开始时警告用户,这样他们就不会对超时感到惊讶(或者只允许在不活动 20 小时后才发生超时)。

理解超时

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

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

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

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

本指南下的符合性标准涉及用户如何定位自己,以及如何找到当前页面或网站其他页面上所需的内容和功能。

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

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

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

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

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

唯一的例外是页面是某个过程中的一步,因此逻辑上只应有指向前一步和后一步的链接。

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

请参阅尽可能使用语义化 UI 控件使用有意义的文本标签标题和段落的基础知识<label> 元素

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

2.4.7 可聚焦元素的可见焦点 (AA) 当通过 Tab 键切换可聚焦元素(如链接或表单输入)时,应有一个视觉指示器来显示当前哪个元素具有焦点。这通常默认是虚线或蓝色轮廓(取决于浏览器、平台等),但这可以通过 CSS 覆盖。 请参阅尽可能使用语义化 UI 控件
2.4.8 网站内位置 (AAA) 在复杂网站或一系列步骤中的页面上时,应向用户提供他们当前在网站中的位置指示,例如面包屑导航、网站地图或诸如“表单第 2 页,共 10 页”之类的文本。
2.4.9 链接目的(仅限链接) (AAA) 此标准建立在 2.4.4 的基础上,指出为了符合 AAA,链接的目的/目的地应仅从链接文本本身确定,即使脱离上下文也是如此。 请参阅使用有意义的文本标签。另请注意,您应尽量减少同一文本的多个副本链接到不同位置的情况。这可能会给屏幕阅读器用户带来问题,他们通常会脱离上下文列出链接——多个都标有“点击这里”、“点击这里”、“点击这里”的链接会让人困惑。
2.4.10 章节标题 (AAA)

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

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

另见