第一原则：没有 ARIA 胜过糟糕的 ARIA
了解为什么原生 HTML 几乎总是更好的选择
第一原则：没有 ARIA 胜过糟糕的 ARIA 是 CoddyKit 上的免费 Web Accessibility Academy 课时。 这是第 1 节课，共 4 节。 你可以在下方免费阅读本课时的完整内容 — 然后在浏览器中使用内置代码编辑器和全天候 AI 导师进行实践。 这是 Web Accessibility Academy 学习路径的一部分，你的进度在网页和 CoddyKit 应用中同步。 Web Accessibility Academy 课程共包含 4 节课。
ARIA 到底是什么
ARIA 是一组 HTML 属性，用于在仅凭标记无法说明时，告诉辅助技术某个元素是什么以及它能做什么。
ARIA 不会改变行为
关键在于：ARIA 只会改变播报内容。它本身不会添加点击、焦点或键盘支持。
<div role="button">Save</div>
<!-- looks like a button, does nothing -->ARIA 的第一原则
官方第一原则是：如果原生 HTML 元素能够完成任务，就使用它，不要用 ARIA 重新创建一个。
原生元素功能完整
真正的按钮可以获得焦点，能响应 Enter 和空格键，并且会免费播报自身的角色。您无需自行编写这些功能。
<button>Save</button>
<!-- focus, keyboard, role: all built in -->错误的 ARIA 为什么更糟
错误的角色会主动误导用户。错误的 ARIA 比没有 ARIA 更好，但仅限于造成的伤害方面：它可能隐藏内容或错误地描述内容。
覆盖陷阱
ARIA 会覆盖原生语义。在标题上加上 role=presentation 后，屏幕阅读器会完全不再把它当作标题处理。
<h2 role="presentation">Pricing</h2>
<!-- no longer a heading to AT -->ARIA 提供的三类信息
ARIA 只提供三类信息：角色（它是什么）、状态和属性。这就是它的全部工具。
ARIA 不会影响 CSS
在元素上设置 aria-hidden 会将其从屏幕阅读器中隐藏，但它仍会完整地显示在屏幕上。这两个层面彼此独立。
<span aria-hidden="true">decorative star</span>
<!-- seen, not heard -->适合使用 ARIA 的情况
当没有合适的原生元素时，请使用 ARIA，例如构建 tablist 或自定义滑块。然后要准确使用并进行测试。
将 ARIA 与 JavaScript 配合使用
如果必须构建自定义控件，ARIA 和 JavaScript 应该配合使用。ARIA 说明它是什么，JS 提供焦点和键盘操作逻辑。
少即是多
最易访问的页面通常只使用很少的 ARIA。应当优先使用语义化 HTML，仅用 ARIA 填补原生语义留下的空缺。
快速检查
您需要一个可点击的“保存”控件。最易访问的选择是什么？
回顾：明智地使用 ARIA
您已经了解到，ARIA 只描述，不负责行为。请优先使用原生 HTML，只在确实存在空缺时添加 ARIA，并且每次都进行测试。🎯
用 AI 导师学习 HTML — 免费
在浏览器中编写并运行真实代码，获得全天候 AI 导师的即时帮助，并在网页或应用中继续学习。
- 课程
- 30
- 课程
- 120
常见问题解答
「第一原则：没有 ARIA 胜过糟糕的 ARIA」课时是免费的吗？
是的 — 「第一原则：没有 ARIA 胜过糟糕的 ARIA」的完整文本可在网页上免费阅读。要进行交互式练习（内置代码编辑器和全天候 AI 导师）并解锁 Web Accessibility Academy 课程的其余内容，请升级到 CoddyKit PRO。 Web Accessibility Academy 课程共包含 4 节课。
「第一原则：没有 ARIA 胜过糟糕的 ARIA」这节课中我会学到什么？
了解为什么原生 HTML 几乎总是更好的选择 你通过在浏览器中直接运行的动手代码来练习 Web Accessibility Academy，全天候 AI 导师会在你学习这节课的过程中回答你的问题。
学习 Web Accessibility Academy 需要有经验吗？
无需任何先前经验。CoddyKit 上的 Web Accessibility Academy 课程适合初学者到高级学习者，你可以从这里开始或从头开始，按照自己的节奏学习。 这是第 1 节课，共 4 节。
「第一原则：没有 ARIA 胜过糟糕的 ARIA」课时需要多长时间？
大多数 CoddyKit 课程大约需要 5–10 分钟。每节课都很精短且互动，所以你能稳步进步，并在网页和应用中从离开的地方继续。
我能在这节 Web Accessibility Academy 课中编写并运行代码吗？
能。每节 Web Accessibility Academy 课都包含内置代码编辑器，你可以在浏览器中直接编写并运行真实代码，并获得即时 AI 反馈 — 无需本地设置。
此课程中的所有课时
- 第一原则：没有 ARIA 胜过糟糕的 ARIA
- 角色定义事物的性质
- 状态与属性：展开、选中、禁用
- 读取无障碍树来调试 ARIA