skip links放置位置及axe-core地标合规问题咨询

一、Skip Links的合理放置位置 #

• 需放在页面DOM顺序最顶端（保证键盘用户能第一时间聚焦到跳转链接），同时必须包含在页面的landmark区域内，比如语义化的<header>标签，或自定义landmark容器中。

二、解决"All page content should be contained in landmarks"报错的方法 #

你的问题根源是skip links的<ul>容器未被任何landmark包裹，以下两种方案可修复：

方案1：将skip links放入<header>标签（推荐） #

<header>本身自带banner landmark属性，直接把skip links列表嵌套进去即可：

<header>
  <ul>
    <li><a id="top-anchor" class="skip-anchor" name="top"> </a></li>
    <li><a id="skip-to-nav" class="skip-link focusable" href="#nav">Skip to navigation</a></li>
    <li><a id="skip-to-content" class="skip-link focusable" href="#content">Skip to main content</a></li>
  </ul>
  <!-- 此处可放置页眉其他内容，如logo、主导航等 -->
</header>

方案2：给skip links容器添加自定义landmark属性 #

若不想嵌套进<header>，可给容器添加ARIA角色来定义landmark：

<!-- 使用banner landmark -->
<ul role="banner">
  <li><a id="top-anchor" class="skip-anchor" name="top"> </a></li>
  <li><a id="skip-to-nav" class="skip-link focusable" href="#nav">Skip to navigation</a></li>
  <li><a id="skip-to-content" class="skip-link focusable" href="#content">Skip to main content</a></li>
</ul>

<!-- 或使用带描述的region landmark -->
<div role="region" aria-label="快速跳转链接">
  <ul>
    <li><a id="top-anchor" class="skip-anchor" name="top"> </a></li>
    <li><a id="skip-to-nav" class="skip-link focusable" href="#nav">Skip to navigation</a></li>
    <li><a id="skip-to-content" class="skip-link focusable" href="#content">Skip to main content</a></li>
  </ul>
</div>

三、相关行业标准（WCAG） #

• WCAG 2.1 2.4.1 绕过区块（Bypass Blocks）：要求为键盘用户提供跳过重复内容（如导航栏）的快捷方式，skip links是该要求的典型实现。
• WCAG 2.1 1.3.1 信息和关系（Info and Relationships）：页面内容需通过landmark（语义化标签或ARIA角色）组织，让辅助技术能识别页面结构，这也是axe-core触发该报错的核心依据。
• 核心原则：skip links需保持DOM顺序优先，同时必须被包含在landmark内，兼顾可用性与页面语义结构完整性。

内容的提问来源于stack exchange，提问作者Ben Alan