1. Web
  2. 无障碍
  3. 指南
  4. 理解 WCAG
  5. 可感知

可感知

本文提供了关于如何编写符合 Web 内容无障碍指南（WCAG）2.0 和 2.1 中可感知原则所列成功标准的网页内容的实用建议。可感知原则指出，用户必须能够以某种方式，使用他们的一种或多种感官来感知内容。

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

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

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

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

文本描述可能有效，或可访问的数据表（请参阅HTML 表格辅助功能）。请参阅 W3C 关于反对 longdesc 的图像描述扩展 (longdesc)。
多媒体内容（即音频或视频）至少应提供描述性标识，例如字幕或类似内容。

请参阅文本替代以了解静态字幕选项，以及音频文字稿、视频文本轨道以了解其他替代方案。
表单元素和按钮等用户界面控件应具有描述其用途的文本标签。 按钮很简单——你应该确保按钮文本描述了按钮的功能（例如，<button>上传图像</button>）。有关其他用户界面控件的更多信息，请参阅尽可能使用语义化用户界面控件。
以对辅助技术不可见的方式实现装饰性（非内容）图像、视频等，以免混淆用户。

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

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

注意：另请参阅 WCAG 对指南 1.1 的描述：文本替代。

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

基于时间的多媒体是指具有持续时间的多媒体，例如音频和视频。请注意，如果音频/视频作为现有文本内容的替代，则无需提供另一个文本替代。

成功标准 如何符合标准 实用资源
1.2.1 为预录制纯音频和纯视频内容提供替代方案 (A) 应为预录制纯音频媒体提供文字稿，并为预录制纯视频媒体（即无声视频）提供文字稿或音频描述。 请参阅音频文字稿以获取文字稿信息。目前尚无音频描述教程。
1.2.2 为网页视频提供字幕 (A) 您应该为网页上呈现的视频（例如 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) 对于任何正在播出的直播音频内容，应提供描述性文本，例如您正在收听的戏剧或音乐剧的剧本。这有助于听力障碍者观看者，他们无法听到内容。 请参阅音频文字稿以获取文字稿信息。

注意：另请参阅 WCAG 对指南 1.2 的描述：基于时间的多媒体：为基于时间的多媒体提供替代方案。

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

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

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

任何内容结构或内容之间建立的视觉关系也可以通过编程方式确定，或从文本描述中推断出来。这主要适用于以下情况：

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

HTML：辅助功能的基础 包含了大量相关信息，但您应特别参考良好的语义、尽可能使用语义 UI 控件和文本替代。
1.3.2 有意义的内容顺序 (A) 任何内容都应该易于确定一个合理、逻辑的阅读顺序，即使它的视觉呈现方式不寻常。应通过使用正确的语义元素（例如标题、段落）来明确顺序，并使用 CSS 创建任何不寻常的布局样式，而不受标记的影响。 再次，请参阅HTML：辅助功能的基础。
1.3.3 感知特性 (A)

操作控件或理解内容的说明不依赖单一感官。这可能导致与该感官相关的残障人士或不支持该感官的设备无法访问。因此，例如：

  • “点击圆形按钮继续”
    按钮应清晰标注，以便明确它就是您需要按下的按钮。如果存在多个按钮，请确保它们都清晰标注以区分其功能。
  • “收听音频说明以获取指导”
    这显然有问题——音频对于有听力障碍的人是无法访问的，而文本可以阅读，如果需要，也可以由屏幕阅读器朗读。
  • “从屏幕右侧滑动以显示菜单”
    有些用户可能无法滑动屏幕，可能是因为残疾，也可能是因为他们的设备不支持触摸。应提供替代方案，例如键盘快捷键或可以通过键盘或其他方式激活的按钮。

注意：仅通过颜色传达指令与此相关，但在不同的指南中有所涵盖——1.4.1。
1.3.4 方向 (AA) 内容不将其视图和操作限制为单一显示方向，例如纵向或横向，除非特定的显示方向至关重要。

理解方向

1.3.5 识别输入目的 (AA)

按照53 个输入字段的列表，以编程方式识别字段的目的。

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

注意：另请参阅 WCAG 对指南 1.3 的描述：可适应：创建能够以不同方式呈现而不会丢失信息或结构的内容。

指南 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)
  • 从左到右的语言（如英语）或从右到左的语言（如阿拉伯语）不应出现水平滚动
  • 从上到下的语言（如日语）不应出现垂直滚动
  • 除非内容的一部分需要二维布局才能使用或理解（例如大型数据表）
 理解回流
1.4.11 非文本对比度 (AA) 用户界面组件和图形对象的最小颜色对比度应为 3:1。 理解非文本对比度
1.4.12 文本间距 (AA)

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

  • 行高（行间距）至少为字体大小的 1.5 倍
  • 段落后的间距至少为字体大小的 2 倍
  • 字距（字距调整）至少为字体大小的 0.12 倍
  • 词间距至少为字体大小的 0.16 倍
 理解文本间距
1.4.13 悬停或聚焦时的内容 (AA)

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

  • 可关闭（可关闭/删除）
  • 可悬停（当指针位于其上方时，附加内容不会消失）
  • 持久性（附加内容不会在没有用户操作的情况下消失）
 理解悬停或聚焦时的内容

注意：另请参阅 WCAG 对指南 1.4 的描述：可区分：让用户更容易看到和听到内容，包括将前景与背景分开。

另见

帮助改进 MDN

了解如何贡献

此页面由MDN 贡献者于最后修改。

在 GitHub 上查看此页面 • 报告此内容的问题