无障碍：alt、标题层级与 ARIA

掌握替代文本、屏幕阅读器真正能够导航的标题层级，以及仅在原生 HTML 不足时才使用的 ARIA。

9 分钟 · 3 题

无障碍不是项目结束时才拼贴上去的装饰层：它是你 HTML 的结构性属性。首先是 alt 属性。好的替代文本描述的是图片在其上下文中的功能，而不是它逐像素的外观。销售图表不应描述为“蓝色柱状图”，而应描述它所承载的信息。而纯粹装饰性的图片必须使用空的 alt=""：这是明确告诉屏幕阅读器跳过它的信号。完全省略该属性是所有选项中最糟糕的，因为屏幕阅读器届时会朗读文件名。

<img src="sales-chart.png"
     alt="2025 sales: +18% in the last quarter">

<img src="divider-ornament.png" alt="">

第二项任务：标题层级。屏幕阅读器用户绝大多数会在标题之间跳转，以此构建页面的心智地图。因此，你的 h1 → h2 → h3 大纲必须反映内容的逻辑结构，绝不能反映你恰好想要的视觉大小。两条不可妥协的规则：每页只有一个 h1，以及不跳级（h2 下面不能直接跟 h4）。如果某个标题看起来“太大”，请在 CSS 里修正它，而不是降低它的语义级别。

<h1>Dashboard</h1>
<section>
  <h2>Statistics</h2>
  <h3>Monthly visits</h3>
  <h3>Conversion rate</h3>
</section>
<section>
  <h2>Exportable reports</h2>
</section>

当原生 HTML 无法表达动态状态时，ARIA 才具有正当性：一个打开或关闭的菜单、一块实时更新的区域、一个激活的标签页。关键属性是 aria-expanded（打开/关闭状态）、aria-controls（指向被控制的元素）以及 aria-live（宣告更新）。记住这个原则：原生 HTML 提供角色，ARIA 补充你的 JavaScript 随时间改变的状态和属性。

<button aria-expanded="false" aria-controls="menu">
  Menu
</button>
<ul id="menu" hidden>
  <li><a href="/profile">Profile</a></li>
  <li><a href="/settings">Settings</a></li>
</ul>

知识检测

确认你已牢记本课的重点内容。

1. 对于纯粹装饰性的图片，你应该如何处理？
   • 给它一个描述性的 alt，比如 alt="ornament"
   • 给它一个空的 alt 属性：alt=""
   • 完全移除 alt 属性
   • 用 title 代替 alt
2. 在一个 h2 之下，你想要一个视觉上不太显眼的小标题。你该怎么做？
   • 用 h5，因为它默认更小
   • 用 h3，并在 CSS 里缩小它的尺寸
   • 用一个带标题类的 div
3. 什么时候添加 ARIA 属性才是合适的？
   • 为了保险起见，在每个交互元素上都加
   • 当没有原生 HTML 元素能表达所需的角色或状态时
   • 为了提升页面的搜索排名