HTML 可访问性：无障碍网页
✏️ 可编辑
加载编辑器...
实时预览
⌘+Enter 运行⌘+R 重置
关于此练习
在这个实验中，你将学习 Web 可访问性 (A11y)，确保网站对所有用户可用。
可访问性不仅是道德要求，在很多国家也是法律要求。
你将学到：
- 使用
role属性定义元素角色 - 使用
aria-*属性增强语义 - 确保键盘可访问性
- 为屏幕阅读器优化内容
中级⏱ 25-30 min
学习目标
- 理解 ARIA 角色和属性
- 掌握键盘导航实现
- 学会为图片和控件添加标签
- 了解屏幕阅读器工作原理
场景说明
你正在优化一个导航菜单和卡片组件的可访问性。
需要确保：
- 屏幕阅读器能正确朗读内容
- 键盘用户能顺畅操作
- 所有交互元素都有明确标签
为什么这么做
- HTML 决定语义和可访问性，是 CSS/JS 可维护性的基础。
- 结构清晰比视觉效果更重要，后续样式和交互都会受益。
- 语义标签能提升 SEO、可读性与团队协作效率。
动手练习
- 用语义标签重构页面主结构。
- 检查标题层级是否连续（h1 -> h2 -> h3）。
- 为关键元素补齐可访问属性。
常见误区
- 全部用 div，缺少语义分层。
- 标题层级混乱，页面结构不可读。
- 表单和媒体元素缺少必要属性。
本节交付物
一份语义化页面骨架模板（结构区块 + 标题层级 + a11y 清单）。
我的进度
完成步骤0 / 4
总尝试次数0
最佳分数0%
达标标准（可勾选）
完成当前 Lab 前建议确认
反思题（建议完成）
你这次最关键的语义结构调整是什么？
你补了哪些可访问性细节？
这份 HTML 结构可复用性如何？
标签
HTML5A11yARIAAccessibility