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