可感知

本文提供了有关如何编写 Web 内容的实用建议，以便其符合 Web 内容无障碍指南 (WCAG) 2.0 和 2.1 的“可感知”原则中概述的成功标准。“可感知”是指用户必须能够以某种方式感知它，使用一种或多种感官。

注意：要阅读 W3C 对“可感知”及其指南和成功标准的定义，请参阅 原则 1：可感知 - 信息和用户界面组件必须以用户可以感知的方式呈现。

指南 1.1 — 为非文本内容提供文本替代

这里的关键是文本可以转换为残疾人可以使用其他形式。例如，它可以由屏幕阅读器朗读，转换为大字体，或显示在盲文显示器上。非文本内容指的是多媒体，例如图像、音频和视频。

成功标准 如何符合标准 实用资源
1.1.1 提供文本等效项 (A) 所有传达有意义内容的图像都应提供合适的替代文本。 文本替代。
复杂图像或图表应提供可访问的替代方案，无论是在同一页面上还是通过链接。使用常规链接而不是 longdesc 属性。

文本描述可能有效，或者可以使用可访问的数据表（请参阅 HTML 表格高级功能和无障碍）。有关 longdesc 的论点，请参阅 W3C 的 图像描述扩展 (longdesc)。
多媒体内容（即音频或视频）至少应提供描述性标识，例如字幕或类似内容。

有关静态字幕选项，请参阅 文本替代，以及有关其他替代方案，请参阅 音频成绩单 和 视频文本轨道。
UI 控件（如表单元素和按钮）应具有描述其用途的文本标签。 按钮很简单——您应该确保按钮文本描述了按钮的功能（例如，<button>上传图像</button>）。有关其他 UI 控件的更多信息，请参阅 UI 控件。
以辅助技术无法看到的方式实现装饰性（非内容）图像、视频等，这样就不会让用户感到困惑。

装饰性图像应使用 CSS 背景图像实现（请参阅 背景）。如果必须通过 <img> 元素包含图像，则将其 alt 设置为空（alt=""）。否则，屏幕阅读器可能会尝试读出文件路径等。

如果您包含自动播放的背景视频或音频，请使其尽可能不显眼。不要使其看起来或听起来像内容，并提供关闭它的控件。理想情况下，根本不要包含它。

注意：另请参阅 指南 1.1：文本替代的 WCAG 说明。

指南 1.2 — 为基于时间的媒体提供文本替代

基于时间的媒体是指具有持续时间的媒体，例如音频和视频。请注意，如果音频/视频用作现有文本内容的替代方案，则您无需提供其他文本替代方案。

成功标准 如何符合标准 实用资源
1.2.1 为预录的纯音频和纯视频内容提供替代方案 (A) 应为预录的纯音频媒体提供成绩单，并应为预录的纯视频媒体（即无声视频）提供成绩单或音频描述。 有关成绩单信息，请参阅 音频成绩单。尚无音频描述教程可用。
1.2.2 为基于 Web 的视频提供字幕 (A) 您应为 Web 上呈现的视频（例如，HTML 视频）提供字幕。这是为了方便无法听到视频音频部分的人员。

 有关 HTML 视频字幕，请参阅视频文本轨道。另请参阅添加您自己的字幕和隐藏式字幕（YouTube）。
1.2.3 为基于网络的视频提供文本转录或音频描述 (A) 您应该为网络上提供的视频提供文本转录或音频描述（例如，HTML 视频）。这是为了方便那些无法看到视频视觉部分，并且仅从音频中无法获得完整内容的人。 有关成绩单信息，请参阅 音频成绩单。尚无音频描述教程可用。
1.2.4 为直播音频提供字幕 (AA) 您应该为所有包含音频的实时多媒体提供同步字幕（例如，视频会议、直播音频广播）。
1.2.5 为预录视频提供音频描述 (AA) 应为预录视频提供音频描述，但仅限于现有音频未传达视频表达的完整含义的情况。
1.2.6 为预录音频提供手语等效内容 (AAA) 应为任何包含音频的预录内容提供等效的手语视频。
1.2.7 提供包含音频描述的扩展视频 (AAA) 如果由于视频时序问题（例如，内容中没有合适的暂停点以插入音频描述）而无法提供音频描述（请参阅 1.2.5），则应提供包含插入暂停（和音频描述）的视频的替代版本。
1.2.8 为预录媒体提供替代方案 (AAA) 对于所有包含视频的内容，都应提供描述性文本转录，例如您正在观看的电影的脚本。这是为了方便听力障碍的观众，他们无法听到内容。 有关转录信息，请参阅音频转录。
1.2.9 为直播音频提供转录 (AAA) 对于任何正在广播的直播音频内容，都应提供描述性文本，例如您正在收听的戏剧或音乐的脚本。这是为了方便听力障碍的观众，他们无法听到内容。 有关转录信息，请参阅音频转录。

指南 1.3 — 创建可以以不同方式呈现的内容

此指南指的是内容能够以多种方式供用户使用，以适应他们不同的需求的能力。

成功标准 如何符合标准 实用资源
1.3.1 信息和关系 (A)

任何内容结构——或内容之间建立的视觉关系——也可以通过编程方式确定，或者从文本描述中推断。这相关的常见情况是

  • 文本标签及其描述的表单元素。这些使用<label>元素明确关联，屏幕阅读器等可以识别该元素。
  • 图像替代文本。内容图像应提供清晰描述图像内容的文本，该文本可以与图像进行编程关联（例如，替代文本），或者易于关联（例如，描述图像并紧挨着它）。这意味着即使您看不到图像，仍然可以推断出完整含义。
  • 列表。如果列表项的顺序很重要，请使用有序列表(<ol>)。
 整个

HTML：可访问性的良好基础包含大量关于此的信息，但您应特别参考良好的语义、UI 控件和文本替代方案。
1.3.2 有意义的内容顺序 (A) 对于任何内容，即使以不寻常的方式视觉呈现，也应该很容易确定合理的逻辑阅读顺序。该顺序应通过使用正确的语义元素（例如，标题、段落）来明确表示，而 CSS 用于创建任何不寻常的布局样式，而不管标记如何。 再次，请参阅HTML：可访问性的良好基础。
1.3.3 感官特征 (A)

操作控件或理解内容的说明不依赖于单一感官。这可能会对患有与该感官相关的残疾的人或不支持该感官的设备造成障碍。因此，例如

  • "单击圆形按钮继续"
    应清楚地标记按钮，以便很明显它是您需要按下的按钮。如果有多个按钮，请确保所有按钮都已清楚地标记以区分其功能。
  • "收听音频说明以获取指导"
    这显然是有问题的——音频对于听力障碍者来说是无法访问的，而文本可以阅读，也可以根据需要由屏幕阅读器朗读。
  • "从屏幕右侧滑动以显示菜单"
    某些用户可能无法滑动屏幕，这可能是由于残疾或其设备不支持触控造成的。应提供替代方案，例如键盘快捷键或可以通过键盘或其他方式激活的按钮。

注意：仅通过颜色传达说明是相关的，但在其他指南（1.4.1）中进行了介绍。
1.3.4 方向 (AA) 在 2.1 中添加 内容不将其查看和操作限制在单个显示方向（例如纵向或横向），除非特定显示方向至关重要。

了解方向
1.3.5 识别输入目的 (AA) 在 2.1 中添加

请遵循53 个输入字段的列表，以编程方式识别字段的目的。

 了解识别输入目的
1.3.6 识别目的 (AAA) 在 2.1 中添加 在使用标记语言实现的内容中，可以通过编程方式确定用户界面组件、图标和区域的目的。 了解识别目的

指南 1.4: 使用户更容易看到和听到内容，包括将前景与背景分离

此指南与确保核心内容易于从背景和其他装饰中识别出来有关。经典示例是颜色（颜色对比度和颜色使用来传达说明），但也适用于其他情况。

成功标准 如何符合标准 实用资源
1.4.1 颜色使用 (A)

不应仅依靠颜色来传达信息。例如，在表单中，您永远不要仅使用颜色（如红色）来标记必填字段。相反（或同时），使用星号以及“必填”之类的标签会更合适。

 请参阅颜色使用、颜色和颜色对比度以及多个标签。
1.4.2 音频控件 (A) 对于任何播放时间超过三秒的音频，请提供可访问的控件来播放和暂停音频/视频，以及静音/调整音量。 使用原生<button>提供可访问的键盘控件，如视频播放器样式基础中所示。
1.4.3 最小对比度 (AA)

背景和前景内容之间的颜色对比度应达到最低水平以确保易读性

  • 文本及其背景应具有至少 4.5:1 的对比度比率。
  • 标题（或只是较大的）文本应具有至少 3:1 的比率。较大的文本定义为至少 18pt 或 14pt 粗体。
 请参阅颜色对比度和颜色和颜色对比度。
1.4.4 调整文本大小 (AA) 当文本大小加倍时，页面应具有可读性和可用性。这意味着设计应该具有响应性，以便在文本大小增加时，内容仍然可以访问。
1.4.5 文本图像 (AA) 不应使用图像来呈现文本可以完成的内容。例如，如果图像主要包含文本，则可以使用文本以及图像来表示它。
1.4.6 增强对比度 (AAA)

此标准遵循并建立在标准 1.4.3 的基础上。

  • 文本及其背景应具有至少 7:1 的对比度比率。
  • 标题（或只是较大的）文本应具有至少 4.5:1 的比率。较大的文本定义为至少 18pt 或 14pt 粗体。
 请参阅颜色和颜色对比度。
1.4.7 低背景音频或无背景音频 (AAA) 主要包含语音的预录音频录音应具有最少的背景噪音，以便内容易于理解。
1.4.8 视觉呈现 (AAA)

对于文本内容呈现，以下应为真

  • 前景和背景颜色应由用户选择。
  • 文本块的宽度不应超过 80 个字符（或字形），以实现最大可读性。
  • 文本不应完全对齐（例如，text-align: justify;）。
  • 行高应至少为段落内文本大小的 1.5 倍（例如，line-height: 1.5;），并且段落之间应至少为文本大小的 2.25 倍（例如，padding: 2.25rem;）。
  • 当文本大小加倍时，内容不应需要滚动。
1.4.9 文本图像（无例外）（AAA） 除非文本纯粹是装饰（即，它不传达任何内容）或无法以任何其他方式呈现，否则不应将文本作为图像的一部分呈现。
1.4.10 重排 (AA) 在 2.1 中添加
  • 对于从左到右的语言（如英语）或从右到左的语言（如阿拉伯语），没有水平滚动
  • 对于从上到下的语言（如日语），没有垂直滚动
  • 除了需要二维布局才能使用或理解的内容部分（如大型数据表）
 了解重排
1.4.11 非文本对比度 (AA) 在 2.1 中添加 用户界面组件和图形对象的最小颜色对比度比率为 3:1。 了解非文本对比度
1.4.12 文本间距 (AA) 在 2.1 中添加

应用以下样式时，不会丢失内容或功能

  • 行高（行间距）至少为字体大小的 1.5 倍
  • 段落后的间距至少为字体大小的 2 倍
  • 字母间距（跟踪）至少为字体大小的 0.12 倍
  • 字间距至少为字体大小的 0.16 倍
 了解文本间距
1.4.13 悬停或聚焦时的内容 (AA) 在 2.1 中添加

虽然其他内容可能会随着悬停和键盘焦点而出现和消失，但此成功标准指定了必须满足的三个条件

  • 可关闭（可以关闭/移除）
  • 可悬停（当指针悬停在其上时，其他内容不会消失）
  • 持久（其他内容不会在没有用户操作的情况下消失）
 了解悬停或聚焦时的内容

另请参阅