绕过区块

要求内容

如果同一内容块出现在多个页面上——页眉、主导航、超级菜单、面包屑导航栏、功能链接——使用鼠标的视力正常用户可以立即跳过它。而键盘用户每次都必须逐一 Tab 浏览，屏幕阅读器用户则必须逐一收听。本成功准则要求至少提供一种机制，让用户能够直接跳转到主体内容。

WCAG 接受以下几种机制：“跳转到主体内容”链接、正确的地标区域（<header>、<nav>、<main>、<footer>），或屏幕阅读器用户可通过 H 键导航的真实标题层级结构。在实践中，跳转链接加上地标元素是最安全的基线方案。

如何满足

• 将”跳转到主体内容”链接作为页面中第一个可获得焦点的元素添加，使其在获得焦点时可见，而非永久隐藏。
• 将跳转链接的 href 指向 <main> 元素的 id，并为 <main> 添加 tabindex="-1"，以确保 Safari 中焦点环能正确落在该元素上。
• 使用真实的地标元素：每个页面包含一个 <header>、一个 <nav>（或多个带 aria-label 的 <nav>）、一个 <main>、一个 <footer>。
• 维护清晰的标题大纲，使 JAWS 和 NVDA 用户能够按 H、1、2、3 跳转。
• 如果页面有多个重复区块（功能导航 + 主导航 + 面包屑），可考虑为最繁琐的区块添加第二个跳转链接。

常见失败情形

• 跳转链接使用 display: none 隐藏，而非移出屏幕并在获得焦点时显示——辅助技术无法找到它。
• 跳转链接目标缺少 tabindex="-1"，导致 Safari/WebKit 忽略跳转，焦点仍停留在跳转链接上。
• <main> 嵌套在 <nav> 内，或在页面中出现多次。
• 标题层级跳跃（h1 → h4），或将标题仅用于视觉尺寸，破坏 H 键导航策略。
• 粘性页眉在跳转链接执行后遮挡了获得焦点的元素——参见 2.4.11。

重要性

绕过区块是无障碍改造成本最低的项目之一——一个跳转链接大约只需 10 行 HTML 和 CSS——但根据 WebAIM 年度百万网站扫描，生产环境网站的失败率仍高达约 60%。对于仅使用键盘浏览含有 40 项超级菜单的网站的用户而言，每次翻页都要逐一 Tab 浏览菜单项极为耗时，在长时间浏览会话中更会令人精疲力竭。