表单 ＜input＞ 元素必须有标签

以编程方式将标签与所有表单控件相关联。对于大多数情况，推荐的方法是使用元素和使用和 属性label的显式关联。此处的示例从最常见的可接受解决方案到最不常见的可接受解决方案排序。 forid

<label for="firstname">First name:</label> <input type="text" id="firstname">

标签也可以通过将 元素包裹在输入周围 来隐含：<label>

<label>First name: <input type="text"></label>

如果输入已经以其他方式在视觉上进行了标记，例如通过搜索提交按钮上的放大镜图标，则可以使用它 aria-label来创建一个不可见的文本标签以供屏幕阅读器阅读。

<input type="text" aria-label="Search">

另一种方法（有时在添加 <label>标签会破坏功能或样式时使用，或者当多个标签应用于同一输入时使用）是 aria-labelledby改用：

<div id="firstname">First name:</div> <input type="text" aria-labelledby="firstname">

<!--visual labels may be elsewhere in the content, such as in table headers-->

<div id="temperature">Temperature:</div>

<div id="high">High:</div>

<div id="low">Low:</div>

<!-- the inputs -->

<input type="text" aria-labelledby="temperature low">

<input type="text" aria-labelledby="temperature high">

最后一个placeholder属性可以用来给文本输入一个可访问的名称。这不是推荐的解决方案，因为一旦用户将文本输入到输入中，视觉标签（占位符文本）将被删除，导致他们不知道输入的用途。

<input type="text" placeholder="Search">

还要确保id每个页面上的所有元素都是唯一的，并且标签文本对于使用屏幕阅读器收听它们的人来说是有意义的。

应该有标签的表单元素

• 文本输入字段，例如<input type="text">, <input type="password">和<textarea>
• 单选按钮，<input type="radio">
• 复选框，<input type="checkbox">

此要求的唯一例外是：

• 按钮 - 按钮是自标记的
• 隐藏输入 - 类型属性值为隐藏的输入（例如， type="hidden"）。这些输入是隐藏的，用户输入不可用。因此，它们不需要标签。

添加标签时，请务必避免以下情况：

First name: <input type="text" name="fname">

此标记呈现以生成一个文本框，旁边带有“名字：”字样。有视力的用户可以毫无问题地将文本与输入字段相关联。然而，对于视力不佳的用户来说，这种联系并不那么明显，尤其是随着表格变得越来越长和越来越复杂。这种歧义更容易出错，尤其是当所需信息比名字更复杂时。

有关如何实施这些不同标记方法的详细说明，请参阅作为此规则的一部分运行的自动检查。

最后，确保每个input元素只有一个标签。请注意，如果您的任何input元素都有帮助文本，请确保该文本与label元素文本不同。

为什么重要

需要有效的表单标签才能使表单易于访问。复选框、单选按钮、输入字段等表单元素的用途对于有视力的用户来说通常是显而易见的，即使表单元素没有以编程方式标记。屏幕阅读器用户需要有用的表单标签来识别表单域。向所有表单元素添加标签可消除歧义并有助于提供更易于访问的产品。

当表单元素的标签不存在时，屏幕阅读器用户不知道输入数据的期望。如果没有已建立的标签关系（或用作标签的冗余文本），屏幕阅读器无法以编程方式确定有关输入对象的信息。

当屏幕阅读器阅读时，标签的缺失会阻止字段获得焦点，并且电机控制受损的用户无法获得更大的控件可点击区域的好处，因为单击标签会激活控件。

规则说明

每个表单元素都必须有一个以编程方式关联的标签元素。

算法（简单来说）

确保每个表单元素都有一个以编程方式关联的标签。