辅助功能跳过链接

为什么

使用键盘、屏幕阅读器、开关控制和其他辅助技术的人使用跳转链接更容易和更快地到达主要内容或其他重要部分。

最常见的跳过链接是页面上的第一个交互元素。它将用户带到主要内容，越过徽标、搜索和导航等全局元素。在获得焦点之前，它几乎总是隐藏起来。

自己试试

跳过链接的 HTML 是简单的部分。

假设您在站点中使用了 <header> 和 <main>，正如您在地标中学到的那样。跳过链接是一个全局元素，因此您应该将其包含在 <header>. 您还需要在 <main> 上有一个 ID，以便您可以使用锚点链接到它。

<header>
<a href="#main" class="skip">Skip to main content</a>
…
</header>
…
<main id="main">

就是这样。没有Javascript。一个链接和一个 ID。

正如您可能在 HTML 中注意到的那样，该链接跳过了类，因此我们能够隐藏它。

.skip {
position: absolute;
left: -10000px;
top: auto;width: 1px;
height: 1px;
overflow: hidden;
}

此代码将链接方式移到浏览器之外。如果您不熟悉绝对定位，请阅读 CSS position 位置属性。 1px 大小和 overflow: hidden; 用于用户停用绝对定位的特殊情况。

当链接获得焦点时，它必须是可见的。这也是用 CSS 完成的:

.skip:focus {
position: static;
width: auto;
height: auto;
}

此方法对于依赖键盘和类似输入的用户非常有帮助和重要。如果你有一个复杂的网站，你可能想要添加更多的跳过链接，而不仅仅是主要内容。我们稍后会介绍。