正在加载...
HTML 无障碍
无障碍让更多人在键盘、读屏、缩放下使用页面。良好 HTML 是基础。
直接回答
用语义元素、label、有意义 alt、合理标题、键盘可操作。
📊 无障碍习惯
| Habit | Why it helps |
|---|---|
| Semantic landmarks | Tools can jump to regions |
| Labels on controls | Names fields clearly |
| Alt on images | Describes non-text content |
| Logical headings | Outlines the page |
| Keyboard operable controls | Not everyone uses a pointer |
Accessible snippets
html
HTML Code
<nav aria-label="Main">
<a href="index.html">Home</a>
</nav>
<label for="q">Search</label>
<input id="q" name="q" type="search">
<img src="chart.png" alt="Bar chart: sales rose from 10 to 18">
<button type="submit">Search</button>试一试
- 检查 label/alt
- 一个 h1
- 仅 Tab
- 修复不可达项
常见错误
- 「点此」链接
- 缺 alt
- 仅鼠标 div
- 用 ARIA 补丁
小结
- 语义+label+alt
- 键盘也是 a11y
- 先 HTML 再 ARIA
- 包容设计
🧠 测试您的知识
准备开始
测试您的知识
通过这个互动测验挑战自己，看看你对这个主题的理解程度如何
5
问题
70%
及格要求
∞
时间
∞
尝试次数
📝 说明
- 仔细阅读每个问题
- 为每个问题选择最佳答案
- 您可以随时重新参加测验
- 您的进度将显示在顶部