文本标签和名称
在许多情况下，控件、对话框或其他网站功能应提供描述性名称或标签，以使用户能够使用辅助技术了解其用途以及如何正确操作。此类别中存在多种不同类型的问题，这些问题出现在不同的上下文中，并且每个问题都有其自己的解决方案。不同的问题和解决方案将在以下部分中讨论。
使用 alt 属性标记具有 href 属性的 area 元素
在图片地图中，给每个 <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> 元素参考页以获取实时交互式示例。
另见
对话框应加标签
对于其内容充当对话框的任何容器（例如，一个要求用户做出选择或响应所执行操作的模态对话框），为其提供一个描述性标签或名称，以便辅助技术用户可以轻松发现其目的。
对话框通常由 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>
另见
文档必须有标题
在每个 HTML 文档中包含一个描述页面目的的 <title> 非常重要。辅助技术用户的一种常见导航技术是通过阅读页面标题来推断页面包含的内容。如果标题不可用，他们必须浏览页面以确定其内容，这可能是一个耗时且可能令人困惑的过程。
示例
关于 <title> 元素的参考文章的标题如下
<title>
<title>: 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 属性。这包括 <embed> 和 <object> 元素。这些元素通常用于图形内容，就像 <img> 元素一样。描述性标题有助于辅助技术用户理解元素显示的内容。
带可选标题的图应加标签
为了获得最佳可访问性，请在 <figure> 元素中包含一个 <figcaption>，即使这样做在技术上是可选的。标题是图中图像的任何替代文本的补充。标题描述了图中元素在文档中的目的，这可能与替代文本提供的视觉项目的描述不同。
示例
以下示例显示了带标题的图的代码。<img> 的 alt 属性描述了图像的外观；<figcaption> 从功能角度描述它（在本例中是图像中花朵的拉丁名称）。
<figure>
<img
src="milkweed.jpg"
alt="Black and white close-up photo of milkweed flowers" />
<figcaption>Asclepias verticillata</figcaption>
</figure>
Fieldset 元素必须加标签
Fieldset 元素必须有文本描述，类似于其他表单元素。使用 <legend> 元素描述 fieldset 的目的。
使用 legend 标记 fieldset
当使用 <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> 参考页上查看此示例的实时交互版本。
另见
表单元素必须加标签
表单中的所有元素都必须有一个标识其目的的 <label>。这适用于所有类型的 <input> 项，以及 <button>、<output>、<select>、<textarea>、<progress> 和 <meter> 元素，以及任何具有 switch ARIA 角色的元素。
表单元素可以放置在 <label> 内部，在这种情况下，表单元素和标签之间的关联从结构上是显而易见的。或者，您可以通过将表单元素的 id 值指定为标签的 for 属性的值来在 <label> 和表单元素之间创建关联。
示例
<label
>I agree to the terms and conditions.
<input type="checkbox" id="terms" name="terms" />
</label>
<input type="checkbox" id="email-opt-in" name="opt-in" />
<label for="email-opt-in">Yes, please send me news about this product.</label>
表单元素应具有可见的文本标签
除了每个表单元素都应该有一个 <label> 之外，这些标签还应该是可见的，而不是隐藏的。可见的标签有助于所有用户理解表单元素的用途。不要依赖占位符文本，因为它在用户开始输入时就会消失。
Frame 元素必须加标签
帧元素，无论是 <iframe> 还是较旧、已废弃的 <frame>，都必须有一个标题来描述帧的内容。使用 title 属性来标记帧元素。如果没有标题，辅助技术用户必须导航到帧中才能了解其包含的内容，这可能很困难且令人困惑。
<frame> 元素不再是 HTML 规范的一部分。浏览器将来可能会停止对其的支持。此外，屏幕阅读器难以导航包含 <frame> 元素的页面。为了获得最佳可访问性和未来的维护，请重新设计使用框架的页面，以使用 CSS 实现类似的布局。
作为最佳实践，还应为帧中包含的文档提供一个 <title>，其内容与帧的 title 属性相同。（这假设包含的文档在您的控制之下；如果不是，请尝试将帧的 title 属性与文档的标题匹配。）一些屏幕阅读器将 title 属性的内容替换为包含的文档的 <title> 的内容。在两个位置提供相同的标题是最安全且最易于访问的。
示例
<iframe
title="MDN Web docs"
width="300"
height="200"
src="https://mdn.org.cn">
</iframe>
标题必须加标签
确保您的标题具有非空文本内容，并且不被隐藏，例如使用 CSS display:none 或 aria-hidden=true。屏幕阅读器用户依靠标题来理解文档的结构和内容。
此外，请确保您仅将标题元素用于实际的章节标题，而不是作为使文本突出的快捷方式。屏幕阅读器用户通常会“浏览”页面的标题，就像有视力用户一样；用标题元素标记的非标题文本可能会导致混淆。
标题应具有可见文本内容
确保您的标题具有非空文本内容，并且不被隐藏，例如使用 CSS display:none 或 aria-hidden=true。屏幕阅读器用户依靠标题来理解文档的结构和内容。不要使用标题元素来标记图像或其他图形内容。
使用 title 属性描述 <iframe> 内容
确保 <iframe> 元素具有 title 属性来描述帧的内容。如果没有标题，辅助技术用户必须导航到帧中才能了解其包含的内容，这可能很困难且令人困惑。
作为最佳实践，还应为帧中包含的文档提供一个 <title>，其内容与帧的 title 属性相同。（这假设包含的文档在您的控制之下；如果不是，请尝试将帧的 title 属性与文档的标题匹配。）一些屏幕阅读器将 title 属性的内容替换为包含的文档的 <title> 的内容。在两个位置提供相同的标题是最安全且最易于访问的。
带图片的内容必须加标签
为所有内容性（即非装饰性）图像和类图像元素提供描述性文本。这包括 SVG 图像、<img>、<canvas>、<map> 和 <area> 元素，以及 type=image 的 <input> 元素和 type 以 image/ 开头的 <object> 元素。通常使用 alt 属性来完成此操作。确保描述传达了图像中显示的内容。
示例
<img
src="milkweed.jgp"
alt="Black and white close-up photo of milkweed flowers" />
交互式元素必须加标签
如果某个元素旨在供用户与之交互，则它应该有一个标签。交互式元素包括链接 (<a>)、表单元素、按钮以及任何具有鼠标或键盘事件处理程序的元素。标记元素的方式取决于其类型：对于表单元素，使用 <label>；对于链接、按钮和可点击元素，元素的文本内容通常提供标签。如果不存在其他标记元素选项，请使用 aria-label 属性。
在 optgroup 元素上使用 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>
当有多个工具栏时，工具栏必须加标签
如果您在 Web 应用程序中使用 ARIA toolbar 角色定义了多个工具栏，则必须使用 aria-label 属性标记每个工具栏，以便辅助技术可以对其进行描述。即使每页只有一个工具栏，也最好标记工具栏。
另见
相关的 WCAG 成功准则
- 1.1.1 非文本内容 (A)
-
呈现给用户的所有非文本内容都具有等效用途的文本替代品，除了上述链接中列出的情况。
- 2.4.4 链接目的（在上下文中）(A)
-
每个链接的目的都可以单独从链接文本或从链接文本及其程序化确定的链接上下文确定，除非链接的目的对一般用户来说是模糊的。
- 2.4.9 链接目的（仅链接）(AAA)
-
提供了一种机制，允许仅从链接文本识别每个链接的目的，除非链接的目的对一般用户来说是模糊的。