0Pricing
HTML Academy · 课时

aria-label、aria-labelledby 和 aria-describedby

为元素提供无障碍名称和描述

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

为什么无障碍名称很重要

每个交互元素都需要一个无障碍名称——辅助技术用来识别该元素的文本字符串。没有无障碍名称，屏幕阅读器就无法告诉用户按钮或输入框的作用。

aria-label

aria-label 可以直接在元素上提供文本形式的无障碍名称：

<button aria-label="Close dialog">×</button>
<!-- The × character has no accessible meaning
     aria-label provides the name: 'Close dialog, button' -->

<input type="search" aria-label="Search products">
<!-- No visible label — aria-label provides the accessible name -->

aria-labelledby

aria-labelledby 将另一个元素作为无障碍名称的来源：

<h2 id="section-title">Billing Information</h2>
<form aria-labelledby="section-title">
  <!-- Form's accessible name is 'Billing Information' -->
</form>

<!-- Multiple id references: -->
<button aria-labelledby="action-verb object-name">
  Delete
</button>
<span id="object-name" hidden>User Account</span>
<!-- Screen reader: 'Delete User Account, button' -->

aria-describedby

aria-describedby 提供扩展描述（作为名称的补充）：

<label for="pwd">Password</label>
<input
  type="password"
  id="pwd"
  aria-describedby="pwd-hint"
>
<p id="pwd-hint">Must be 8+ characters with one uppercase letter and one number.</p>
<!-- Screen reader: 'Password [input]' then reads the description on focus -->

标签与描述

无障碍名称与描述的区别：

  • 无障碍名称——用于识别元素（aria-label、aria-labelledby 或 label 元素）
  • 描述——使用额外上下文补充名称（aria-describedby）
  • 屏幕阅读器会依次播报：名称、角色、状态，然后是描述

地标上的 aria-label

使用 aria-label 区分多个相同类型的地标：

<nav aria-label="Primary">...</nav>
<nav aria-label="Breadcrumb">...</nav>

<!-- Screen reader landmark list:
     'Primary, navigation'
     'Breadcrumb, navigation' -->

<!-- When only one nav, aria-label is optional but still helpful -->

区段上的 aria-labelledby

将区段与其标题关联起来，为屏幕阅读器提供上下文：

<section aria-labelledby="about-heading">
  <h2 id="about-heading">About Our Team</h2>
  <p>We are a team of passionate developers...</p>
</section>
<!-- Screen reader: 'About Our Team, region' when entering section -->

aria-label 与可见文本

aria-label 会覆盖可见文本——请谨慎使用：

<button aria-label="Delete account permanently">
  Delete
</button>
<!-- Screen reader hears: 'Delete account permanently'
     Sighted user reads: 'Delete' -->

<!-- Best practice: visible text and aria-label should agree
     If possible, include extra context in visible text too:
     <button>Delete account permanently</button> -->

<!-- aria-label should start with the visible text when possible
     for speech recognition users who use voice commands -->

使用 aria-describedby 提供错误信息

将错误消息与相应的输入框关联起来：

<label for="email">Email</label>
<input
  type="email"
  id="email"
  aria-describedby="email-error"
  aria-invalid="true"
>
<span id="email-error" role="alert">
  Please enter a valid email address.
</span>
<!-- When input receives focus, screen reader reads:
     'Email [field], invalid. Please enter a valid email address.' -->

多个 aria-describedby 引用

aria-describedby 可以引用多个元素：

<input
  type="password"
  aria-label="New password"
  aria-describedby="pwd-hint pwd-strength"
>
<p id="pwd-hint">Must be 8+ characters.</p>
<meter id="pwd-strength" aria-label="Password strength" value="2" max="4">Medium</meter>
<!-- Both elements are announced as the description -->

可见标签与隐藏标签

无法提供可见标签时，请使用 sr-only 类：

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

/* Visually hidden but in accessibility tree: */
.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;
}

快速检查

aria-label 和 aria-labelledby 有什么区别？

回顾：ARIA 标签

无障碍命名的要点：

  • aria-label——为没有可见标签的元素提供内联文本名称
  • aria-labelledby——通过 id 引用现有的可见文本
  • aria-describedby——补充描述（在名称之后读取）
  • 优先使用可见标签和原生 HTML label 元素
  • 在地标上使用 aria-label，可以区分多个相同类型的区域

常见问题解答

「aria-label、aria-labelledby 和 aria-describedby」课时是免费的吗？

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

「aria-label、aria-labelledby 和 aria-describedby」这节课中我会学到什么？

为元素提供无障碍名称和描述 你通过在浏览器中直接运行的动手代码来练习 HTML Academy，全天候 AI 导师会在你学习这节课的过程中回答你的问题。

学习 HTML Academy 需要有经验吗？

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

「aria-label、aria-labelledby 和 aria-describedby」课时需要多长时间？

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

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

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

此课程中的所有课时

  1. 何时使用 ARIA，何时使用原生 HTML
  2. role、button、alert、dialog 和地标
  3. aria-label、aria-labelledby 和 aria-describedby
  4. aria-hidden 和 aria-live
← 返回 HTML Academy