可访问性 标签
为什么
标签对于盲人用户、低视力用户、行动不便用户以及有记忆障碍的用户都至关重要。缺少标签将导致许多用户无法访问表单。
什么
视觉标签是位于表单控件附近的文本,用于描述哪些信息属于给定的表单字段或一组字段。每个标签必须以编程方式与表单控件或控件组关联。标签不一定是 <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>
<fieldset>
<legend>你的出生日期</legend>
<label for="dobDay">日</label>
<select id="dobDay">…</select>
<label for="dobMonth">月</label>
<select id="dobMonth">…</select>
<label for="dobYear">年</label>
<input id="dobYear" type="text" placeholder="YYYY">
</fieldset>
想制作高效的表单?了解 autocomplete。