语义化标签的价值：屏幕阅读器实测

公司产品要过无障碍合规评审，我借了同事的读屏软件（NVDA）亲自试了一把自家后台。结果很受触动：平时觉得「无所谓」的标签选择，在读屏用户耳朵里是完全不同的世界。

先看最典型的对比。一个「商品列表」区域，两种写法：

<!-- 写法一：纯 div 堆砌 -->
<div class="title">商品列表</div>
<div class="item">...</div>
<div class="item">...</div>

<!-- 写法二：语义化 -->
<section aria-labelledby="goods-title">
  <h2 id="goods-title">商品列表</h2>
  <ul class="goods">
    <li class="item">...</li>
    <li class="item">...</li>
  </ul>
</section>

视觉上毫无差别，读屏体验天差地别。写法一里，NVDA 逐个念 div 的文本，用户听到的是一串没有结构的句子，不知道哪句是标题、一共几项、念到哪里了。写法二里，进入 section 时播报「商品列表 分组」，标题以「标题级别 2」的音调提示，列表会念「列表 4 项」，每项之间有「列表项」的停顿标记——用户可以按 H 键跳标题、按 L 键跳列表，页面变成了一张可导航的地图。

再记录几个实测中印象最深的点。

点一：按钮必须是 button。有个「展开更多」用了 div 加点击事件，读屏完全不播报可点击，键盘 Tab 也跳过它，用户根本不知道这东西能按。换成 <button> 后自动获得焦点、回车触发、播报「按钮」。

点二：表单控件的 label 关联。

<!-- 错误：placeholder 当标签，聚焦后读屏只念输入框 -->
<input placeholder="手机号" />

<!-- 正确：显式关联，聚焦时播报完整含义 -->
<label for="phone">手机号</label>
<input id="phone" type="tel" />

点三：图片的替代文本。装饰性图 alt=""（空值让读屏跳过），信息性图 alt 写清内容。最糟糕的是有内容却没写 alt 的 img，读屏会念文件名「Underscore 2 0 2 4 0 3 1 5 点 png」。

点四： landmarks 提供快速导航。header、nav、main、footer 这些地标标签，读屏用户可以一键跳转，相当于视觉用户的「扫视」。全 div 的页面里，他们只能从头到尾线性听。

顺带纠正一个旧观念：语义化对 SEO 的收益 nowadays 有限（爬虫更依赖内容和结构化数据），但对人的收益是实打实的。评审结束后我们把「新增页面必须过读屏抽检」写进了验收清单，也第一次让「语义化」从口头正确变成了耳朵里的正确。