不该用时：无标题（–）、不可独立分发（如rss/邮件）、已有更精确标签（如）、纯视觉容器（轮播图外层）、单个按钮/图标组、嵌套过深且无对应标题层级，否则会增加可访问性噪音并破坏导航结构。
什么时候不该用 <section></section>
看到一块内容“看起来像一个区块”，就套上 <section></section>，是最常见的误用起点。它不是视觉分组工具，而是语义容器——必须满足至少一条：有独立标题（<h2></h2>–<h6></h6>）、能单独被 RSS 抓取或邮件推送、或已有更精确标签可替代。
常见错误现象：<section><p>欢迎关注我们</p></section>——无标题、不可分发、无结构价值，纯属增加可访问性树噪音。
- 页脚联系信息，优先用
<footer></footer>或<address></address>，别包<section></section> - 单个按钮、链接、图标组，用
<div> 或 <code><span></span>即可，<section></section>会触发屏幕阅读器生成无效“区域”导航项 - 嵌套多层
<section></section>却没对应标题层级，会导致 AT（辅助技术）导航断裂 - 禁止写成：
<article><main>...</main></article> - 禁止多个：
<main>A</main><main>B</main>—— B 不会被 AT 正确暴露 - 若页面含多个“主视图”切换（如 SPA 的 tab 切换），用
aria-live+role="region"替代重复<main></main> - 仅靠 CSS 把文字放在 input 旁边 → 必须用
<label for="id"></label>或<label><input>文本</label> -
<div onclick="submit()">提交</div>→ 直接用<button type="submit"></button>，自带 focus、enter/space 触发、disabled状态、语义角色
<main></main> 只能出现一次，且不能嵌套在其他语义标签里
<main></main> 表示文档中与当前页面最相关、不可重复使用的唯一内容主体。浏览器和读屏软件（如 NVDA 2022+）只识别第一个，后续会被忽略；若把它放在 <article></article> 或 <section></section> 内部，语义直接冲突——<article></article> 本身已是独立内容单元，不需要再标“主内容”。
使用场景：整页核心内容区，比如博客正文、产品详情页的描述区块、仪表盘的数据视图区。
图片、表单、按钮的“伪语义”比没语义更危险
加了 title 属性、CSS 对齐 label、或用 <div onclick> 模拟交互，看似“差不多”，实则绕过了原生语义保障机制，强制 JS 补救，埋下可访问性回归漏洞。
<p>性能影响虽小，但每次 focus、AT 查询、键盘导航时都要多走一遍角色推导逻辑。</p>
<ul>
<li>
<code><img title="logo"> → 应改用 <img alt="公司Logo">，title 不被所有读屏支持，且仅悬停可见
标题层级断裂是静默杀手
没有 <h2></h2> 就直接 <h3></h3>，或 <main></main> 外堆了三个 <h1></h1>，这类问题不会报错、不阻断渲染，但会让屏幕阅读器用户彻底迷失上下文——他们依赖标题层级快速跳转，而非滚动浏览。
判断标准很简单：打开 Chrome DevTools → Elements 面板 → 按 Ctrl+F 搜 <h>，看是否形成连续、不跳跃的 <code>h1→h2→h3 链路；<main></main> 内部应从 <h1></h1> 或 <h2></h2> 开始，而非 <h3></h3>。
- CMS 导出内容常带错乱标题，需在插入前 normalize
- 组件库中局部
<h3></h3>若未声明作用域（如用<h3></h3>作为卡片标题），要配合aria-level="3"或包裹在<section></section>内并补<h2></h2> - 用 Lighthouse 的 “Accessibility” 审计跑一次，标题层级问题会直接标红
