0Pricing
HTML Academy · 课时

label 元素与无障碍

将标签与输入框关联起来，为屏幕阅读器提供支持。

label 元素与无障碍 是 CoddyKit 上的免费 HTML Academy 课时。 这是第 3 节课，共 4 节。 你可以在下方免费阅读本课时的完整内容 — 然后在浏览器中使用内置代码编辑器和全天候 AI 导师进行实践。 这是 HTML Academy 学习路径的一部分，你的进度在网页和 CoddyKit 应用中同步。 HTML Academy 课程共包含 4 节课。

标签为何重要

<label> 元素会将文本说明与表单控件关联起来：

  • 输入框获得焦点时，屏幕阅读器会播报标签
  • 点击标签会激活对应的输入框
  • 没有标签时，屏幕阅读器用户不知道字段的用途

使用 for 的显式标签

for 属性通过 id 将标签与输入框关联起来：

<label for="email">Email address</label>
<input type="email" id="email" name="email">

<!-- for="email" matches id="email" -->
<!-- Clicking "Email address" moves focus to the input -->
<!-- Required for proper accessibility -->

隐式标签（包裹方式）

将输入框包裹在标签中可以建立隐式关联：

<!-- No for/id needed — input is inside label -->
<label>
  Email address
  <input type="email" name="email">
</label>

<!-- Works fine but explicit association is more robust
     (especially when label and input are far apart in the DOM) -->

标签与输入框分离

当标签和输入框无法相邻时，请使用 aria-labelledby：

<h2 id="section-title">Billing Details</h2>
<input type="text" name="name" aria-labelledby="section-title">
<!-- The heading serves as the accessible label for the input -->

使用 aria-label 作为替代方案

无法提供可见标签时，请使用 aria-label：

<!-- Search form with icon button -->
<form>
  <input type="search" name="q" aria-label="Search the site">
  <button type="submit" aria-label="Submit search">
    <svg><!-- magnifier icon --></svg>
  </button>
</form>

每个输入框使用一个标签

每个输入框都应恰好有一个标签。多个输入框应分别使用各自的标签：

<!-- BAD: one label for multiple inputs -->
<label>First and last name
  <input type="text" name="first">
  <input type="text" name="last">
</label>

<!-- GOOD: separate labels -->
<label for="first">First name</label>
<input type="text" id="first" name="first">

<label for="last">Last name</label>
<input type="text" id="last" name="last">

必填字段标示

请以无障碍的方式标示必填字段：

<!-- Visual + accessible required indicator -->
<label for="email">
  Email address
  <span aria-hidden="true">*</span>         <!-- visual asterisk -->
  <span class="sr-only">(required)</span>    <!-- screen reader text -->
</label>
<input type="email" id="email" name="email" required>

使用 Fieldset 和 Legend 对字段分组

使用 <fieldset> 和 <legend> 将相关输入框分组：

<fieldset>
  <legend>Shipping address</legend>

  <label for="addr-street">Street</label>
  <input type="text" id="addr-street" name="street" autocomplete="address-line1">

  <label for="addr-city">City</label>
  <input type="text" id="addr-city" name="city" autocomplete="address-level2">
</fieldset>

使用 Fieldset 对单选按钮分组

单选按钮组始终需要 fieldset + legend：

<fieldset>
  <legend>Preferred contact method</legend>

  <label>
    <input type="radio" name="contact" value="email"> Email
  </label>
  <label>
    <input type="radio" name="contact" value="phone"> Phone
  </label>
  <label>
    <input type="radio" name="contact" value="text"> Text message
  </label>
</fieldset>

Placeholder 不是标签

用户输入时 placeholder 会消失，因此不能代替标签：

<!-- BAD: placeholder used as a label -->
<input type="email" placeholder="Email address">
<!-- Screen readers may announce the placeholder, but many skip it -->
<!-- User cannot see the field purpose while typing -->

<!-- GOOD: -->
<label for="email">Email address</label>
<input type="email" id="email" placeholder="you@example.com">

视觉隐藏的标签

如果设计中没有可见标签，请在视觉上隐藏它，同时保留给屏幕阅读器使用：

<label for="search" class="sr-only">Search</label>
<input type="search" id="search" placeholder="Search...">

/* sr-only utility class: */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0,0,0,0);
  white-space: nowrap;
  border: 0;
}

快速检查

如何使用显式关联将标签与输入框关联起来？

回顾：label 无障碍性

标签要点：

  • 每个输入框都必须有标签——始终如此
  • <label for="id"> 建立显式关联
  • 将输入框包裹在 label 中 = 建立隐式关联
  • aria-labelledby 通过 id 链接到任意元素
  • aria-label 用于没有可见文本的纯图标按钮
  • 使用 <fieldset> + <legend> 对控件分组

常见问题解答

「label 元素与无障碍」课时是免费的吗？

是的 — 「label 元素与无障碍」的完整文本可在网页上免费阅读。要进行交互式练习（内置代码编辑器和全天候 AI 导师）并解锁 HTML Academy 课程的其余内容，请升级到 CoddyKit PRO。 HTML Academy 课程共包含 4 节课。

「label 元素与无障碍」这节课中我会学到什么？

将标签与输入框关联起来，为屏幕阅读器提供支持。 你通过在浏览器中直接运行的动手代码来练习 HTML Academy，全天候 AI 导师会在你学习这节课的过程中回答你的问题。

学习 HTML Academy 需要有经验吗？

无需任何先前经验。CoddyKit 上的 HTML Academy 课程适合初学者到高级学习者，你可以从这里开始或从头开始，按照自己的节奏学习。 这是第 3 节课，共 4 节。

「label 元素与无障碍」课时需要多长时间？

大多数 CoddyKit 课程大约需要 5–10 分钟。每节课都很精短且互动，所以你能稳步进步，并在网页和应用中从离开的地方继续。

我能在这节 HTML Academy 课中编写并运行代码吗？

能。每节 HTML Academy 课都包含内置代码编辑器，你可以在浏览器中直接编写并运行真实代码，并获得即时 AI 反馈 — 无需本地设置。

此课程中的所有课时

  1. form 元素：action、method 与 enctype
  2. 输入类型：text、password、email、number 与 tel
  3. label 元素与无障碍
  4. button 元素：submit、reset 与 button
← 返回 HTML Academy