Frontend Academy · 课时

ARIA 与可访问性：label、role、aria-*

将标签与控件关联，在需要时应用 ARIA 角色，并使用 aria-label 和 aria-describedby 为屏幕阅读器提供支持。

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

为什么需要 ARIA？

ARIA（Accessible Rich Internet Applications，富互联网应用程序无障碍规范）是一组 HTML 属性，用于向屏幕阅读器等辅助技术传达用户界面组件的用途、状态和属性，尤其适用于没有原生 HTML 等价元素的自定义控件。

ARIA 的第一条规则

如果原生 HTML 元素或属性可以完成任务，就不要使用 ARIA。<button> 总是优于 <div role="button">。原生 HTML 自带无障碍支持。

地标角色

ARIA 地标角色允许屏幕阅读器用户跳转到页面的各个部分。大多数地标都由语义化 HTML 隐式表示：<main> → role=main，<nav> → role=navigation。只有在没有使用语义化元素时，才添加显式角色。

<div role="main">...</div>    <!-- prefer <main> -->
<div role="navigation">...</div>  <!-- prefer <nav> -->
<div role="banner">...</div>      <!-- prefer <header> at page level -->

aria-label

aria-label 会为元素提供不可见的无障碍名称。当没有可供引用的可见文本标签时，请使用它。它常用于图标按钮。

<button aria-label="Close dialog">×</button>
<a href="/rss.xml" aria-label="Subscribe to RSS feed">
  <img src="rss-icon.svg" alt="">
</a>

aria-labelledby

aria-labelledby 使用 ID 引用，将另一个元素的文本作为标签。当已经存在可见标签时，它比 aria-label 更合适。

<h2 id="billing-title">Billing Information</h2>
<form aria-labelledby="billing-title">
  ...
</form>

aria-describedby

aria-describedby 引用额外的描述文本，例如补充标签的错误消息或提示。屏幕阅读器会先读出标签，再读出描述。

<input id="pass" type="password" aria-describedby="pass-hint">
<p id="pass-hint">Must be at least 12 characters with a symbol.</p>

aria-expanded 和 aria-haspopup

动态控件需要状态属性。aria-expanded 表示披露控件（手风琴、下拉菜单）是展开还是收起。状态发生变化时，请在 JavaScript 中更新它。

<button aria-expanded="false" aria-controls="menu" id="menu-btn">Menu</button>
<ul id="menu" hidden>...</ul>

<!-- On toggle: -->
btn.setAttribute('aria-expanded', 'true');
menu.removeAttribute('hidden');

aria-hidden

aria-hidden="true" 会将元素及其所有子元素从无障碍树中移除。对于已经由可见文本标注的装饰性元素（例如 SVG 图标），请使用它。

<button>
  <svg aria-hidden="true" focusable="false">...</svg>
  Save Draft
</button>

实时区域：aria-live

aria-live 会告诉屏幕阅读器播报该区域中的变化。polite 会等待用户完成当前操作。assertive 会立即打断当前播报（请谨慎使用）。

<div aria-live="polite" aria-atomic="true">
  <!-- Status messages announced when updated -->
  Form saved successfully.
</div>

role="alert"

role="alert" 隐式设置为 aria-live=assertive。请将错误消息或重要通知插入具有此角色的元素中，屏幕阅读器会立即播报它们。

const errorEl = document.querySelector('[role="alert"]');
errorEl.textContent = 'Email is required.'; // announced immediately

无障碍表单错误

字段出现错误时：使用 aria-invalid="true"，通过 aria-describedby 关联错误消息，并更新 role="alert" 的内容。这种三部分方法可以确保屏幕阅读器传达所有必要信息。

<input id="email" type="email" aria-invalid="true" aria-describedby="email-error">
<p id="email-error" role="alert">Please enter a valid email address.</p>

快速检查

当元素没有可见文本标签时，哪个 ARIA 属性会为它提供无障碍名称？

回顾：ARIA 要点

优先使用原生 HTML，而不是 ARIA。图标按钮使用 aria-label。使用 aria-labelledby 引用可见标签。使用 aria-describedby 提供提示和错误信息。使用 aria-expanded 表示披露控件的状态。使用 aria-hidden 标记装饰性内容。使用 aria-live 播报动态状态更新。使用 aria-invalid + role=alert 处理表单错误。

常见问题解答

「ARIA 与可访问性：label、role、aria-*」课时是免费的吗？

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

「ARIA 与可访问性：label、role、aria-*」这节课中我会学到什么？

将标签与控件关联，在需要时应用 ARIA 角色，并使用 aria-label 和 aria-describedby 为屏幕阅读器提供支持。你通过在浏览器中直接运行的动手代码来练习 Frontend Academy，全天候 AI 导师会在你学习这节课的过程中回答你的问题。

学习 Frontend Academy 需要有经验吗？

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

「ARIA 与可访问性：label、role、aria-*」课时需要多长时间？

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

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

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

此课程中的所有课时

← 返回 Frontend Academy