nav标签必须包裹可跳转的链接集合，单独包裹按钮、图标或纯文本会导致语义失效；main只能出现一次且不可嵌套；h1全页唯一并须位于main内，标题层级须严格递进。
nav 标签必须包裹链接集合，否则语义失效
单独用 <nav></nav> 包一个按钮、一个图标或纯文本，屏幕阅读器会识别为 role="navigation"，但内部无跳转能力，直接忽略导航意图。它不是“有导航样式的容器”，而是“可跳转的链接组”专用标记。
常见错误现象：
-
<nav><button>菜单</button></nav>—— 没有href或可聚焦交互逻辑，读屏不播报为导航项 -
<nav>首页 关于我们</nav>—— 缺少<ul><li></ul>结构，NVDA 会连读成“首页关于我们”，无法区分项数与顺序 - 多个
<nav></nav>未加aria-label，VoiceOver 在“区域跳转”模式下只报“导航”，无法区分主导航/页脚链接/面包屑
正确做法：
- 确保每个
<nav></nav>至少含一个有效<a href></a>或带tabindex="0"+role="link"的可聚焦元素 - 必须用
<ul><li></ul>套链接，不可用<div> 模拟列表（即使加 <code>role="list"兼容性也差） - 共存多个
<nav></nav>时，必须配aria-label，如<nav aria-label="主导航"></nav>和<nav aria-label="文章内目录"></nav> - 在
<section></section>或<article></article>内再写一个<main></main>—— 违反规范，部分读屏直接跳过整块 - 页面顶部用
<header></header>，中间用<main></main>，底部又塞一个<main></main>—— 第二个<main></main>被忽略，页脚内容被当成正文一部分朗读 - 用 CSS 隐藏了
<main></main>但没设aria-hidden="true"，导致视觉不可见但语音仍播报 - 全页只保留一个
<main></main>，且直接位于下（允许被<header></header>/<footer></footer>同级并列） - 若需多区块主内容（如仪表盘多卡片），用
<section></section>或<article></article>分组，而非多个<main></main> - 动态渲染时，检查 JS 是否意外插入第二个
<main></main>—— React/Vue 组件复用容易踩这个坑 - 页面从
<h2></h2>开始，没有<h1></h1>—— 读屏默认把第一个<h2></h2>当作主标题，后续<h3></h3>被理解为同级而非子级 -
<main></main>外写了三个<h1></h1>（比如 logo、banner 标题、侧边栏标题）—— 大纲崩溃，NVDA 的“标题导航”模式失效 - 用
<h3></h3>写小标题，但其所属<section></section>没有<h2></h2>开头 —— 读屏认为这是独立顶级区块，而非嵌套结构 - 全页严格只有一个
<h1></h1>，代表页面核心主题（如文章标题、产品名称） - 每个
<section></section>或<article></article>应以<h2></h2>起始（若整体已用<h1></h1>） - CSS 隐藏标题时，必须用
position: absolute; clip: rect(1px, 1px, 1px, 1px);，禁用display: none或visibility: hidden - 给已有
<label for="xxx"></label>的<input>再加aria-labelledby—— 读屏重复播报两次 - 模态框没设
role="dialog"+aria-modal="true"，仅靠aria-hidden="true"关闭背景 —— 键盘焦点仍可进入背景内容 - 用
aria-current="true"标识当前页 —— 不是合法值，NVDA 忽略，应始终用aria-current="page" - 优先用原生标签，只有当原生语义不足时（如图标按钮、自定义下拉、JS 动态面板）才加 ARIA
- 所有 ARIA 属性必须指向真实存在的 DOM 元素 ID，且目标不可
display: none - JS 动态更新状态（如切换菜单展开）时，必须同步操作
aria-expanded和aria-current，不能只改 class
main 只能出现一次，且不能嵌套在其他语义容器里
<main></main> 表示页面唯一主体内容区，浏览器和读屏软件靠它提供“跳转到主要内容”快捷指令。一旦重复或嵌套，辅助技术会丢弃该区域，用户被迫线性听完整页。
典型误用场景：
实操建议：
标题层级断裂会让读屏用户彻底迷失上下文
屏幕阅读器依赖 <h1></h1>–<h6></h6> 构建文档大纲（outline），跳级或乱序会导致“子章节突然变成父章节”，用户无法建立稳定认知路径。
常见错误现象：
关键约束：
ARIA 是补救手段，不是语义替代品
原生语义标签（如 <nav></nav>、<main></main>、<button></button>）自带角色（role）、名称（name）和状态（state）。乱加 ARIA 属性反而覆盖默认行为，导致读屏误解或静默失败。
容易踩的坑：
原则：
<h1></h1>、<main></main> 嵌套、或 <nav></nav> 里没链接。这些地方机器不会报错，但人会因此卡在页面里。
