如何创建“跳至内容”链接

跳过链接是帮助用户在页面中移动的小型内部导航链接。您可能从未真正见过它，因为它们通常隐藏在视线之外，并用作辅助功能增强功能，允许键盘用户和屏幕阅读器从页面顶部跳转到内容，而无需首先浏览页面上的其他元素。

事实上，如果您打开 DevTools，您可以在 CSS-Tricks 上找到一个。

在我看来，实现跳过链接的最佳方法是隐藏它，然后在它获得焦点时将其显示出来。因此，假设我们在 HTML 中有一个链接

<a class="skip-to-content-link" href="#main">
  Skip to content
</a>

……我们可以为它指定一个绝对位置并将其移出屏幕

.skip-to-content-link {
  left: 50%;
  position: absolute;
  transform: translateY(-100%);
}

然后，我们可以在它获得焦点时将其重新显示，并在过程中对其进行一些样式设置

.skip-to-content-link {
  background: #e77e23;
  height: 30px;
  left: 50%;
  padding: 8px;
  position: absolute;
  transform: translateY(-100%);
  transition: transform 0.3s;
}

.skip-to-content-link:focus {
  transform: translateY(0%);
}

这将隐藏我们的链接，直到它获得焦点，然后在它获得焦点时将其显示出来。

现在，请允许我详细说明，从迈尔斯·戴维斯（Miles Davis）的这句话开始

时间不是主要的东西。它是唯一的东西.

当我坐在雨中的爱尔兰写这篇文章时，我想到了许多用户在使用我视为理所当然的网络时面临的挑战。我们在创建出色的用户体验方面投入了大量思考，却没有考虑到所有用户以及如何满足他们的需求。诚然，在我完成关于Frontend Masters 的 Marcy Sutton 课程之前，我从未听说过跳过链接。自从了解到使用跳过链接的功能和简便性后，我决定将其作为我的使命，传播更多意识——还有什么平台比 CSS-Tricks 更好的呢！

解决方案是对问题的答案，那么帮助键盘用户和屏幕阅读器快速找到页面内容的解决方案是什么？简而言之，解决方案是时间。让用户能够导航到他们最感兴趣的网站部分，使他们能够节省宝贵的时间。

以Sky News 网站为例。它提供了一个“跳至内容”按钮，允许用户跳过所有导航项目并直接跳转到主要内容。

您可以使用键盘导航到页面顶部查看此按钮。这类似于上面显示的实现。该链接始终位于文档中，但仅在其获得焦点时可见。

这正是我们将在本文中一起创建的跳过链接类型。

我们的示例网站

我构建了一个示例网站，我们将使用它来演示跳过链接。

该网站有许多导航链接，但为了节省时间，它只有两个页面：主页和博客页面。这足以让我们了解其工作原理。

识别问题

这是我们正在使用的导航

总共有八个导航项目，键盘用户和屏幕阅读器必须依次遍历这些项目才能到达导航下方主要内容。

这就是问题所在。导航对于用户来说可能是不相关的。也许用户获得了指向文章的直接链接，他们只是想查看内容。

这是跳过链接的完美用例。

创建链接

创建“跳至内容”链接有几种方法。我喜欢的方法类似于 Sky News 的示例，即在链接获得焦点之前隐藏它。这意味着我们可以将链接放在页面顶部或附近，例如在<header>元素内部。

<header>
  <a class="skip-link" href='#main'>Skip to content</a>
  <!-- Navigation-->
</header>

此链接具有.skip-link类，因此我们可以对其进行样式设置。href属性指向#main，这是我们将添加到页面下方出现的<main>元素的 ID。这就是链接在单击时将跳转到的位置。

<header>
  <a class="skip-link" href='#main'>Skip to content</a>
  <!-- Navigation-->
</header>


<!-- Maybe some other stuff... -->


<main id="main">
  <!-- Content -->
</main>

如果我们只是将链接放入标题而不进行任何样式设置，则如下所示。

这看起来不太好，但功能是存在的。尝试使用键盘导航到链接，并在它获得焦点时按 Enter。

现在是时候让它变得漂亮了。我们必须首先修复定位，并且仅在我们的跳过链接获得焦点时才显示它。

.skip-link {
  background: #319795;
  color: #fff;
  font-weight: 700;
  left: 50%;
  padding: 4px;
  position: absolute;
  transform: translateY(-100%);
}

.skip-link:focus {
  transform: translateY(0%);
}

这里的关键在于transform属性，它根据我们的跳过链接是否获得焦点来隐藏和显示它。让我们通过在transform属性上快速过渡使其看起来更漂亮一些。

.skip-link {
  /* Same as  before */
  transition: transform 0.3s;
}

它现在将过渡到视图中，这使得它变得更好一些。

您现在（希望）应该拥有以下内容

如您所见，跳过链接绕过导航并直接跳到单击时的<main>元素。

可以使用多个链接！

现在，该链接仅服务于一个目的，即跳过到我们网站的内容。但我们不必止步于此。

我们可以更进一步，创建一个具有更多选项的跳过链接，例如跳转到网站页脚的方法。正如您可能想象的那样，这与我们已经完成的操作非常相似。

让我们通过使用多个跳过链接使示例网站的博客页面更易用一些。博客通常使用 AJAX，当到达页面底部时加载更多帖子。这可能使得很难到达网站的页脚。这就是我们在此案例中要解决的问题。

因此，让我们添加第二个链接，绕过所有自动加载内容，并将用户直接跳转到页面上的#footer元素。

<div class="skip-link" >
  Skip to <a href='#main'>content</a> or <a href='#footer'>footer</a>
</div>

我们还需要稍微修改一下我们的 CSS，并使用:focus-within伪选择器。

.skip-link {
  transform: translateY(-100%);
}

.skip-link:focus-within {
  transform: translateY(0%);
}

这意味着如果.skip-link元素内的任何内容都获得了焦点，那么我们就显示它。遗憾的是，Internet Explorer 和 Opera Mini 都不支持 focus-within，但它的覆盖范围相当不错，并且有可用的 polyfill。

我们需要做的最后一件事是确保我们的页脚元素上有一个 ID，以便链接可以跳转到某个位置。

<footer id="footer">

这将为我们提供以下内容

如果我们想更进一步（我鼓励这样做），我们可以为每个链接设置略微不同的样式，以便用户能够区分两者。此示例中的两个链接都是纯白色，这对于执行单个操作的单个按钮来说非常有效，但如果它们以不同的方式呈现，则可以更清楚地表明我们正在处理两个链接。

得出结论

您是否在您的网站上使用跳过链接？或者，如果没有，这是否说服您使用一个？我希望很清楚，在网站的可访问性方面，跳过链接是一个极具价值的补充。虽然它不是解决所有可访问性需求的灵丹妙药，但它确实解决了一些用例，从而带来更加完善的用户体验。

以下是一些使用此技术或类似技术的知名网站

• 亚马逊
• 大通银行
• 谷歌（不是跳过链接，而是提供辅助功能反馈的链接）
• 塔吉特
• 纽约时报
• Zillow