SkipLink 跳到正文

跳过导航、直接到正文的链接。它平时隐藏，拿到键盘焦点时才出现。

什么时候用

每一页都用，放在 <body> 的最前面。

页面里怎么写

<body>
  <SkipLink />
  <TopNav … />
  <main id="main">…</main>
</body>

href 默认是 #main，给正文加上这个 id。

结构

左上角、压在导航上面的一个画布色胶囊，带一圈细线和焦点光圈。

无障碍

它满足 WCAG 2.4.1“绕过区块”：没有它的话，用键盘的读者每一页都要先按 Tab 走完导航里的每个链接，才到正文。

API

SkipLink.astro。交付包没有跳到正文的链接，这个是照交付包的焦点光圈和画布色胶囊画的。

相关

TopNav 顶部导航。