如何创建'跳过内容”链接

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

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

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

<a href="https://www.php.cn/link/3292c5c2ca71351a9406a9614e147ad3">
  跳至内容
</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%);
}

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

现在，让我详细说明一下，从迈尔斯·戴维斯的这句名言开始：

时间不是主要因素，它是唯一因素。

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

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

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

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

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

我们的示例网站

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

该网站有许多导航链接，但为了节省时间，只有两个页面：“主页”和“博客页面”。这足以让我们了解事情是如何运作的。

确定问题

以下是我们正在使用的导航：

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

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

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

创建链接

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

<a href="https://www.php.cn/link/3292c5c2ca71351a9406a9614e147ad3">跳至内容</a>

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

<a href="https://www.php.cn/link/3292c5c2ca71351a9406a9614e147ad3">跳至内容</a>

<main></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 {
  /* 与之前相同 */
  transition: transform 0.3s;
}

它现在将转换到视图中，这使得它更好一些。

您现在（希望）应该拥有我下面的内容：

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

使用多个链接是可以的！

目前，该链接只服务于一个目的，那就是跳过到我们网站的内容。但我们不必止步于此。

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

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

因此，让我们添加第二个链接，它绕过所有自动加载业务，并将用户直接跳转到页面上的 https://www.php.cn/link/8248f16fa738b0bfe6013edf69d873bf 元素。

<div>
  跳至 <a href="https://www.php.cn/link/3292c5c2ca71351a9406a9614e147ad3">内容</a> 或 <a href="https://www.php.cn/link/8248f16fa738b0bfe6013edf69d873bf">页脚</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。

此浏览器支持数据来自 Caniuse，其中包含更多详细信息。数字表示浏览器在该版本及更高版本中支持该功能。

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

<footer id="footer"></footer>

这就是这给我们带来的结果：

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

跳到结论

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

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

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

以上是如何创建'跳过内容”链接的详细内容。更多信息请关注PHP中文网其他相关文章！