必须唯一且只包真正主内容，否则屏幕阅读器跳过或定位错误；多个、嵌套错误、标题断裂、alt/label缺失等均直接破坏可访问性协议。
<main></main> 必须唯一且只包真正要操作/阅读的内容，否则屏幕阅读器会跳过、定位错误或被迫遍历冗余节点——这不是“没写好”，而是直接破坏辅助技术的导航协议。
为什么 <main></main> 写错会导致可访问性崩溃
屏幕阅读器按 M 键跳转时，只认第一个合法的 <main></main>；它不是视觉容器，而是导航锚点。一旦出错，用户就得手动听完整页才能找正文。
- Next.js 布局组件里写一个
<main></main>，子页面又渲染一个 → 实际 DOM 中出现两个，读屏工具静默忽略第二个 -
<main></main>里塞了顶部 banner + 左侧菜单 + 内容区 → 非主内容混入，导致语音导航卡在广告或导航上 - 把
<main></main>套在<header></header>或<nav></nav>外层 → 违反嵌套规则，部分 AT 直接跳过该<main></main>
性能影响极隐蔽：不增加字节，但会让辅助技术多做无效 DOM 遍历，拖慢语音响应速度。
<nav></nav> 和 <section></section> 不是“带样式的 <div>”
<nav></nav> 是为「主导航链接组」准备的，不是所有链接集合都配得上它；<section></section> 要求自带 <h2>–<h6> 标题，否则语义断裂。
- 文章末尾的“上一篇/下一篇”用
<nav></nav>？❌ 应该用普通链接或<div role="navigation">（加 aria-label） - 纯卡片列表无标题，硬套
<section></section>？❌ 用<div>更诚实，避免生成无意义大纲节点 -
<article></article>里再包<section></section>？✅ 合理；反过来把<section></section>包进<article></article>？❌ 破坏内容独立性语义
Google 会参考文档大纲评估内容权重，标题层级断裂（比如从 <h3> 直接跳到 <h1>）比不用语义标签更伤 SEO 和可访问性。
立即学习“前端免费学习笔记（深入）”；
图片和表单的语义缺失会倒逼 JS 补救
表面看只是 alt 或 label 没写，实际后果是：后期不得不用 JS 监听焦点、动态注入 ARIA、手动播报提示——这些补丁逻辑增加运行时开销，且极易遗漏。
-
<img src="icon_menu.png">缺alt→ 屏幕阅读器读文件名，或完全跳过 -
alt=""用于装饰图 ✅；但图文混合按钮中图标用了alt="邮箱"❌（文字已说明，重复描述干扰） - 仅靠 CSS 把“邮箱”文字放在
<input>右侧 → 聚焦输入框时，读不出这是什么字段 - 用
placeholder="请输入邮箱"当标签？❌ 它在输入后消失，且多数读屏不读 placeholder
正确绑定方式只有两种：<label for="email">邮箱</label><input id="email">，或更简洁的嵌套写法：<label>邮箱<input type="email"></label>。
标题层级断裂是最容易被忽略的致命点
页面从 <h2> 开始、<main> 外堆了三个 <h1>、小节用了 <h3> 但主内容还没出现 <h2>——这会让辅助技术生成错乱的大纲，比全用 <div> 更难导航。
判断是否合理，就问一句：如果去掉所有样式，仅靠标题缩进和语义结构，用户能否靠听就理清主次关系？不能，就是断层。
