<main> 标签本身具备语义，无需 role="main"；应唯一存在并包裹核心内容，配合跳过链接（如 <a href="#main-content">）和 <nav aria-label> 实现无障碍导航。
main 标签本身已具备语义化作用，配合 role="main" 属于冗余，现代屏幕阅读器（如 NVDA、VoiceOver、JAWS）原生识别 <main> 为主要内容区域。盲人用户可通过快捷键（如 NVDA+Insert+B 或 VoiceOver+Cmd+O）直接跳转到 <main>，无需额外 ARIA 属性。
用 <main> 明确界定核心内容
确保页面有且仅有一个 <main> 元素，包裹真正独立、不可被导航栏/侧边栏/页脚替代的主体内容（如文章正文、产品列表、表单主体等）。
- 避免嵌套在
<article>或<section>内部重复使用 - 不要把网站 logo、主导航、面包屑放进去
- 示例正确结构：
<header>…</header>
<nav aria-label="主导航">…</nav>
<main>
<h1>我的博客文章</h1>
<p>这是正文内容…</p>
</main>
<footer>…</footer>
为导航添加可跳过链接（Skip Link）
这是让盲人用户“快速跳过重复导航”的关键实践——在页面最开头放置一个隐藏但键盘可聚焦的链接，指向 <main>。
- HTML 示例：
<a href="#main-content" class="skip-link">跳至主要内容</a>
…
<main id="main-content">…</main> - CSS 让它默认隐藏，获得焦点时显示：
.skip-link { position: absolute; top: -40px; left: 0; background: #000; color: #fff; padding: 8px; text-decoration: none; }
.skip-link:focus { top: 0; } - 该链接比依赖
<main>语义更主动、更可靠，尤其对旧版屏幕阅读器或自定义快捷键用户友好
导航本身需明确语义与标签
让导航“可被识别、可被跳过”，不只靠跳过链接，还要让它自身结构清晰：
立即学习“前端免费学习笔记（深入）”；
- 用
<nav>包裹导航区域 - 添加
aria-label区分多个导航（如aria-label="主导航"、aria-label="页脚导航"） - 确保导航链接文字有意义（避免“点击这里”），必要时用
aria-labelledby或aria-label补充上下文
验证与测试建议
- 用键盘 Tab 测试：打开页面后按 Tab，第一个焦点是否为“跳至主要内容”链接？再按一次是否进入
<main>内容区？ - 用 NVDA 或 VoiceOver 的“元素列表”（Elements List）查看是否识别出 1 个 main 区域和带 label 的 nav
- 禁用 CSS 后检查视觉结构是否仍符合逻辑顺序（main 应在 nav 之后、footer 之前）
