菜单
×
   ❮   
HTML CSS JAVASCRIPT SQL PYTHON JAVA PHP How to W3.CSS C C++ C# BOOTSTRAP REACT MYSQL JQUERY EXCEL XML DJANGO NUMPY PANDAS NODEJS R TYPESCRIPT ANGULAR GIT POSTGRESQL MONGODB ASP AI GO KOTLIN SASS VUE DSA GEN AI SCIPY AWS CYBERSECURITY DATA SCIENCE
     ❯   

可访问性 标签


为什么

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


什么

视觉标签是位于表单控件附近的文本,用于描述哪些信息属于给定的表单字段或一组字段。每个标签必须以编程方式与表单控件或控件组关联。标签不一定是 <label> 元素。


如何操作

你将学习如何使用 <label>aria-label<legend>


The <label>

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

Screenshot from Vodafone order form, showing one select and one email input.

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

<label for="customerType">今天你是为谁购买?</label>
<select name="customerType" id="customerType">

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

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

<label> 元素还有助于那些难以点击很小区域(如单选按钮或复选框)的用户——因为当用户点击 <label> 元素内的文本时,它会切换单选按钮或复选框。

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

必填字段

表单标签通常包含“*”或“required”字样,以指示该字段是必填的。这两种方法都可以。但是,如果你使用星号(*),建议将 requiredaria-required="true" 添加到表单控件中。

Screenshot from Optus, showing a required email field.

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



The aria-label

没有视觉标签的字段仍然需要标签。如果无法使用 <label>,一种选择是使用 aria-label。 

Screenshot from a search field from Vodafone, with no label on top.

此搜索字段有占位符,但没有标签。占位符不是有效的可访问名称。你不能依赖它作为替代。一个简单的解决方案是添加 aria-label="Enter search term"

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


The <legend>

表单控件组,如复选框和单选按钮,通常除了 <label> 之外,还需要更高级别的“标签”。这个高级别的“标签”是用 <fieldset><legend> 创建的。

Screenshot from the Optus registration form, showing date of birth with three form controls.

此注册表单包含三个用于提供出生日期的表单控件。视觉上,让日、月、年都与“你的出生日期”相关是合理的。对于屏幕阅读器用户来说,这种关联并不明显。我们不能在这里使用 <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



×

联系销售

如果您想将 W3Schools 服务用于教育机构、团队或企业,请发送电子邮件给我们
sales@w3schools.com

报告错误

如果您想报告错误,或想提出建议,请发送电子邮件给我们
help@w3schools.com

W3Schools 经过优化,旨在方便学习和培训。示例可能经过简化,以提高阅读和学习体验。教程、参考资料和示例会不断审查,以避免错误,但我们无法保证所有内容的完全正确性。使用 W3Schools 即表示您已阅读并接受我们的使用条款Cookie 和隐私政策

版权所有 1999-2024 Refsnes Data。保留所有权利。W3Schools 由 W3.CSS 提供支持