语义化HTML与无障碍归纳总结

我一直觉得，写HTML就像搭房子的骨架。骨架歪了，后面装修再漂亮也白搭。语义化HTML，说白了就是让你的骨架一看就懂——浏览器懂、屏幕阅读器懂、搜索引擎懂，关键是维护代码的同事也懂。

我在项目中遇到过好几次这样的场景：接手别人写的页面，一打开全是<div>和<span>，导航用<div class="nav">，文章内容用<div class="content">。代码跑起来没问题，但屏幕阅读器读出来的体验简直是灾难。

为什么语义化HTML是无障碍的基础？

我们先想一个问题：盲人用户怎么“看”网页？他们用的屏幕阅读器会逐行朗读内容，但朗读器不会猜你的页面上哪个<div>是导航、哪个是正文。它只能老老实实地按顺序读。

语义化标签提供了“角色”信息。比如<nav>告诉朗读器“这里是导航区，用户可以快速跳过”，<article>告诉它“这是一篇独立内容，可以单独提取”。你说，这比用纯<div>方便多少？

嗯，这里要注意：现代的屏幕阅读器（如NVDA、JAWS、VoiceOver）都支持ARIA角色，但原生语义化标签自带默认角色，不需要额外写role属性，兼容性更好。我习惯先尽量用原生标签，实在搞不定才补ARIA。

语义化标签	默认ARIA角色	无障碍意义
<header>	banner	标识页面或区块的头部
<nav>	navigation	导航区，可快速跳转
<main>	main	页面唯一主内容，跳过重复区块
<article>	article	独立内容，可单独分发
<aside>	complementary	补充信息，与主内容关联
<footer>	contentinfo	页脚版权、联系方式等
<section>	region（需配合aria-label）	通用分区，最好加标题

表单与导航的语义化实践

表单是无障碍的重灾区。我见过很多表单只写了<input>，没有关联<label>。屏幕阅读器读出来的结果是“编辑框、编辑框、按钮”，用户根本不知道要填什么。

正确做法：每个输入控件配一个<label>，用for属性指向id。或者把<input>放在<label>里包裹。

<form>
  <div>
    <label for="username">用户名</label>
    <input type="text" id="username" name="username" required>
  </div>
  <div>
    <label for="email">邮箱地址</label>
    <input type="email" id="email" name="email">
  </div>
  <button type="submit">提交</button>
</form>

另外，错误提示不要只靠颜色变化。我曾经做过一个国际化的表格单，验证失败时只在输入框边框变红，用户反馈说他们根本不知道哪里错了。后来我加了aria-describedby指向错误信息块，屏幕阅读器会自动读出错误描述。

常见的语义化陷阱（避坑指南）

我曾经把一个文章列表全部写在<main>里，每个文章块用<div>加role="article"。后来发现VoiceOver每次都会把整个页面读成“main 文章 文章 文章”。其实用原生<article>直接搞定，根本不需要加ARIA。

另一个坑：<h1>～<h6>标题层级跳级。比如<h1>后面直接跟<h3>。这不光是样式问题，屏幕阅读器的“标题列表”功能会把用户搞晕。尽量保持层级连续，不要跳跃。

再比如<button> vs <div>点击。如果你用<div onclick="...">实现按钮功能，默认键盘焦点无法到达它，屏幕阅读器也不会把它识别为可交互元素。解决办法：要么用<button>，要么给<div>加上tabindex="0"、role="button"，并处理键盘事件。但说真的，我建议直接上<button>，少折腾。

语义化HTML的无障碍收益（一张图说清楚）

下面这张图是我自己整理的语义化HTML无障碍层级。从上到下：页面结构标签→内容分区标签→文本语义标签。箭头表示它们如何帮助辅助技术建立文档大纲。

你可以把这张图当作一个检查清单。每次写页面时，从上往下过一遍：结构标签用了没？内容分区合理吗？标题层级是否连续？表单元素有没有关联label？最后再考虑ARIA补漏。按这个顺序来，无障碍基础就稳了。

总结：语义化HTML的三层收益

• 屏幕阅读器：自动识别角色、关系、导航快捷方式，提升用户体验。
• 搜索引擎&国际化：搜索引擎更理解页面结构，多语言适配时标签语义不变，机器翻译也能保留结构。
• 开发者维护：代码可读性提高，初学者也能看懂页面骨架。我自己维护老项目时，第一件事就是把纯<div>换成语义标签。