无障碍 标签

为什么

标签对于盲人用户、低视力用户、行动不便的用户和记忆力减退的用户至关重要。缺少标签会使许多用户无法使用表单。

什么

视觉标签是表单控件附近描述特定表单字段或字段组中应输入哪些信息的文本。每个标签都必须以编程方式与表单控件或控件组关联。标签不一定是 <label> 元素。

怎样

您将学习如何使用 <label>、aria-label 和 <legend>。

The <label>

<label> 标签定义了多个元素的标签，例如 <input>、<select> 和 <textarea>。

在这个来自 Vodafone 的示例中，我们有一个 <select> 和一个 <input type="email">，每个都有一个描述性的 <label>

<label for="customerType">您今天为谁购买？</label>
<select name="customerType" id="customerType">

注意上面示例中 <label> 元素的使用。

<label> 元素对于屏幕阅读器用户很有用，因为当用户将焦点放在输入元素上时，屏幕阅读器会大声朗读标签。

<label> 元素还可以帮助那些难以点击非常小的区域（如单选按钮或复选框）的用户 - 因为当用户点击 <label> 元素中的文本时，它会切换单选按钮或复选框。

<label> 标签的 for 属性应该等于 <input> 元素的 id 属性，以将它们绑定在一起。

必填字段

表单标签通常包含一个 "*" 或 "required" 一词，以指示该字段是必填的。这两种方法都很好。但是，建议在使用星号 (*) 时，将 required 和 aria-required="true" 添加到表单控件中

<label for="email">您的电子邮件地址 <span class="mandatory">*</span></label>
<input id="email" name="email" required aria-required="true" placeholder="Email" required="">  

The aria-label

没有视觉标签的字段仍然需要标签。如果您不能使用 <label>，一个选项是使用 aria-label。

此搜索字段有一个占位符，但没有标签。占位符不是有效的可访问名称。您不能将其用作替代品。这里一个简单的解决方案是添加 aria-label="Enter search term"

<input placeholder="Enter search term" aria-label="Enter search term">

The <legend>

表单控件组（如复选框和单选按钮）通常需要除了 <label> 之外的更高级别的“标签”。此高级别“标签”由 <fieldset> 和 <legend> 创建。

此注册表单包含三个用于提供出生日期的表单控件。从视觉上看，日期、月份和年份都与“您的出生日期”相关是有意义的。这种关系对于屏幕阅读器用户来说并不明显。我们不能在这里使用 <label>。标签是日期、月份和年份。解决方案是添加 <fieldset> 和 <legend>

想要创建高效的表单？了解有关 自动完成 的信息。