HTML ARIA 无障碍标签
WAI-ARIA无障碍：role角色、aria-label/aria-labelledby/aria-describedby、aria-live动态区域（polite/assertive）、aria-expanded/aria-hidden状态、屏幕阅读器测试 · 难度：入门 · +10XP
HTML ARIA —— 让网页对所有人可用
全世界有超过10亿残障人士。盲人用屏幕阅读器听网页，行动不便者用键盘导航。ARIA（Accessible Rich Internet Applications）就是让网页对残障人士友好的技术标准。
核心概念：role 角色
<div role="button" tabindex="0">一个像按钮的div</div>
<nav role="navigation">导航菜单</nav>
<div role="alert">操作成功！</div>aria-label 给读屏软件加说明：
<button aria-label="关闭对话框">X</button>常见ARIA最佳实践
| 场景 | 推荐做法 |
|---|---|
| 图标按钮 | aria-label="功能描述" |
| 弹窗 | role="dialog" aria-modal="true" |
| Tab切换 | role="tablist"+role="tab"+aria-selected |
| 表单错误 | aria-describedby 关联错误信息 |
动手练习
- 基础练习：给自己之前做的一个表单加上aria-label和aria-describedby。
- 进阶应用：做一个Tab切换组件（3个标签页），用正确的ARIA属性标注。
- 项目实战：用Chrome的Lighthouse做一次无障碍审计，修复所有警告。