可访问性 标签

为什么

标签对于盲人用户、低视力用户、行动不便用户以及有记忆障碍的用户都至关重要。缺少标签将导致许多用户无法访问表单。

什么

视觉标签是位于表单控件附近的文本，用于描述哪些信息属于给定的表单字段或一组字段。每个标签必须以编程方式与表单控件或控件组关联。标签不一定是 <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">你的电子邮件地址 *</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>

想制作高效的表单？了解 autocomplete。