必须是的直接子元素，因为屏幕阅读器只认为页面主体内容的唯一可信锚点，且硬性要求其为的直接子元素；一旦被其他元素包裹，辅助技术就完全忽略它。

为什么

必须是的直接子元素

因为屏幕阅读器（如 NVDA、VoiceOver）只认 <main></main> 作为页面主体内容的唯一可信锚点，且硬性要求它必须是 的直接子元素。一旦被 <div class="wrapper"> 或 <code><section></section> 包裹，辅助技术就完全忽略它。

常见错误：<div id="app"><main>...</main></div>；正确写法只能是：<header></header><main></main><footer></footer>，三者并列于 下。

• 验证方式：在控制台执行 document.querySelector('main').parentElement === document.body，返回 true 才算合格
• 缺失 <main></main> 时，屏幕阅读器退而求其次找 role="main"，再找不到就从第一个 <h1></h1> 开始算正文——但页眉里常有 <h1></h1>，结果用户平均要按 7–12 次“下一项”才能触达真正正文
• <main></main> 内容必须是对用户有独立价值的核心信息，不能只放广告位或空占位符

多个

必须用aria-label区分，否则全读成“导航”

<nav></nav> 自带 role="navigation"，但屏幕阅读器不识别 class 名或位置，只依赖语义角色和显式名称。多个 <nav></nav> 标签若没标注，NVDA/VoiceOver 全部朗读为“导航”，用户无法区分主导航、页脚导航或面包屑。

Wechat HTML Publisher

直接上传HTML富文本到微信公众号草稿箱。支持完整的HTML格式,无需Markdown转换。

下载

• 正确写法：<nav aria-label="主导航">...</nav>、<nav aria-label="页脚导航">...</nav>
• 避免用 <div role="navigation"> 替代 <code><nav></nav>：前者需手动加 tabindex="0" 才能聚焦，漏了键盘用户根本进不去
• <nav></nav> 内部至少得有一个可聚焦元素（如 <a></a>、<button></button>），纯文本链接（如 首页 | 关于）会被当普通段落处理，D 键跳转失效

比

可靠得多，别手写交互逻辑

<button></button> 是唯一原生支持完整键盘交互的标签：自动响应空格/回车、自动处理 disabled 状态、自带焦点样式、禁用时也不播报。而 <div role="button"> 只是告诉屏幕阅读器“这看起来像按钮”，其余全部得手写。 <ul> <li>真实踩坑：<code><div>提交</div>（Vue 场景），鼠标测试通过，但键盘用户按空格/回车毫无反应

若真要用 div 模拟，必须同时满足：tabindex="0" + onkeydown 监听 Enter/Space + 同步管理 aria-disabled 和 JS 禁用逻辑 + 手动加 focus 样式

表单提交、模态框关闭、筛选触发等关键操作，无条件优先用 <button></button>，别省那几行代码

标题层级断裂会让屏幕阅读器误判内容结构

屏幕阅读器靠 <h1></h1>–<h6></h6> 构建内容大纲树，跳 H 键遍历时严格依赖层级连续性。跳级（如 <h1></h1> 后直接 <h4></h4>）或倒置（<h3></h3> 出现在 <h2></h2> 前）会导致朗读顺序错乱、区域归属错误。

• 每个 <section></section> 或 <article></article> 应以恰当 heading 起始，例如：<section><h2>用户评论</h2>...</section>
• 主标题 <h1></h1> 全页只出现一次，且应放在 <main></main> 内（不是页眉里的 logo 文本）
• 副标题、说明文字不要滥用 heading，可用 <p></p> + <strong></strong> 或 CSS 控制样式

实际落地时最易被忽略的，是 <main></main> 的位置约束和 <nav></nav> 的命名义务——它们不是“锦上添花”，而是屏幕阅读器建立可信导航路径的刚性前提。写完 HTML，先跑一遍 DOM 层级检查，比后期补 ARIA 有效十倍。