正在加载...

HTML 无障碍

上一课 datalist 给单个输入接建议。无障碍更广：整页可用键盘、屏幕阅读器和缩放。好的 HTML——地标、label、alt、标题、真正的按钮——是基础。

为什么无障碍重要

有人不用鼠标浏览、放大文字或听页面。没有 alt 的图表是静音的；没有 label 的搜索没有名字；可点击的 div 可能拿不到焦点。包容性标记帮助所有人。多为写 HTML 时的习惯。

直接回答

1) 语义区域与原生控件。2) 每个控件用 for/id 配 label。3) 信息性图片写有意义的 alt；空 alt 仅装饰。4) 清晰 h1 与不乱跳的嵌套。5) 用 Tab 到达链接和按钮。6) 原生 HTML 不够再用 ARIA——先修结构。

📊 Accessibility habits beginners use

Habit Why it helps Beginner tip
Semantic landmarks Tools jump to regions Prefer main/nav over anonymous divs
Labels on controls Names fields clearly for= must match the control id
Alt on images Describes non-text content Say what the image communicates
Logical headings Outlines the page Do not jump h1 → h4 for style
Keyboard-operable controls Not everyone uses a pointer Prefer button/a over clickable divs
Native before ARIA Roles come built-in Repair HTML; do not wallpaper broken markup

带地标的已标注搜索

小搜索条：有可访问名称的 nav、已标注字段和真正按钮。屏幕阅读器会播报区域与名称；Tab 可到输入和按钮。

Labeled search in a nav

html 
<nav aria-label="Site">
<label for="q">Search</label>
<input id="q" name="q" type="search">
<button type="submit">Search</button>
</nav>

阅读搜索示例

  • nav 是导航地标；多个 nav 时用 aria-label 区分
  • label for + input id 给出可访问名称
  • name 用于提交——与可访问名称分开
  • type=search 是原生控件
  • 真正的 button 可用 Enter/空格
  • 上一课是建议；这里是命名与可达

标题、alt 与真正按钮

第二段：h1、嵌套 h2、带描述性 alt 的信息图，以及 button 动作。与「点击这里」和静音图表相反。

Headings alt and button

html 
<main>
<h1>Monthly sales</h1>
<h2>Q1 results</h2>
<img src="chart.png" alt="Bar chart: sales rose from 10 to 18">
<p>Sales climbed through March.</p>
<button type="button">Download report</button>
</main>

阅读结构示例

  • 一个 h1 定主题；下面是 h2，不跳到 h4
  • 图表 alt 说出结论，不只是「图片」
  • 装饰用空 alt；此图是信息性的
  • 动作是 button，不是 div
  • main 标记主内容
  • 下一课 JavaScript——保留这些 HTML 习惯

先修什么

  • 无名字段：先加 label，再谈花哨 placeholder
  • 静音信息图：写 alt
  • 假控件：把可点 div 换成 button/a
  • 标题乱炖：恢复逻辑大纲
  • 只靠 ARIA 补丁：有原生元素就用原生
  • 键盘死胡同：能点的都要用 Tab 到达

练习——整页习惯

  1. 搜索示例；去掉 label 再恢复 for/id
  2. 第二个 nav，各自不同的 aria-label
  3. 清空图表 alt；再恢复有意义的 alt
  4. 故意 h1→h4；再改回 h1→h2
  5. 把按钮换成 div；再改回 button 并 Tab
  6. 一句：无障碍从 HTML 结构开始，不是 ARIA 墙纸
  7. 下一课加 script——保留 label 与按钮

易错点

  • 无上下文的「点击这里」链接
  • 信息性图片缺 alt 或空 alt
  • 忽略键盘的可点 div
  • 仅为视觉大小选标题级别
  • 用 placeholder 代替 label
  • 在坏标记上堆 ARIA 角色
  • 忘记上一课 datalist 也需要 label

小结

  • 无障碍=让更多人和工具可用的结构
  • 地标、label、alt、标题与原生按钮重要
  • 键盘可达是工作的一部分
  • 先扎实 HTML，再谈重 ARIA
  • datalist 是单个控件；本课看整页
  • 下一课：在 HTML 页面中加入 JavaScript

🧠 测试您的知识

准备开始

测试您的知识

通过这个互动测验挑战自己，看看你对这个主题的理解程度如何

❓
5
问题
🎯
70%
及格要求
♾️
∞
时间
🔄
∞
尝试次数

📝 说明

  • 仔细阅读每个问题
  • 为每个问题选择最佳答案
  • 您可以随时重新参加测验
  • 您的进度将显示在顶部
主题 57 的 68
Html 教程