0Pricing
Frontend Academy · 课时

ARIA 角色与属性

应用地标角色、实时区域和 aria-* 属性，在原生 HTML 不足时增强组件。

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

什么是 ARIA

ARIA（Accessible Rich Internet Applications，无障碍富互联网应用）是一组 HTML 属性，用于向辅助技术描述元素的角色、状态和属性。对于无法用原生 HTML 表达的自定义组件，它提供了连接桥梁。

ARIA 的第一条规则：不要使用 ARIA

如果原生元素可以完成您的需求，就应使用它。<button> 优于 <div role="button">。错误使用 ARIA 比完全不使用 ARIA 更糟糕——它会让用户听起来像是得到了无障碍支持，实际上却让用户陷入困境。

ARIA 属性的类别

分为三类：角色（表示某个元素是什么）、属性（相对静态，例如 aria-label、aria-describedby）、状态（动态变化，例如 aria-expanded、aria-pressed、aria-checked）。

地标角色

用于标识页面的主要区域。大多数地标角色都有对应的 HTML5 元素，应优先使用这些元素。

<!-- HTML5 (preferred): -->
<nav>...</nav>
<main>...</main>
<aside>...</aside>

<!-- ARIA equivalents (use only when HTML5 won't work): -->
<div role="navigation">...</div>
<div role="main">...</div>
<div role="complementary">...</div>

aria-label 和 aria-labelledby

aria-label：使用字符串提供无障碍名称。aria-labelledby：引用另一个元素的文本作为名称。当页面上没有可见文本或可见文本不足时使用。

<!-- Icon-only button needs a label: -->
<button aria-label="Close dialog">
  <svg>...</svg>
</button>

<!-- Section labelled by its heading: -->
<section aria-labelledby="settings-title">
  <h2 id="settings-title">Settings</h2>
  ...
</section>

使用 aria-describedby 提供提示

aria-describedby 会将元素与较长的描述关联起来。它适用于表单提示、错误消息和工具提示。

<label for="password">Password</label>
<input id="password" type="password" aria-describedby="pw-hint">
<p id="pw-hint">Must be at least 12 characters with a number and symbol.</p>

使用 aria-expanded 表示展开状态

用于切换面板的按钮应通过 aria-expanded 暴露 true/false 状态。

<button aria-expanded="false" aria-controls="faq-1" onclick="toggle()">
  How do I cancel?
</button>
<div id="faq-1" hidden>
  Visit Settings &gt; Billing to cancel.
</div>

使用 aria-pressed 表示切换按钮状态

具有开关状态的按钮（静音、粗体）应使用 aria-pressed。

<button aria-pressed="true" onclick="toggleBold()">
  Bold
</button>

实时区域：aria-live

动态更新的内容（提示消息、搜索结果、错误摘要）应放在实时区域中，以便屏幕阅读器播报变化。polite 会等待当前播报暂停；assertive 会立即打断当前播报。

<!-- Toast container -->
<div aria-live="polite" aria-atomic="true" id="toast-region"></div>

<!-- Critical alert -->
<div role="alert">Session expired. Please log in again.</div>

role="alert" 简写

role="alert" 是带有 aria-atomic 的 assertive 实时区域的简写形式。请谨慎使用——每条警报都会打断用户。

使用 aria-hidden 隐藏装饰性内容

aria-hidden="true" 会将元素从无障碍树中移除。将它用于文字标签旁的装饰性图标——否则屏幕阅读器会重复播报这些图标。

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

使用屏幕阅读器进行测试

要确认 ARIA 是否有效，唯一的方法就是进行测试。VoiceOver（macOS/iOS，免费）、NVDA（Windows，免费）、TalkBack（Android，免费）。使用 VoiceOver 测试 10 分钟，比任何审计工具都能发现更多问题。

快速检查

对于没有可见文字标签的纯图标按钮，应设置哪个 ARIA 属性？

回顾：ARIA

ARIA 会向辅助技术描述角色、属性和状态。使用 ARIA 之前，应优先选择原生 HTML。aria-label/aria-labelledby 用于提供无障碍名称。aria-describedby 用于提供提示。aria-expanded/aria-pressed 用于表示切换状态。aria-live 用于播报动态变化。aria-hidden 用于装饰性内容。始终使用真实的屏幕阅读器进行测试。

常见问题解答

「ARIA 角色与属性」课时是免费的吗？

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

「ARIA 角色与属性」这节课中我会学到什么？

应用地标角色、实时区域和 aria-* 属性，在原生 HTML 不足时增强组件。 你通过在浏览器中直接运行的动手代码来练习 Frontend Academy，全天候 AI 导师会在你学习这节课的过程中回答你的问题。

学习 Frontend Academy 需要有经验吗？

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

「ARIA 角色与属性」课时需要多长时间？

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

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

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

此课程中的所有课时

  1. WCAG 等级：A、AA、AAA
  2. 语义化 HTML：基础
  3. ARIA 角色与属性
  4. 键盘导航与焦点管理
← 返回 Frontend Academy