HTML 零基础入门
HTML 无障碍基础
用键盘检查名称、焦点顺序、地标与替代内容。
- 难度
- 入门
- 预计时间
- 45 分钟
- 最近验证
- 2026/9/21
这一节要完成什么
完成一次不依赖鼠标的页面走查，并修复真正影响使用的问题。
先理解：为什么要学它
无障碍主要来自选对原生元素、保持合理顺序、给内容准确名称。键盘测试能快速暴露链接、按钮和表单是否真的可用。
跟着做
<a class="skip-link" href="#main-content">跳到主要内容</a>
<header>…</header>
<main id="main-content">
<h1>我的前端学习主页</h1>
…
</main>
<a href="pages/about.html" aria-label="查看关于我的介绍">👤</a>- 把鼠标放到一旁，从地址栏按 Tab 进入页面并记录顺序。
- 每到一处，不看周围文字也要能说出它的操作；纯图标控件补准确名称。
- 如果导航很长，加入跳转链接并确认目标 id 存在。
- 页面放大到 200%，记录被遮挡或不能阅读的内容。
关键代码怎么读
- 原生
a、button、input已有键盘行为。 - DOM 顺序就是默认阅读和 Tab 顺序；不要用正数 tabindex 重排。
- ARIA 补充缺失名称或关系，不能代替正确元素。
常见错误：看到什么，检查什么
| 现象 | 检查方法 |
|---|---|
| 所有元素都加 aria-label | 它会覆盖可见名称，只在确有缺口时加。 |
| alt 与旁边文字重复 | 朗读器会读两遍，装饰图用空 alt。 |
| 跳转目标不存在 | #main-content 必须对应唯一 id。 |
自己完成一次
审查标题、地标、图片 alt、表单标签和键盘可达性，每项记录测试证据。
完成后再看参考答案
合格记录要写实际证据，例如“点击邮箱标签后聚焦输入框”，不能只写“应该可以”。
完成检查
- 我的页面出现了本节要求的新内容
- 我能不用看答案解释关键标签或属性
- 我主动制造并修复了至少一个错误