必须让和作为顶层块级元素直接出现在下或的兄弟节点，否则会屏蔽语义；只能出现一次，需用和aria-hidden控制可见性；响应式菜单须同步处理aria-expanded、焦点及esc监听；关键图像需提供有效alt或aria-describedby。

为什么

和

不能嵌套在

里用

屏幕阅读器会跳过没有语义的容器，只识别原生结构标签。把 <nav></nav> 套在 <div class="header-wrapper"> 里，等于主动屏蔽了导航区域的语义——它会被当成普通区块读作“一段内容”，而不是“主导航”。<br>必须让 <code><header></header> 和 <nav></nav> 作为顶层块级元素直接出现在 下，或至少是 <main></main> 的兄弟节点。否则 ARIA 属性（比如 aria-label）补救效果有限，且无法修复键盘 Tab 顺序错乱问题。

main 标签只能出现一次，但响应式布局常要动态切换内容区

很多响应式方案用 JavaScript 切换 <main></main> 内容，或用 display: none 隐藏/显示多个 <main></main>——这直接违反 WCAG 要求：<main></main> 必须全局唯一，且不可重复或条件渲染。
正确做法是：保留一个 <main></main>，内部用 <section></section> + aria-hidden 控制可见性；切换时同步更新 <main></main> 的 aria-labelledby 指向当前活跃 <section></section> 的 id，确保屏幕阅读器能感知上下文变化。

响应式折叠菜单的 aria-expanded 和 focus 管理容易漏掉

移动端常见的汉堡菜单，点击后展开 <ul></ul>，但若只改 aria-expanded 不处理焦点，键盘用户会卡在按钮上无法进入菜单项；若没同步设置 tabindex="-1" 和 focus()，屏幕阅读器可能跳过整个列表。
关键步骤必须全部执行：

html-deploy

使用 htmlcode.fun 将 HTML 内容或文件部署到网页，适用于用户要求“部署到网页”“托管此 HTML”“生成此前端...的实时链接”等场景。

下载

• 点击按钮时，设 button.setAttribute('aria-expanded', 'true')
• 展开后的 <ul></ul> 第一个 <a></a> 或 <button></button> 调用 .focus()
• 菜单关闭时，恢复按钮焦点并设 aria-expanded="false"
• ESC 键监听必须绑定到整个 <nav></nav>，不只是按钮

图片懒加载 + alt="" 的组合会让屏幕阅读器跳过重要内容

响应式页面常用 loading="lazy" 或 IntersectionObserver 加载图片，但如果图像是信息性内容（如流程图、数据图表），且 alt 为空或仅写“图片”，等同于主动删除该信息。
解决方式不是禁用懒加载，而是：

• 对关键图像，用 alt 描述核心信息（例如 alt="三步注册流程：输入邮箱→验证链接→设置密码"）
• 复杂图像用 aria-describedby 关联页面内隐藏的详细说明段落
• 避免给装饰性图标加 loading="lazy"，它们本不该被屏幕阅读器读取，但懒加载可能触发错误解析

语义结构重组不是加几个标签就完事——真正难的是让每个标签在 DOM 层、键盘流、屏幕阅读器播报节奏三者之间保持一致。漏掉任意一环，无障碍就断在那个点上。