html语义化标签是屏幕阅读器理解页面结构的唯一可靠依据，header、nav、main等原生标签自动映射无障碍角色，article保障内容独立性与可分发性，错用或滥用反而破坏无障碍体验。
HTML语义化标签不是“锦上添花”的装饰，而是屏幕阅读器理解页面结构的唯一可靠依据——没有它们，残障用户面对的很可能是一段无停顿、无层级、无法跳转的语音洪流。
screen reader 如何依赖 header、nav、main 等标签
屏幕阅读器（如 NVDA、VoiceOver）不靠 class 名或视觉位置判断内容角色，而是直接读取 HTML 元素的无障碍角色（role）和隐含语义。例如：
-
header自动映射为banner角色，用户可一键跳转到页眉区域 -
nav映射为navigation，支持“跳到导航”快捷键（如 NVDA + Insert + N） -
main是唯一被映射为main角色的元素，用户按 M 键即可直达核心内容 -
article和section分别触发article与region角色，配合标题（h1–h6）形成可遍历的逻辑树
一旦用 div 替代这些标签，所有结构信息就丢失了；即使加了 ARIA role，也属于“补救”，不如原生语义稳定可靠。
为什么 article 对博客/新闻类内容特别关键
当一篇独立文章被包裹在 article 中，它就具备了可分发性语义：屏幕阅读器能识别这是“一个完整的信息单元”，并允许用户将整块内容作为单个对象跳过、重复朗读或导出。对比之下：
- 用
section包裹同一篇内容：只表示“主题分组”，不承诺独立性，辅助技术不会赋予其高优先级 - 用
div+class="post"：完全无语义，必须手动加role="article"才勉强等效，且易遗漏aria-labelledby等配套属性 -
article内部嵌套header、footer、time等，会自动构建时间归属、作者归属等上下文链路，这对认知障碍用户尤其重要
常见错误：看似用了语义标签，实则破坏结构
语义标签不是贴标签，错用反而比不用更糟：
- 在一个页面中多次使用
main：违反规范，多数屏幕阅读器只响应第一个，其余被忽略 - 把导航菜单塞进
aside：它本应是补充性内容，nav才是正确角色；放错后用户无法用“跳到导航”快捷键定位 -
figure里没配figcaption：图像失去说明，屏幕阅读器可能跳过或仅报“图形”，alt 文本又无法表达上下文关系 - 用
strong或em替代标题层级（比如用strong加粗模拟h2）：视觉上像标题，但不生成大纲结构，用户无法用标题导航（T 键）
最常被忽略的一点：语义标签本身不解决所有问题，但它构成了所有后续无障碍优化（如键盘焦点管理、ARIA-live 区域、表单关联）的前提——如果结构层就塌了，再精细的交互补丁也难覆盖根本缺陷。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
