文本标签和名称

在图像地图中，为每个 <area> 元素提供一个包含描述区域链接到的资源名称的 alt 属性。如果不这样做，图像地图将难以使用辅助技术 - 他们需要替代文本才能理解图像的用途。

以下示例展示了一个简单的图像地图（取自 H24：为图像地图的区域元素提供文本替代方案）

<img
  src="welcome.gif"
  usemap="#map1"
  alt="Areas in the library. Select an area for
more information on that area." />
<map id="map1" name="map1">
  <area shape="rect" coords="0,0,30,30" href="reference.html" alt="Reference" />
  <area
    shape="rect"
    coords="34,34,100,100"
    href="media.html"
    alt="Audio visual lab" />
</map>

请参见 <area> 元素参考页面，获取一个交互式示例。

• <area>
• H24：为图像地图的区域元素提供文本替代方案

对于其内容充当对话框的任何容器（例如，要求用户做出选择或对正在执行的操作做出响应的模式对话框），请为其提供描述性标签或名称，以便辅助技术使用者可以轻松地发现其目的。

对话框通常用 ARIA role="dialog" 或 role="alertdialog" 表示；您可以使用 aria-label 或 aria-labelledby 属性提供标签。

以下示例展示了一个简单的对话框，使用 role="dialog" 定义并使用 aria-labelledby 添加标签。

<div
  role="dialog"
  aria-labelledby="dialog1Title"
  aria-describedby="dialog1Desc">
  <h2 id="dialog1Title">Your personal details were successfully updated</h2>
  <p id="dialog1Desc">
    You can change your details at any time in the user account section.
  </p>
  <button>Close</button>
</div>

如果对话框没有标题，您可以改用 aria-label 包含标签文本

<div role="dialog" aria-label="Personal details updated confirmation">
  <p>
    Your personal details were successfully updated. You can change your details
    at any time in the user account section.
  </p>
  <button>Close</button>
</div>

• role="dialog"
• role="alertdialog"
• aria-label
• aria-labelledby
• WAI-ARIA：dialog 角色
• 对话框创作实践

在每个 HTML 文档中包含一个 <title> 来描述页面的用途非常重要。辅助技术的使用者通常会通过阅读页面的标题来推断页面包含的内容。如果标题不可用，他们必须导航页面才能确定其内容，这将是一个耗时且可能令人困惑的过程。

有关 <title> 元素的参考文章的标题如下所示

<title>
  &lt;title&gt;: The Document Title element - HTML: Hypertext Markup Language |
  MDN
</title>

另一个示例可能如下所示

<title>Fill in your details to register — myGov services</title>

为了帮助使用者，您可以更新页面标题值以反映重要的页面状态更改（例如，表单验证问题）

<title>2 errors — Fill in your details to register — myGov services</title>

• <title>

确保嵌入内容的元素具有 title 属性来描述嵌入式内容。这包括 <embed> 和 <object> 元素。这些元素通常用于图形内容，与 <img> 元素类似。描述性标题可以帮助辅助技术的使用者了解元素正在显示的内容。

为了获得最佳无障碍性，请在 <figure> 元素中包含一个 <figcaption>，即使这样做在技术上是可选的。标题是图形中任何替代文本的补充。标题描述了图形在文档中的用途，这可能不同于对视觉项目的简单描述，如替代文本所提供的那样。

以下示例展示了带有标题的图形代码。alt 属性的 <img> 描述了图像的外观；<figcaption> 从功能角度描述了图像（在本例中，是图像中花的拉丁名称）。

<figure>
  <img
    src="milkweed.jpg"
    alt="Black and white close-up photo of milkweed flowers" />
  <figcaption>Asclepias verticillata</figcaption>
</figure>

域集元素必须有一个文本描述，类似于其他表单元素。使用 <legend> 元素描述域集的用途。

当使用 <fieldset> 元素将一组表单元素分组在一起时，您应该在其中包含一个嵌套的 <legend> 元素，其中包含对该组的清晰描述。

辅助技术的用户在尝试弄清楚该组的总体目的时，会发现此描述很有帮助。如果没有图例，他们将不得不浏览该组中的各个表单控件以推断总体目的，这可能会导致混淆。

<form>
  <fieldset>
    <legend>Choose your favorite monster</legend>

    <input type="radio" id="kraken" name="monster" value="K" />
    <label for="kraken">Kraken</label><br />

    <input type="radio" id="sasquatch" name="monster" value="S" />
    <label for="sasquatch">Sasquatch</label><br />

    <input type="radio" id="mothman" name="monster" value="M" />
    <label for="mothman">Mothman</label>
  </fieldset>
</form>

您可以在 <fieldset> 参考页面 上看到此示例的实时交互式版本。

• <fieldset>
• <legend>

表单中的所有元素都必须有一个 <label> 来标识其用途。这适用于所有类型的 <input> 项目，以及 <button>、<output>、<select>、<textarea>、<progress> 和 <meter> 元素，以及任何具有 switch ARIA 角色 的元素。

表单元素可以放置在 <label> 内，在这种情况下，表单元素和标签之间的关联从结构上就很明显。或者，您可以通过将表单元素的 id 值指定为标签的 for 属性的值，来在 <label> 和表单元素之间创建关联。

除了每个表单元素都有一个 <label> 之外，这些标签还应该是可见的，而不是隐藏的。可见的标签有助于所有用户了解表单元素的用途。不要依赖占位符文本，因为它会在用户开始键入时消失。

框架元素，包括 <iframe> 和旧的、过时的 <frame>，必须有一个标题来描述框架的内容。使用 title 属性标记框架元素。如果没有标题，辅助技术的用户必须导航到框架中才能了解其包含的内容，这可能很困难且令人困惑。

<frame> 元素不再是 HTML 规范的一部分。浏览器将来可能会取消对它的支持。此外，屏幕阅读器很难导航包含 <frame> 元素的页面。为了获得最佳的可访问性和未来的维护，重新设计使用框架的任何页面，以使用 CSS 实现类似的布局。

作为最佳实践，还为包含在框架中的文档提供一个 <title>，其内容与框架的 title 属性相同。（这假设包含的文档在您的控制之下；如果不是，请尝试使框架的 title 属性与文档的标题匹配。）一些屏幕阅读器会将 title 属性的内容替换为包含的文档的 <title> 的内容。在两个地方提供相同的标题是最安全和最容易访问的。

确保您的标题具有非空文本内容，并且不会被隐藏，例如使用 CSS display:none 或 aria-hidden=true。屏幕阅读器用户依赖标题来了解文档的结构和内容。

此外，请确保您仅将 标题元素 用于实际的节标题，而不是作为使文本突出显示的快捷方式。屏幕阅读器用户通常“浏览”页面的标题，就像有视力的人一样；用标题元素标记的非标题文本可能会导致混淆。

确保您的标题具有非空文本内容，并且不会被隐藏，例如使用 CSS display:none 或 aria-hidden=true。屏幕阅读器用户依赖标题来了解文档的结构和内容。不要使用标题元素来标记图像或其他图形内容。

确保 <iframe> 元素具有 title 属性来描述框架的内容。如果没有标题，辅助技术的用户必须导航到框架中才能了解其包含的内容，这可能很困难且令人困惑。

作为最佳实践，还为包含在框架中的文档提供一个 <title>，其内容与框架的 title 属性相同。（这假设包含的文档在您的控制之下；如果不是，请尝试使框架的 title 属性与文档的标题匹配。）一些屏幕阅读器会将 title 属性的内容替换为包含的文档的 <title> 的内容。在两个地方提供相同的标题是最安全和最容易访问的。

为所有内容丰富的（即非装饰性的）图像和类似图像的元素提供描述性文本。这包括 SVG 图像、<img>、<canvas>、<map> 和 <area> 元素，以及 <input> 元素（其中 type=image）和 <object> 元素（其中 type 以 image/ 开头）。执行此操作的典型方法是使用 alt 属性。确保描述传达了图像中显示的内容。

如果某个元素旨在供用户与其交互，则该元素应具有标签。交互式元素包括链接 (<a>)、表单元素、按钮以及任何具有鼠标或键盘事件处理程序的元素。标记元素的方式取决于其类型：对于表单元素，使用 <label>；对于链接、按钮和可点击元素，元素的文本内容通常提供标签。如果不存在其他标记元素的选项，请使用 aria-label 属性。

在 <optgroup> 元素中，使用 label 属性描述该组，以便辅助技术可以为其用户访问该组。

在本例中，<optgroup> 元素上的 label 属性为选项组提供类别名称。

<label for="dino-select">Choose a dinosaur:</label>
<select id="dino-select">
  <optgroup label="Theropods">
    <option>Tyrannosaurus</option>
    <option>Velociraptor</option>
    <option>Deinonychus</option>
  </optgroup>
  <optgroup label="Sauropods">
    <option>Diplodocus</option>
    <option>Saltasaurus</option>
    <option>Apatosaurus</option>
  </optgroup>
</select>

如果您使用 ARIA toolbar 角色在 Web 应用程序中定义了多个工具栏，则必须使用 aria-label 属性标记每个工具栏，以便辅助技术可以描述它。即使每个页面只有一个工具栏，标记工具栏也是一个好习惯。

• W3C ARIA 工具栏示例

1.1.1 非文本内容 (A)

向用户呈现的所有非文本内容都具有文本替代，这些替代文本具有等效的用途，除了上面链接中列出的情况以外。

2.4.4 链接目的（在上下文中）（A）

每个链接的目的可以通过链接文本本身或通过链接文本与其以编程方式确定的链接上下文一起确定，除非链接的目的对一般用户来说是模棱两可的。

2.4.9 链接目的（仅链接）（AAA）

提供了一种机制，可以仅通过链接文本识别每个链接的目的，除非链接的目的对一般用户来说是模棱两可的。