必须唯一且只包裹核心内容，否则屏幕阅读器会跳过、定位错乱，甚至让用户手动听完整页才能找到正文；因其按M键仅识别第一个合法<main>，后续实例被忽略，常见于Next.js或React中布局组件与子页面重复渲染<main>。
为什么多个 <main> 会让屏幕阅读器失效
屏幕阅读器按 M 键跳转时，只认第一个合法的 <main>；后续的会被忽略。常见错误包括：
- Next.js 或 React 布局组件里写了一个
<main>，子页面又渲染一个 -
<main>包了顶部 banner、左侧菜单、广告位——这些都不是用户要读/操作的主内容 - 用
<main>当视觉居中容器，纯为 CSS 服务
正确做法：全 DOM 中仅一个 <main>，且只包含商品列表、表单主体、文章正文这类真正需要被聚焦的内容块。
<nav> 和 <aside> 不是样式占位符，而是导航锚点
<nav> 必须是一组有明确导航意图的链接（如主导航、分页、面包屑），不是“看起来像导航的 div”。<aside> 是与主内容相关但可独立存在的侧边信息（如作者介绍、相关文章），不是“右边那栏”。
立即学习“前端免费学习笔记（深入）”；
- 页面含多个
<nav>（如主导航 + 页脚导航）时，务必加aria-label，例如<nav aria-label="主导航"> -
<aside>不能包裹广告或弹窗——它们不属于“相关内容”，应归入<section>或无语义容器 - 滥用
<section>（比如给每个按钮都套一层）会导致大纲污染，屏幕阅读器生成一堆无意义的“第 X 节”节点
表单和图片的语义缺失，后期要用 JS 补救，反而拖慢性能
缺失 alt 的 <img> 或没绑定 <label> 的 <input>，表面是可访问性问题，实际会触发隐性运行时开销：
- 开发者后期常被迫加 JS 监听焦点事件、动态插入
aria-live或播报逻辑 -
<img>必须配alt；装饰图用alt=""，信息图用描述性文字（如alt="黑色圆领针织衫，袖口有白色条纹"） -
<label>必须显式绑定（for="id"+id）或隐式嵌套（<label>邮箱<input type="email"></label>），别只靠 CSS 对齐 -
placeholder不是标签替代品——它输入后消失，且多数读屏不读
标题层级断裂比不用语义标签更伤可访问性
这是最容易被忽略的点：页面从 <h2> 开始、<main> 外堆了三个 <h1>、小节用了 <h3> 但主内容还没出现 <h2>——这会让辅助技术生成错乱的大纲。
判断依据很简单：是否能自然形成「文档大纲」？<h1> 应该是整页唯一主题，<h2> 是主内容一级分段，<h3> 是其子级。一旦断层，屏幕阅读器的“大纲视图”就失效，用户无法快速跳转。
