创建辅助内容（WCAG 2.0 符合性） creating-accessible-content-wcag-conformance
WCAG 2.0包含一系列独立于技术的准则和成功标准，旨在确保残障人士能够访问并使用Web内容。
这些指南根据三个一致性级别进行分级：A级（最低）、AA级和AAA级（最高）。 以下是各个级别的简要定义：
- 级别 A： 您的站点满足基本的、最低级别的无障碍性。要达到此级别，需满足所有级别 A 成功标准。
- AA级： 这是您努力实现的理想无障碍级别，站点的无障碍性级别更高，因此多数情况下大部分人都可以使用大部分技术访问站点。 为达到此级别，所有 A 级和 AA 级成功标准均已满足。
- AAA 级： 您的网站达到了高水平的可访问性。 要达到此级别，需满足所有级别 A、级别 AA 和级别 AAA 成功标准。
在创建站点时，您应该大体上确定希望自己的站点符合哪个等级。
以下部分介绍 WCAG 2.0 准则以及符合 A 级和 AA 级的相关成功标准。
准则 1：可感知 principle-perceivable
准则 1：可感知 – 信息和用户界面组件必须以可感知的方式呈现给用户。
替换文本 (1.1) text-alternatives
指南 1.1 文本替代：为任何非文本内容提供替换文本，以便可以将其更改为人们需要的其他形式，例如大字体、盲文、语音、符号或更简单的语言。
非文本内容 (1.1.1) non-text-content
- 成功标准 1.1.1
- A 级
- 非文本内容：呈现给用户的所有非文本内容都具有相同用途的替换文本，以下所列情况除外。
用途 – 非文本内容 (1.1.1) purpose-non-text-content
网页上的信息可以以许多不同的非文本格式提供，例如图片、视频、动画、图表和图形。失明或严重视力障碍的人无法看到非文本内容，但他们可以通过屏幕阅读器阅读文本内容或通过盲文显示设备以触觉形式呈现文本内容，从而访问文本内容。 因此，通过以图形格式提供内容的替换文本，看不到图形内容的人可以访问内容提供的信息的等效版本。
另外的一个实用好处是，替换文本使非文本内容能够通过搜索引擎技术建立索引。
如何达到标准 – 非文本内容 (1.1.1) how-to-meet-non-text-content
对于静态图形，基本的要求是为图形提供对等的替换文本。此方法在中完成 替换文本 字段：
alt 属性。 这样做可确保作者可以将其添加到该内容中（请参阅添加对其他 HTML 元素和属性的支持）。此 替换文本 字段位于 高级 的图像属性选项卡 图像 组件对话框：
AEM添加一个 替换文本 到您的图像。 对于经典UI，默认属性的创建方式有两种不同的方案，但默认值可能不足以作为替代值，并且可能必须在中进行编辑 高级 图像属性选项卡：
-
文件：
从用户的硬盘上传映像。 如果您将某个映像组件添加到页面，然后从硬盘或其他来源选择一个映像，则默认值是 替换文本 是
file. 此值必须在 高级 “图像属性”选项卡。 同样，此值不会显示在 替换文本 字段，但是当值改变时，新值显示在字段中。 -
资源：
将从数字资产存储库中添加图像。 如果将图像从数字资产存储库拖到网页中，则 标题 和 替换文本 该图像的值获取自该图像的元数据。
alt 属性，提示屏幕阅读器忽略图像。创建有效的替换文本 creating-good-text-alternatives
非文本内容的形式多种多样，因此替换文本的值取决于图形在网页中所起的作用。一些一般的经验法则包括：
-
替换文本应当既简洁明了，又能清晰地表达非文本内容所提供的基本信息。
-
应避免使用较长的描述（超过100个字符）。 如果替换文本需要表达更多的详细信息，则可以通过以下方法来实现：
- 在替换文本中提供简短的描述
- 同时，在同一页面的其他位置或在一个单独的网页中提供更加详尽的描述文本。然后，为该图像创建一个链接，或者在图像旁边放置一个文本链接，以便链接到该单独的描述。
-
替换文本不应复制同一页面邻近位置以文本形式提供的内容。请切记，许多图像的作用是解释说明页面文本中已涵盖的要点，因此详尽的替换文本可能已经存在。
-
如果非文本内容是指向其他页面或文档的链接，并且没有其他文本构成同一链接的一部分，则图像的替换文本必须指示链接的目标。 它不能描述图像。
-
如果非文本内容包含在按钮元素中，并且没有文本构成同一按钮的一部分，则图像的替换文本必须指示按钮的功能，而不是描述图像。
-
可以为图像指定空(null)替换文本，但前提是图像没有替换文本。 例如，它是纯粹的装饰性图形。 或者，如果页面文本中已存在对等文本。
此 W3C草案：HTML5用于提供实用替换文本的技巧 提供了针对不同类型图像的适当替换文本设置的更多详细信息和示例。
以下特定类型的非文本内容可能需要替换文本：
-
说明性照片：
这些是人员、对象或地点的图像。 想一想照片在页面中的作用；相应的对等文本可以为 照片 [对象]，但可能取决于周围的文本。
-
图标：
传递特定信息的小图形符号（图形）。 跨页面和站点必须始终如一地使用它们。 图标在页面或网站上的所有实例都应使用相同的简短替换文本，除非这样做会与相邻的文本产生不必要的重复。
-
图表和图形：
这些通常表示数值数据。 因此，提供替换文本的一个选项可能是简要总结图表或图形中显示的主要趋势。 如有必要，请在文本中使用 描述 中的字段 高级 “图像属性”选项卡。 此外，还可以在页面或站点的其他位置以表形式提供源数据。
要为此示例图表提供替代方法，请添加一个简明的
alt文本到图像本身，然后使用替换全文跟踪图像。code language-xml <p><img src="figure1.gif" alt="Figure 1" ></p> <p> Figure 1. Distribution of Articles by Journal Category. Pie chart: Language=68%, Education=14% and Science=18%.</p>note note NOTE 上述代码片段仅用于说明顺序。 使用 图像 组件，而不是 img src上面使用的参考。在AEM中，您可以使用 替换文本 和 描述 图像配置对话框中的字段 — 如所示 如何达到标准 — 非文本内容(1.1.1).
-
映射、图表、流程图：
对于提供空间数据的图形(例如， 要支持描述对象或进程之间的关系)，请确保以文本格式提供关键消息。对于映射，提供等效完整文本可能不太现实，但如果提供映射来作为帮助相关人员找到特定位置的一种方法，则映射图像的替换文本可以简短地指示为 X 映射，然后在页面其他位置的文本中或者通过 图像 组件 高级 选项卡中的 描述 字段提供该特定位置的说明。
-
验证码：
验证码是 全自动公共图灵测试将计算机和人类区分开来. 这是一项在网页中用于区分人类和恶意软件的安全检查，但同时也会对网页访问造成妨碍。用户要想通过安全测试，必须按照要求描述自己所看到的这些图像。无法为图像提供替换文本，因此您必须考虑替换非图形解决方案。
W3C提供了一些建议，例如： 这些方法中的每一种都有其自身的优点和缺点。
- 逻辑谜题
- 使用声音输出替代图像
- 限制使用帐户和垃圾邮件过滤器。
-
背景图像：
这些图像是使用层叠样式表(CSS)而不是HTML实现的。 无法指定替换文本值。 因此，背景图像不应提供重要的文本信息 — 即便提供，这些信息也必须在页面的文本中提供。
但是，当图像无法显示时，必须显示替代背景。
note note NOTE 背景和前景文本之间应具有适当级别的对比度。 此对比将在中详细讨论 对比度（最小）(1.4.3).
更多信息 – 非文本内容 (1.1.1) more-information-non-text-content
基于时间的媒体 (1.2) time-based-media
准则 1.2 基于时间的媒体：为基于时间的媒体提供替代内容。
此信息涉及以下Web内容 基于时间. 这包括用户可以播放的内容（例如视频、音频和动画内容），并且可以是预先录制的，也可以是实时流。
纯音频和纯视频（预先录制）(1.2.1) audio-only-and-video-only-pre-recorded
-
成功标准 1.2.1
-
A 级
-
纯音频和纯视频（预先录制）：对于预先录制的纯音频媒体和预先录制的纯视频媒体，均存在以下情况，除非音频或视频就是文本的替代媒体 ，且明确进行了如下标记：
- 预先录制的纯音频：提供了一种基于时间的媒体的替代方法，其为预先录制的纯音频内容提供了等效信息。
- 预先录制的纯视频：提供基于时间的媒体的替代方案或音频轨道，该轨道为预先录制的纯视频内容提供等效信息。
用途 — 纯音频和纯视频（预先录制）(1.2.1) purpose-audio-only-and-video-only-pre-recorded
以下用户可能会遇到音频和视频的无障碍问题：
- 患有视觉障碍的用户在没有音轨，或者音轨提供的信息不足以告知他们视频或动画中正在播放的内容时；
- 因患有听觉障碍或耳聋而无法听到音轨的用户；
- 可以听到音轨但无法理解所讲内容的用户（例如，因为语言不通而无法理解）。
如果用户使用的浏览器或设备不支持播放特定媒体格式（如 Adobe Flash）的内容，则这些用户可能也无法访问相关视频或音频。
如果以不同的格式提供这些信息，如使用文本（或者对于无音频的视频，使用音频），则无法访问原始内容的用户便可以访问这些信息。
如何达到标准 — 纯音频和纯视频（预先录制）(1.2.1) how-to-meet-audio-only-and-video-only-pre-recorded
-
如果内容是预先录制的不含视频的音频（如播客）：
-
在紧靠内容之前或之后提供指向音频内容的文本转录的链接。
成绩单应该是一个HTML页面，其中包含所有口语和重要的非口语内容的等效文本。 它还应该标明讲话者、对讲话环境的描述、声音表情以及对任何其他重要音频的描述。
-
-
如果内容是无音频的动画或预先录制的视频：
- 在紧靠内容之前或之后的位置提供一个链接，指向与视频提供的信息对等的文本描述。
- 或者，指向以常用的音频格式（如 MP3）呈现的对等音频描述。
在AEM网页中插入多媒体(尤其是Flash内容)与插入图像类似。 但是，由于多媒体内容远不止是静止图像，因此对于控制多媒体的播放方式有各种不同的设置和选项。
更多信息 — 纯音频和纯视频（预先录制）(1.2.1) more-information-audio-only-and-video-only-pre-recorded
字幕（预先录制）(1.2.2) captions-pre-recorded
- 成功标准 1.2.2
- A 级
- 字幕（预先录制）：为同步媒体中所有预先录制的音频内容提供了字幕，除非该媒体是文本的替代媒体，且明确进行了相应标记。
用途 — 字幕（预先录制）(1.2.2) purpose-captions-pre-recorded
耳聋或听力缺佳的人无法或很难获取音频内容。 字幕是讲话和非讲话音频的对等文本，在视频播放过程中会在相应的时间显示在屏幕上。这让无法听到音频的用户可以了解正在播放的内容。
如何达到标准 — 字幕（预先录制）(1.2.2) how-to-meet-captions-pre-recorded
字幕有以下两种形式：
- 开放式：字幕在视频播放过程中始终可见
- 隐藏式：字幕可以由用户打开或关闭
尽可能使用隐藏式字幕。 用户可以选择是否查看字幕。
对于隐藏式字幕，请创建并提供相应格式的同步字幕文件，例如 SMIL，以及视频文件。
请参阅中的教程 更多信息 — 字幕（预先录制）(1.2.2). 确保提供注释，让用户知道视频有字幕可看。
如果必须使用开放式字幕，应将文本嵌入到视频轨道中。此方法使用视频编辑应用程序实现，该应用程序允许将标题叠加到视频上。
更多信息 — 字幕（预先录制）(1.2.2) more-information-captions-pre-recorded
音频描述或替代媒体（预先录制）(1.2.3) audio-description-or-media-alternative-pre-recorded
- 成功标准 1.2.3
- A 级
- 音频描述或替代媒体（预先录制）：对于同步的媒体，为预先录制的视频内容提供了基于时间的媒体的替代内容或音频描述，除非该媒体是文本的替代媒体，且明确进行了相应标记。
用途 — 音频描述或替代媒体（预先录制）(1.2.3) purpose-audio-description-or-media-alternative-pre-recorded
如果视频或动画中的信息仅以可视方式显示，则失明或患有视觉障碍的用户将会遇到无障碍问题。 或者，如果音轨提供的信息不足，无法直观地了解正在发生的事情。
如何达到标准 — 音频描述或替代媒体（预先录制）(1.2.3) how-to-meet-audio-description-or-media-alternative-pre-recorded
可以通过以下两种方式来达到该成功标准。任何一种方式都是可以接受的：
-
为视频内容提供附加的音频描述。您可以通过以下三种方式之一实现此方法：
-
在现有对话暂停期间，提供有关场景变换的信息，该信息不作为现有音轨内容的一部分；
-
提供一段附加的可选新音轨，其中不仅包含原始音轨，而且还包含有关场景变换的额外音频信息。
- 用户可以在现有音轨之间切换(如果 不会 包含音频描述)和新音轨(用于 是 包含音频描述)。
- 此方法可防止对不需要额外描述的用户造成中断。
-
为视频内容创建第二个版本，以便提供延长的音频描述。这样做通过在适当的时间暂时暂停音频和视频，减少在现有对话之间的间隙中提供详细音频描述方面的困难。 最终，在重新开始播放视频之前，便可以提供一个更长的音频描述。与上一种方式中所提到的一样，为了避免妨碍到不需要附加描述的用户，最好将此类音频描述作为可选的额外音轨来提供。
-
-
为视频或动画中的音频和视觉元素提供适当的对等文本记录。它应酌情包括指出讲话者，描述讲话背景、声音表情。 根据文本长度的不同，既可以将记录放置在视频或动画所在的页面上，也可以将其放置在单独的页面上；如果选择后者，则需要在视频或动画旁边提供记录的链接。
至于如何创建带有音频描述的视频，具体细节不在本指南的范围之内。创建视频和音频描述非常耗时，但其他Adobe产品可以帮助您完成这些任务。 如果在 Adobe Flash Professional 中创建内容，则还应当创建一个脚本来提示用户下载合适的插件，并通过 <noscript> 元素提供替换文本。
更多信息 — 音频描述或替代媒体（预先录制）(1.2.3) more-information-audio-description-or-media-alternative-pre-recorded
字幕（实时）(1.2.4) captions-live
- 成功标准 1.2.4
- AA 级
- 字幕（实时）：为同步媒体中的所有实时音频内容提供了字幕。
用途 – 字幕（实时）(1.2.4) purpose-captions-live
该成功标准与字幕（预先录制）的标准完全相同，因为其用途在于解决耳聋或听力欠佳的用户遇到的无障碍问题，两者的不同之处在于该成功标准需要处理网络直播等实时演示。
如何达到标准 – 字幕（实时）(1.2.4) how-to-meet-captions-live
遵循为提供的指南 字幕（预先录制） 以上。但是，由于媒体的实时性质，必须尽快提供字幕并对正在发生的情况做出回应。 因此，应当考虑使用实时字幕工具或语音转文本工具。
与此相关的详细说明不在本指南的范围之内，但是以下资源提供了有用的信息：
更多信息 – 字幕（实时）(1.2.4) more-information-captions-live
音频描述（预先录制）(1.2.5) audio-description-pre-recorded
- 成功标准 1.2.5
- AA 级
- 音频描述（预先录制）：为同步媒体中的所有预先录制的视频内容提供了音频描述。
用途 — 音频描述（预先录制）(1.2.5) purpose-audio-description-pre-recorded
此成功标准与 音频描述或替代媒体（预先录制），但作者必须提供更加详细的音频描述才能符合AA级标准。
如何达到标准 — 音频描述（预先录制）(1.2.5) how-to-meet-audio-description-pre-recorded
遵循为提供的指南 音频描述或替代媒体（预先录制）.
更多信息 — 音频描述（预先录制）(1.2.5) more-information-audio-description-pre-recorded
适应性 (1.3) adaptable
准则1.3可适应：创建能够以不同方式（例如，更简单的布局）呈现的内容且不会丢失信息或结构。
该准则包含为支持以下用户而必须满足的要求：
-
可能无法访问作者在 标准 二维、多列、彩色网页布局
-
可能使用纯音频或可视替代显示（如大文本或高对比度）。
信息和关系 (1.3.1) info-and-relationships
- 成功标准 1.3.1
- A 级
- 信息和关系：通过呈现传递的信息、结构和关系，可以采用编程方式进行确定或在文本中提供。
用途 – 信息和关系 (1.3.1) purpose-info-and-relationships
残障人士使用的许多辅助型技术都依赖结构性信息才能有效地显示或输出内容。 此结构信息可以采用页面标题、表格行和列标题以及列表类型的形式。 举例来说，屏幕阅读器可以让用户从页面的一个标题导航到另一个标题。但是，如果页面内容仅仅在可视样式而非基本 HTML 中具有结构，则辅助型技术便无法获取结构性信息，从而限制它们辅助用户轻松浏览的能力。
该成功标准旨在确保此类结构性信息通过HTML提供，以便浏览器和辅助型技术可以访问并利用这些信息。
如何达到标准 – 信息和关系 (1.3.1) how-to-meet-info-and-relationships
AEM 允许轻松地使用相应的 HTML 元素构建网页。在RTE（文本组件）中打开页面内容，然后使用 格式 菜单来指定相应的结构元素（例如，段落和标题）。
下图显示了已设置为段落文本的文本；正在使用的源代码视图显示它具有正确的打开和关闭方式 <p> 和 </p> 标记之间。
通过以下方式确保网页指定了适当的结构：
-
使用标题：
只要启用了RTE辅助功能(请参阅 AEM和可访问性)，AEM提供了三个级别的页面标题。 您可以使用这些标题标识内容的章节和子章节。标题 1 是最高级别的标题，标题 3 是最低级别的标题。系统管理员可以配置系统以允许使用更多标题级别。
下图演示了不同类型标题的示例。
-
强调文本：
使用或元素指示重点。 切勿在段落中使用标题突出显示文本。
- 突出显示要强调的文本；
- 单击 B 图标(for) <strong>)或 I 图标(for) <em>)中显示 属性 面板(确保已选择HTML)。
note note NOTE 标准 AEM 安装中的 RTE（富文本编辑器）设置为： - <b> 对象 <strong>
- <i> 对象 <em>
尽管两种形式效果相同，但最好使用和，因为从语义上来讲，它们才是正确的HTML标记。 开发团队可以在开发项目实例时将RTE配置为使用和(而非和)。 -
使用列表：可以使用 HTML 指定三种不同类型的列表：
-
此
<ul>元素用于 无序 列表（项目符号）列表。 单个列表项使用<li>元素。在RTE中，使用 项目符号列表 图标。
-
<ol>元素用于表示 编号 列表。单个列表项使用<li>元素。在 RTE 中，使用 编号列表 图标。
如果要将现有内容更改为特定列表类型，请突出显示相应的文本并选择相应的列表类型。与前面显示如何输入段落文本的示例一样，相应的列表元素会自动添加到HTML中，但您可以在源编辑视图中查看该列表。
note note NOTE 此 <dl>RTE不支持元素。 -
-
使用表：
数据表必须使用HTML表元素进行标识：
- 一个
<table>元素 - 每个表行均使用
<tr>元素进行标识 - 每个行标题和列标题均使用
<th>元素进行标识 - 每个数据单元格均使用
<td>元素进行标识
note note NOTE 表格应使用 表 组件。 虽然可以在文本组件中创建表，但不建议这样做。 此外，辅助表会使用以下元素和属性：
<caption>元素用于为表提供可视描述。默认情况下，字幕显示在表的上方，但可以使用CSS进行适当放置。 描述采用编程方式与表相关联，因此这是一种提供内容简介的有用方法。<h3 class="summary">元素通过总结视力正常的用户可以看到的内容，帮助失明的用户更加轻松地了解表中提供的信息。当使用了复杂或非常规的表布局时，这种方法尤其有用（该属性不会显示在浏览器中，只会由辅助型技术读取）。<th>元素的scope属性用于指示某个单元格表示特定行的标题，还是特定列的标题。在复杂的表中，即数据单元格可能与一个或多个标题相关联的情况下，类似的方法是使用标题和 id 属性。
note note NOTE 默认情况下，这些元素和属性不直接可用，但系统管理员可以在 表属性 对话框中添加对这些值的支持（请参阅添加对其他 HTML 元素和属性的支持）。 添加 表，您可以配置 表属性 使用对话框。
- 适当的 题注.
- 理想情况下，请删除 Width、 Height、Border 、 Border Border Sell PaddingSpacing 、 Cell Spacing的默认值。 因为这些属性可以在全局样式表中设置。
然后，您可以使用 单元格属性 选择单元格是数据还是标题单元格，如果是标题单元格，选择它是否与行或列或两者相关：
- 一个
-
复杂数据表：
有时，如果存在具有两个或多个标题级别的复杂表，则基本的“表属性”可能不足以提供所有必要的结构信息。 对于这些类型的复杂表，必须使用标题及其相关单元格创建直接关系 标题 和 id 属性。 例如，在下表中，标题和 ID 是相匹配的，以便为辅助型技术用户建立程序化关联。
note note NOTE 现成的安装程序中没有 id 属性。可以通过在 RTE 中配置 HTML 规则和序列化器来启用该属性。 note note NOTE 表格应使用 表 组件。 虽然可以在文本组件中创建表，但不建议这样做。 code language-xml <table> <tr> <th rowspan="2" id="h">Homework</th> <th colspan="3" id="e">Exams</th> <th colspan="3" id="p">Projects</th> </tr> <tr> <th id="e1" headers="e">1</th> <th id="e2" headers="e">2</th> <th id="ef" headers="e">Final</th> <th id="p1" headers="p">1</th> <th id="p2" headers="p">2</th> <th id="pf" headers="p">Final</th> </tr> <tr> <td headers="h">15%</td> <td headers="e e1">15%</td> <td headers="e e2">15%</td> <td headers="e ef">20%</td> <td headers="p p1">10%</td> <td headers="p p2">10%</td> <td headers="p pf">15%</td> </tr> </table>要在AEM中实现此目的，必须使用源编辑模式直接添加标记。
note note NOTE 此功能在标准安装版本中并非立即可用。它需要配置RTE；HTML规则和序列化器。
更多信息 – 信息和关系 (1.3.1) more-information-info-and-relationships
感官特性 (1.3.3) sensory-characteristics
- 成功标准 1.3.3
- A 级
- 感官特性：为了解和使用内容而提供的说明不完全依赖于组件的感官特性，如形状、大小、可视位置、方向或声音。
用途 – 感官特性 (1.3.3) purpose-sensory-characteristics
设计者往往关注可视设计特征，如颜色、形状、文本样式，或者内容在展示信息时所在的绝对或相对位置。在传达信息方面，这些可能是强大的设计技术，但是失明或患有视觉障碍的用户可能无法访问需要视觉识别属性（如位置、颜色或形状）的信息。
同样，如果用户在获取信息时必须辨认不同的声音（例如，男性或女性讲话的内容），而且音频内容没有反映在任何替换文本中，则患有听觉障碍的用户就会遇到辅助功能问题。
如何达到标准 – 感官特性 (1.3.3) how-to-meet-sensory-characteristics
确保那些依赖页面内容的可视特性传递的任何信息都同时以替代格式呈现。
- 切勿依赖可视位置来提供信息。例如，如果您想将用户引荐至页面右侧的菜单，以便访问更多信息，请不要引荐 右侧的菜单；请改为命名菜单（例如，通过标题），并在文本中引用该名称。
- 切勿将文本样式（例如，粗体或斜体文本）作为传递信息的唯一方式。
更多信息 - 感官特性 (1.3.3) more-information-sensory-characteristics
可辨别性 (1.4) distinguishable
准则 1.4 可辨别性：使用户更容易看到和听到内容，包括将前景与背景分离开。
使用颜色 (1.4.1) use-of-color
- 成功标准 1.4.1
- A 级
- 使用颜色：颜色不用作传递信息、指示动作、提示响应或区分可视元素的唯一可视方式。
用途 – 使用颜色 (1.4.1) purpose-use-of-color
颜色能够有效地增强网页的美感，而且还有助于传递信息。但是，由于各种视觉障碍（从失明到色盲）的限制，部分用户无法辨认某些颜色。这个问题使得颜色编码成为提供信息的一种不可靠的方式。
例如，患有红绿色盲的人无法区分绿色阴影和红色阴影。 这些用户可能会将这两种颜色看成第三种颜色（如棕色），在这种情况下，他们就无法辨认红色、绿色和棕色。
此外，如果用户使用仅支持文本的浏览器、单色显示设备或查看黑白打印的页面，他们也无法感知到颜色。
如何达到标准 – 使用颜色 (1.4.1) how-to-meet-use-of-color
无论在何处使用颜色传递信息，都应确保无需看到颜色即可获取相应的信息。
例如，确保通过颜色提供的信息也明确地以文本提供。 下图显示了颜色和文本如何指示性能座位可用性：
如果颜色用作提供信息的线索，则还应该提供其他可视线索，如更改样式（例如，粗体、斜体）或者字体。 这样可以帮助弱视或色盲的用户识别信息。但是，不能完全依赖这种方法，因为这对于根本无法看到页面的用户而言并无助益。
更多信息 – 使用颜色 (1.4.1) more-information-use-of-color
对比度（最小）(1.4.3) contrast-minimum
-
成功标准 1.4.3
-
AA 级
-
对比度（最小）：文本的可视呈现以及文本的图像至少要有 4.5:1 的对比度，以下内容除外：
- 大文本：大号文本及其图像至少要有 3:1 的对比度。
- 附属内容：文本或文本的图像是未激活的用户界面组件的一部分，只是纯粹的装饰或对任何人都不可见，或者只是包含其他重要可视内容的图片的一部分，对于此类文本或文本的图像，没有对比度要求。
- 商标标志：文本是徽标或品牌名称的一部分，对于此类文本，没有最低对比度要求。
用途 – 对比度（最小）(1.4.3) purpose-contrast-minimum
患有某种视觉障碍的用户可能无法辨认某些对比度低的颜色对。如果出现以下任一情况，此类用户便可能遇到无障碍问题：
- 文本与其背景颜色之间的对比度极低。
- 文本的颜色编码（例如链接文本和非链接文本）在辨认信息时起到重要作用。
如何达到标准 – 对比度（最小）(1.4.3) how-to-meet-contrast-minimum
确保文本与其背景之间有明显的对比度。对比度取决于相关文本的大小和样式：
- 对于大小小于 18 点（或粗体为小于 14 点）的文本，文本中的文字/图像与背景之间的对比度至少应为 4.5:1。
- 对于大小至少为 18 点（或粗体至少为 14 点）的文本，对比度至少应为 3:1。
- 如果背景带有图案，则应将任何文本周围的背景变浅，以便将对比度维持在 4.5:1 或 3:1。
要检查对比度，可使用颜色对比度工具，例如 Paciello Group Color Contrast Analyzer 或 WebAIM Color Contrast Checker。这些工具可让您检查颜色对并报告任何对比度问题。
或者，如果您不太在意页面外观的指定，则可以选择不指定背景和前景文本颜色。在这种情况下，无需检查对比度，因为用户的浏览器会确定文本和背景的颜色。
如果无法满足建议的对比度级别，请提供指向页面的替代等效版本（没有颜色对比度问题）的链接。 或者，让用户根据自己的要求调整页面颜色方案的对比度。
更多信息 - 对比度（最小）(1.4.3) more-information-contrast-minimum
文本的图像 (1.4.5) images-of-text
-
成功标准 1.4.5
-
AA 级
-
文本的图像：如果使用的技术可以达到可视呈现效果，使用文本来传递信息而不使用文本的图像，以下情况除外：
- 可自定义：文本的图像可根据用户的要求以可视方式进行自定义；
- 必需：文本的特定呈现方式对要传递的信息而言是必需的。
用途 – 文本的图像 (1.4.5) purpose-images-of-text
当需要文本的某种特定样式时，通常会使用文本的图像；例如，商标标志或从其他来源生成的文本（如纸质文档的扫描件）。 但是，与以 HTML 呈现的文本和使用 CSS 设置格式的文本相比，文本的图像无法灵活地改变大小或外观，而这些改变可能正是患有视觉障碍或有阅读障碍的用户所必需的。
如何达到标准 – 文本的图像 (1.4.5) how-to-meet-images-of-text
如果必须使用文本的图像，应使用 CSS 将文本的图像替换为 HTML 形式的对等文本，这样就可以对文本进行自定义。有关示例，请参见 C30：使用CSS将文本替换为文本的图像，并提供用户界面控件以进行切换.
更多信息 - 文本的图像 (1.4.5) more-information-images-of-text
准则 2：可操作 principle-operable
暂停、停止、隐藏 (2.2.2) pause-stop-hide
-
成功标准 2.2.2
-
A 级
-
暂停、停止、隐藏：对于移动、闪烁、滚动或自动更新的信息，符合以下情况：
-
移动、闪烁、滚动：适用于任何移动、闪烁或滚动信息
- (a)自动启动，
- (b)持续超过五秒钟，而
- ©与其他内容同时显示，有一个机制可供用户暂停、停止或隐藏内容，除非移动、闪烁或滚动是活动的一部分，而活动至关重要；
-
自动更新：适用于任何自动更新信息
- (a)自动启动，并且
- (b)与其他内容并行显示，有一个机制可供用户暂停、停止或隐藏该内容，或控制更新频率，除非自动更新是活动的一部分，而在该活动中自动更新至关重要。
-
注意要点：
- 有关闪烁或闪烁的内容的要求，请参阅 切勿设计会导致癫痫发作的内容(2.3).
- 由于任何未达到此成功标准的内容会干涉用户使用整个页面的能力，因此网页上的所有内容（无论是否用来达到其他成功标准）必须达到此成功标准。请参阅符合性要求 5：不干涉。
- 通过软件定期更新或以流式传输至用户代理的内容，不需要保留或呈现在启动暂停和恢复呈现期间生成或收到的信息，因为这可能没有技术可行性，而且在许多情况下可能会误导这样做。
- 对于在预加载阶段或类似情况下出现的动画，如果所有用户在该阶段都无法进行交互，并且如果不指示进度可能会让用户感到困惑，或导致他们认为内容冻结或中断，则可以将此类动画视为必需内容。
用途 – 暂停、停止、隐藏 (2.2.2) purpose-pause-stop-hide
某些用户可能会发现移动的内容会让人分心，并且难以将注意力集中在页面的其他部分。 此外，如果用户无法跟上移动的文本，他们可能就很难阅读此类内容。
如何达到标准 - 暂停、停止、隐藏 (2.2.2) how-to-meet-pause-stop-hide
如果创建的网页包含移动、闪光或闪烁的内容，则可以采纳以下一项或多项建议，具体视内容的性质而定。
- 提供一种暂停滚动内容的方法，以便用户有充足的时间进行阅读。 例如，新闻滚动条或自动更新文本。
- 确保闪烁的内容会在 5 秒钟后停止闪烁。
- 使用适当的技术来显示可由浏览器禁用的闪烁内容。例如，Graphics Interchange Format (GIF) 或 Animated Portable Network Graphics (APNG) 文件。
- 在网页上提供一个表单控件，以允许用户禁用页面上的所有闪烁内容。
- 如果以上建议均不可行，请提供一个链接，以指向包含所有内容但不显示任何闪烁的页面。
更多信息 – 暂停、停止、隐藏 (2.2.2) more-information-pause-stop-hide
癫痫发作(2.3) seizures
闪光三次或低于阈值 (2.3.1) three-flashes-or-below-threshold
- 成功标准 2.3.1
- A 级
- 闪光三次或低于阈值：网页不包含在任何一秒内闪光超过 3 次，或闪光低于一般闪光和红色闪光阈值的内容。
用途 – 闪光三次或低于阈值 (2.3.1) purpose-three-flashes-or-below-threshold
在某些情况下，闪光的内容会导致光敏性癫痫发作。此成功标准旨在让此类用户能够访问和体验所有内容，而无需担心闪光的内容。
如何达到标准 – 闪光三次或低于阈值 (2.3.1) how-to-meet-three-flashes-or-below-threshold
请采取措施确保应用以下技术：
- 确保组件在任何一秒内的闪光次数均不超过三次；
- 如果无法满足上述条件，则应在屏幕上以像素为单位将闪光的内容显示在 小块安全区域 内。这块区域的面积通过一个复杂的公式来计算（详见 G176：尽量缩小闪光区域的面积），因此，仅当需要闪光内容时，才应使用这种技术。
更多信息 – 闪光三次或低于阈值 (2.3.1) more-information-three-flashes-or-below-threshold
页面带有标题 (2.4.2) page-titled
- 成功标准 2.4.2
- A 级
- 页面带有标题：网页带有标题，以描述主题或用途。
用途 – 页面带有标题 (2.4.2) purpose-page-titled
此成功标准旨在帮助每个人（无论是否患有任何特定障碍缺陷）无需阅读整个页面即可快速识别网页内容。当多个网页在浏览器选项卡中打开时，此设计非常有用，因为页面标题显示在选项卡中，因此可以快速找到。
如何达到标准 – 页面带有标题 (2.4.2) how-to-meet-page-titled
在 AEM 中创建新 HTML 页面时，可以指定页面标题。请确保标题能够充分描述页面内容，以便访客能够快速识别该内容是否与其需求相关。
您也可以在编辑页面时编辑页面标题，可通过访问该设置 Sidekick - 页面 选项卡 — 页面属性……
更多信息 – 页面带有标题 (2.4.2) more-information-page-titled
链接目的（在上下文中）(2.4.4) link-purpose-in-context
- 成功标准 2.4.4
- A 级
- 链接目的（在上下文中）：每个链接的目的都可以单独从链接文本中确定，也可以从链接文本及其编程确定的链接上下文一起确定。 但通常情况下，链接目的对用户并不明确的情况除外。
用途 – 链接目的（在上下文中）(2.4.4) purpose-link-purpose-in-context
对于所有用户（无论是否患有某方面的缺陷）而言，通过适当的链接文本清晰地指明链接方向至关重要。此设计可帮助用户确定他们是否实际想要关注链接。 对于视力正常的用户而言，当页面上有多个链接（尤其是文本较多的页面）时，有意义的链接文本非常有用，因为有意义的链接文本可以更清楚地指示目标页面的功能。 而使用辅助技术（可在单个页面上生成所有链接的列表）的用户可以更轻松地脱离上下文理解链接文本。
如何达到标准 – 链接目的（在上下文中）(2.4.4) how-to-meet-link-purpose-in-context
首先，确保链接文本清晰地描述了链接目的。
-
错误示例：
- 文本内容：有关 2010 年秋季晚间课程的详细信息，请单击此处。
- 原因分析：没有清晰明确地指明链接目标位置。
-
正确示例：
- 文本内容：2010 年秋季晚间课程 - 详细信息。
- 原因分析：通过稍微调整链接元素的文本和位置，可以改进链接文本。
链接用词在各个页面中应保持一致，尤其是导航栏的链接。 例如，如果特定页面的链接名为 出版物 在一个页面上，在其他页面上使用该文本以确保一致性。
但是，在编写时，围绕标题的使用存在一些问题：
- 标题属性中包含的文本仅供鼠标用户作为工具提示弹出窗口使用，并且无法使用键盘进行访问。
- 屏幕阅读器可以朗读标题属性，但是这项功能可能默认未启用；因此用户可能意识不到标题属性的存在。
- 标题文本的外观很难更改，这就意味着一些用户可能很难或无法阅读该文本。
因此，尽管标题属性可用于为链接提供额外的上下文，但是应务必注意其限制，而且不要将其用作相应链接文本的替代内容。
如果链接是由图像构成的，请确保该图像的替换文本描述了链接的目标。 例如，如果将一个书架的图像设置为某人出版物的链接，则替换文本应该写成 约翰·史密斯的出版物 而非 书架.
或者，如果链接锚包含的文本不仅描述了链接的目的，而且还说明了图像元素（这样文本就会显示在图像旁边），则可将图像的 alt 属性设置为空：
<a href="publications.html">
<img src = "bookshelf.jpg" alt = "" />
John Smith's publications
</a>
虽然提供无需附加上下文即可标识链接目的的链接文本是一种可取的方法，但该方法并不认为始终可行。与上下文无关的链接可用于以下情况，其 HTML 示例详见：如何达到成功标准 2.4.4。
- 当链接文本是由紧密相关的链接组成的列表的一部分时，以及当链接周围的列表项提供了足够的上下文时。
- 当可以通过 之前（而非之后）的段落文本清晰识别链接目的时。
- 当链接包含于数据表内，从而可以通过关联的标题清晰识别链接目的时。
- 当链接列表包含于一系列标题内且标题本身提供了合适的上下文时。
- 当链接列表包含于嵌套的链接内且嵌套链接上面的父列表项提供了合适的上下文时。
有时，一个页面上会有多个链接（其中每个链接都提供了复杂而又必要的链接方向详细信息），此时可以为该网页提供一个替代版本，使其显示完全相同的内容，只是其中的链接文本较为简洁。
或者，可以使用脚本，以便在链接本身中提供最少的文本。 但是，在激活位于页面顶部的相应控件时，链接文本将 已展开 详细介绍。 类似的方法是使用CSS执行以下操作 隐藏 视力正常的用户提供的完整链接，但仍会将其输出到全屏阅读器用户。 这不在本文档的范围之内，但有关如何实现此目标的更多信息，请参见 更多信息 — 链接目的（在上下文中）(2.4.4) 部分。
更多信息 – 链接目的（在上下文中）(2.4.4) more-information-link-purpose-in-context
准则 3：可理解 principle-understandable
使文本内容可读且可理解 (3.1) make-text-content-readable-and-understandable
页面语言 (3.1.1) language-of-page
- 成功标准 3.1.1
- A 级
- 页面语言：每个网页的默认人类语言都可以采用编程方式来确定。
用途 – 页面语言 (3.1.1) purpose-language-of-page
此成功标准旨在确保能够正确呈现文本和其他语言内容。对于屏幕阅读器用户而言，这意味着确保内容发音正确；而对于可视浏览器用户而言，这则更可能意味着确保正确显示某些字符集。
如何达到标准 – 页面语言 (3.1.1) how-to-meet-language-of-page
要达到此成功标准，可以使用页面顶部 <html> 元素中的 lang 属性来识别网页的默认语言。例如：
-
如果页面采用英式英语编写，则
<html>元素应该写成：<html lang = "en-gb"> -
而要以美式英语呈现的页面应该采用以下标准：
<html lang = "en-us">
在 AEM 中，创建页面时会设置页面的默认语言，但是也可以在编辑页面时更改该语言，通过 Sidekick - 页面 选项卡 - 页面属性… - 高级 选项卡可访问该设置。
更多信息 – 页面语言 (3.1.1) more-information-language-of-page
- 了解成功标准 3.1.1
- 如何达到成功标准 3.1.1
- 代码基于 ISO 639-1。W3 Schools 站点提供了各种语言的更广泛代码列表。
局部语言 (3.1.2) language-of-parts
- 成功标准 3.1.2
- AA 级
- 局部语言：内容中每个段落或短语的人类语言可以采用编程方式来确定，但专有名词、术语、不确定语言的词语，以及周围文本的本地语言中包含的词语或短语除外。
用途 – 局部语言 (3.1.2) purpose-language-of-parts
此成功标准的用途与页面语言的成功标准类似，不同之处在于此成功标准适用于在单个页面包含多语言内容的网页（例如，因为引用其他语言或者使用不常见的外来词而包含其他语言）。
应用此成功标准的页面允许：
- 盲文转换软件插入重音字符。
- 屏幕阅读器可正确朗读默认语言之外的单词。
- Google Translate 等翻译工具准确地将内容从一种语言翻译成另外一种语言。
如何达到标准 – 局部语言 (3.1.2) how-to-meet-language-of-parts
lang 属性可用于标识内容语言的更改。例如，引用的德语（ISO 639-1 代码“de”）可以采用以下方式表示：
<blockquote cite = "John F. Kennedy" lang = "de">
<p>Ich bin ein Berliner</p>
</blockquote>
同样，如果通过以下方式使用 span 元素，则浏览器可以准确地呈现不常见的外来词或短语：
<p>The only French phrase I know is <span lang = "fr">je ne sais quoi</span>.</p>
要添加包含相应语言的 span 元素，可以在 RTE 的源代码编辑模式下手动编辑 HTML 标记，以将其写成如上显示的方式。或者，也可以由系统管理员将 lang 属性添加到 RTE 中（请参阅添加对其他 HTML 元素和属性的支持）。
更多信息 – 局部语言 (3.1.2) more-information-language-of-parts
帮助用户避免和更正错误(3.3) help-users-avoid-and-correct-mistakes
标签或说明 (3.3.2) labels-or-instructions
- 成功标准 3.3.2
- A 级
- 标签或说明：当内容需要用户输入时，提供标签或说明。
用途 – 标签或说明 (3.3.2) purpose-labels-or-instructions
在提升界面易用性的最佳实践中，一种基本的做法是提供说明来帮助用户完成表单。对于视觉或认知障碍人士，如果在其他情况下难以理解表单的布局以及在特定表单字段中要提供的数据类型，此插件将很有帮助。
在AEM中，添加表单组件时会添加默认标签，例如 文本字段，以访问页面。 此默认标题取决于组件类型。您也可以在该字段编辑对话框的 标题与文本 选项卡中添加自己的标题。应务必确保标签能够帮助用户理解与每个表单组件相关的数据。
此 标题 字段必须用于字段元素，因为该字段提供了适用于辅助型技术的标签。只在字段旁边用文本编写一个标签是不够的。
对于某些表单组件，还可以使用 隐藏标题 复选框。以这种方式隐藏的标签仍对辅助型技术可用，但不显示在屏幕上。 虽然这在某些情况下可能是一个不错的方法，但最好尽可能加入一个可视标签。 某些用户可能正在查看屏幕的一小部分（一次查看一个字段），并且需要标签才能正确识别该字段。
图像按钮 image-buttons
使用了图像按钮（如 图像按钮 组件）后，编辑对话框 标题与文本 选项卡中的 标题 字段实际上会为图像提供替换文本，而不是提供标签。因此，在以下示例中，包含文本 Submit 的图像，其替代文本就是 Submit，该文本是使用编辑对话框中的 标题 字段添加的。
表单字段组 groups-of-form-fields
倘出现一组相关控制项，例如 单选按钮组，可能需要组和单个控件的标题。 在 AEM 中添加一组单选按钮时，标题 字段会提供此组标题，而单个标题会在创建单选按钮（项目）时指定。
但是，组标题和单选按钮本身之间并没有编程关联。模板编辑器必须将标题包装在必需的内 fieldset 和 legend 标记创建此关联，且只能通过编辑页面源代码来完成。 或者，系统管理员也可以添加对这些元素的支持，以使它们显示在 字段属性 对话框中（请参阅添加对其他 HTML 元素和属性的支持）。
有关 Forms 的其他考虑事项 additional-considerations-for-forms
如果必须按照特定的格式输入数据，应在标签文本中予以清楚说明。例如，如果必须以 DD-MM-YYYY 格式输入日期，应在标签中特别指明这一点。这意味着当屏幕阅读器用户遇到此类字段时，阅读器会自动将标签以及与格式相关的其他信息一并读出。
如果必须输入表单字段，请在标签中使用“必填”一词来说明。AEM 会为必填字段添加一个星号，但是最好在标签本身中也包含 required 一词（在编辑对话框的 标题 字段中）。
标签的位置也非常重要，因为它有助于用户找到对应的字段。当用户面对复杂的表单时，这显得尤为重要。应遵循以下约定：
-
复选框或单选按钮：
标签放在紧靠字段右侧的位置。
-
所有其他表单组件（例如，文本框和组合框）：
标签放在紧靠字段上方或左侧的位置。
在功能有限的简单表单中，相应地标记 Submit 按钮可以用作相邻字段的标签(例如， Search)。 当很难找到用于提供标签文本的空间时，这种方法非常有用。