0Pricing
HTML Academy · 课时

何时使用 ARIA，何时使用原生 HTML

遵循 ARIA 第一原则：优先使用原生语义

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

什么是 ARIA？

ARIA（可访问的富互联网应用）是一组可以添加到 HTML 中的属性，用于改善辅助技术的无障碍性。当原生 HTML 语义不足时，它可以填补其中的空缺。

ARIA 的第一条规则

最重要的 ARIA 指南是：原生 HTML 能实现时，不要使用 ARIA：

<!-- BAD: ARIA on a div -->
<div role="button" tabindex="0" onclick="submit()">Submit</div>

<!-- GOOD: use a real button -->
<button type="submit">Submit</button>

<!-- Native HTML elements:
  - Are keyboard accessible by default
  - Have correct semantics built in
  - Work in more contexts
  - Require less code
-->

原生 HTML 不够用时

以下情况需要使用 ARIA：

  • 自定义用户界面组件没有对应的 HTML 元素（选项卡、组合框）
  • 需要覆盖原生元素的角色
  • 需要播报动态内容更新
  • 需要明确表达元素之间的复杂关系

ARIA 不会添加行为

一个重要的误解是：ARIA 添加的是无障碍元数据，而不是功能：

<!-- Adding role="button" to a div does NOT:
  - Make it keyboard-focusable (add tabindex="0")
  - Make Enter/Space activate it (add event listeners)
  - Make it styled like a button (add CSS)
-->

<!-- You must implement ALL behavior yourself -->
<!-- Native <button> handles all this for free -->

ARIA 分类体系

ARIA 属性分为三类：

  • 角色——定义元素是什么：role="button"、role="dialog"
  • 属性——描述静态特征：aria-label、aria-required
  • 状态——描述动态条件：aria-expanded、aria-checked

语义化 HTML 与 ARIA 等效项

大多数 HTML 元素已经具有隐式的 ARIA 角色：

<nav>   ≡  role="navigation"
<main>  ≡  role="main"
<aside> ≡  role="complementary"
<header> ≡ role="banner" (page-level)
<footer> ≡ role="contentinfo" (page-level)
<button> ≡ role="button"
<a href> ≡ role="link"
<h1-h6> ≡ role="heading"
<ul>    ≡  role="list"

ARIA 的常见有效用法

ARIA 的合理使用示例：

<!-- 1. Custom dropdown (no native equivalent): -->
<div role="combobox" aria-expanded="false">...</div>

<!-- 2. Loading state announcement: -->
<div role="status" aria-live="polite">Loading results...</div>

<!-- 3. Override landmark label: -->
<nav aria-label="Primary navigation">...</nav>

<!-- 4. Associate error with input: -->
<input aria-describedby="error-msg">
<span id="error-msg" role="alert">Invalid email</span>

无效的 ARIA 用法

常见的 ARIA 错误：

<!-- BAD: ARIA role contradicts the element -->
<h2 role="button">Heading</h2>  <!-- don't turn a heading into a button -->

<!-- BAD: ARIA on an unsupported element -->
<div role="listitem">Item</div>  <!-- listitem must be inside list role -->

<!-- BAD: ARIA where HTML works fine -->
<p role="paragraph">Text</p>  <!-- p already has paragraph semantics -->

<!-- BAD: aria-label on hidden element -->
<span aria-hidden="true" aria-label="something">  <!-- contradictory -->

地标角色

ARIA 地标角色可以帮助屏幕阅读器用户在页面区域之间导航：

<div role="banner">     <!-- header for the whole page -->
<div role="navigation">  <!-- major navigation -->
<div role="main">        <!-- main content -->
<div role="complementary"> <!-- aside content -->
<div role="contentinfo"> <!-- page footer -->
<div role="search">      <!-- search form -->
<div role="form">        <!-- form with label -->

<!-- These are ONLY needed if using divs instead of semantic elements -->
<!-- Prefer the native HTML elements instead -->

测试 ARIA 实现

验证 ARIA 是否正确的方法：

  • 使用 Chrome/Firefox DevTools 中的“无障碍”面板
  • 使用 VoiceOver（Mac）或 NVDA（Windows）听取播报
  • 运行 axe DevTools 扩展
  • 检查无障碍树——它是否反映了您的预期？

ARIA 隐藏陷阱

常见的 aria-hidden 错误：

<!-- BAD: aria-hidden on element that still receives focus -->
<button aria-hidden="true">Close</button>
<!-- The button is still focusable but invisible to screen readers
     Screen reader users reach it via Tab but hear nothing -->

<!-- GOOD: for focus + hide, use hidden attribute or display:none: -->
<button hidden>Close</button>  <!-- removes from both tab order and AT -->

<!-- Or: if you must keep visible: -->
<button style="display:none" aria-hidden="true">Close</button>

快速检查

将 role="button" 添加到 div 后，会自动为您提供什么？

回顾：ARIA 与原生 HTML

ARIA 的要点：

  • 第一条规则：可能时使用原生 HTML
  • ARIA 只添加语义——行为必须由您实现
  • 三类：角色、属性、状态
  • 地标角色有助于屏幕阅读器导航
  • 使用 DevTools“无障碍”面板和屏幕阅读器进行测试

常见问题解答

「何时使用 ARIA，何时使用原生 HTML」课时是免费的吗？

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

「何时使用 ARIA，何时使用原生 HTML」这节课中我会学到什么？

遵循 ARIA 第一原则：优先使用原生语义 你通过在浏览器中直接运行的动手代码来练习 HTML Academy，全天候 AI 导师会在你学习这节课的过程中回答你的问题。

学习 HTML Academy 需要有经验吗？

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

「何时使用 ARIA，何时使用原生 HTML」课时需要多长时间？

大多数 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