HTML 无障碍访问
学习ARIA和可访问性 · 难度：进阶 · +15XP
HTML 无障碍访问 A11y
让网页对所有用户可用，包括使用屏幕阅读器的视障用户。
核心原则
| 原则 | 实现 |
|---|---|
| 图片有替代文字 | <img alt="描述"> |
| 表单有标签 | <label for="id"> |
| 语义化标签 | header/nav/main/footer |
| 键盘可操作 | tabindex, focus样式 |
| ARIA属性 | aria-label, role属性 |
示例
<button aria-label="关闭对话框">X</button>
<nav aria-label="主导航">...</nav>
<div role="alert" aria-live="polite">操作成功</div>???? 练习
- 给图片添加有意义的alt文字
- 用aria-label标注图标按钮