深入跳过内容的深入研究

许多电脑用户使用鼠标浏览网页，但也有不少人依赖键盘操作。理论上，使用键盘浏览网页不成问题——按TAB键在可聚焦元素间移动，再按ENTER键激活，简单易行！然而，许多（如果不是大多数）网站顶部都有一个链接菜单，有时需要多次按键才能到达目标内容。例如，瑞士最大的新闻网站之一20min的首页，要阅读头条新闻，可能需要近40次按键——这可不是最佳用户体验。

因此，为了让键盘用户真正使用您的网站，而不是感到厌烦而离开，您需要在幕后做一些工作，使直接跳到主要内容更快、更容易。您可以找到各种各样的技巧散布在网络上（包括在CSS-Tricks），但大多数都忽略了一些技巧，许多推荐使用过时或已弃用的代码。因此，在本文中，我将深入探讨跳过内容，并以2021年友好的方式涵盖所有内容。

两种类型的键盘用户

尽管人们使用各种类型的键盘或等效开关设备进行导航，但从编码的角度来看，我们只需要考虑两组用户：

• 使用键盘结合屏幕阅读器（例如PC上的NVDA或JAWS，或Mac上的VoiceOver）朗读屏幕内容的用户。这些设备通常由视力障碍较严重的人使用。
• 所有其他键盘用户。

我们的跳过内容技术需要同时满足这两组用户的需求，而不会妨碍鼠标用户。我们将使用两种互补的技术来获得最佳结果：地标和跳过链接。

查看一个基本示例

我创建了一个名为Style Magic的示例网站来说明我们将要介绍的技术。我们将从对鼠标用户来说运行良好的状态开始，但对于使用键盘的用户来说却有点麻烦。您可以在CodePen上找到基本网站以及每种技术的版本，并且由于在CodePen上测试键盘导航有点棘手，您也可以在这里找到独立版本。

尝试使用TAB键导航此示例。（在独立页面上更容易；TAB键在链接之间移动，SHIFT TAB键向后移动。）您会发现它还不错，但这仅仅是因为菜单项不多。

如果您有时间并且使用的是Windows系统，我还建议您下载NVDA屏幕阅读器的免费副本，并使用它尝试所有示例，并参考WebAIM的概述以了解使用方法。大多数Mac用户已经可以使用VoiceOver屏幕阅读器，WebAIM也有一个关于如何使用它的很好的介绍。

添加地标

屏幕阅读软件可以做的一件事是显示他们在网页上找到的地标列表。地标代表页面上的重要区域，用户可以调出该列表，然后直接跳转到其中一个地标。

如果您使用的是带有完整键盘的NVDA，则按INS F7调出“元素列表”，然后按ALT d显示地标。（您可以使用Web项目转子在VoiceOver上找到类似的列表。）但是，如果您在示例站点上这样做，则只会看到一个无用的空列表。

让我们先解决这个问题。

添加地标非常容易，如果您使用的是HTML5，您可能已经在您的网站上使用了它们而没有意识到，因为它们直接链接到HTML5语义元素（<h1></h1>到<h6></h6>，<main></main>，等等）。

以下是用于生成站点标题部分的HTML的修改前后示例：

<div>
  <div>
    <div><a href="https://www.php.cn/link/93ac0c50dd620dc7b88e5fe05c70e15b">Style Magic</a></div>
    <div>
      <a href="https://www.php.cn/link/93ac0c50dd620dc7b88e5fe05c70e15b">Home</a>

      </div>
  </div>
</div>

变为

<header>
 <a href="https://www.php.cn/link/93ac0c50dd620dc7b88e5fe05c70e15b">Style Magic</a><nav aria-label="Main menu"><a href="https://www.php.cn/link/93ac0c50dd620dc7b88e5fe05c70e15b">Home</a>

    </nav></header>

使用的类保持不变，因此我们不需要对CSS进行任何更改。

以下是我们需要在示例站点中进行的更改的完整列表：

• 页面顶部表示标题的<div>现在是一个<code><header></header>元素。
• 包含品牌的<div>现在是一个<code><header></header>元素。
• 包含菜单的两个<div>已被<code><nav></nav>元素替换。
• 两个新的<nav></nav>元素已获得一个aria-label属性，该属性描述了它们：页面顶部的菜单为“主菜单”，页面底部的菜单为“实用程序菜单”。
• 包含页面主要内容的
  现在是一个<main></main>元素。
• 表示页面底部页脚的<div>现在是一个<code><footer></footer>元素。您可以在CodePen上查看完整的更新后的HTML。

  让我们再次尝试NVDA中的地标列表技巧（INS F7然后ALT d——这是独立页面的链接，您可以自行测试）：

  太棒了！我们现在有了横幅地标（映射到<header></header>元素）、主菜单；导航（映射到顶部的<nav></nav>元素，并显示我们的aria-label）、主内容（映射到<main></main>）和内容信息（映射到<footer></footer>）。在这个对话框中，我可以使用TAB键和光标键选择主地标并直接跳到页面的内容，或者更好的是，我可以在浏览页面时按D键从一个地标角色直接跳转到下一个。JAWS屏幕阅读器的用户更容易——他们在浏览时只需按Q键即可直接跳转到主地标。

  作为额外的好处，使用语义元素还可以帮助搜索引擎更好地理解和索引您的内容。这是使网站更易访问的一个不错的额外好处。

  添加跳过链接

  我希望您此时正坐在那里想“工作完成了”。好吧，我恐怕总是有一个“但是”需要考虑。早在2011年，谷歌就对使用CTRL f在网页中搜索进行了研究，发现惊人的90%的人要么不知道它存在，要么从未使用过它。当涉及到地标时，使用屏幕阅读器的用户行为大致相同——他们中的很大一部分根本不使用此功能，即使它非常有用。因此，我们将向我们的网站添加一个跳过链接，以帮助这两组用户以及所有不使用屏幕阅读器的键盘用户。

  良好的跳过链接的基本要求是：

  • 当需要时，它应该对所有键盘用户（包括屏幕阅读器用户）可见。
  • 它应该向键盘用户提供足够的信息来解释它的作用。
  • 它应该在尽可能广泛的当前浏览器上运行。
  • 它不应该干扰鼠标用户的浏览。

  步骤1：改进键盘焦点外观

  首先，我们将提高整个网站上键盘焦点的可见性。您可以将键盘焦点视为在文字处理器中编辑文本时光标位置的等效项。当您使用TAB键导航时，键盘焦点会在链接（或表单控件）之间移动。

  最新的网络浏览器在显示键盘焦点的位置方面做得相当不错，但仍然可以从帮助中受益。有很多创造性的方法可以设置焦点环的样式，尽管我们的目标是使其比任何东西都更突出。

  我们可以使用:focus伪类进行样式设置（并且最好将相同的样式也应用于:hover，我们已经在示例站点上这样做了——CodePen，实时站点）。这是我们至少可以做的，尽管通常会更进一步，并在整个页面上的:focus上反转链接颜色。

  以下是我们的:focus状态的一些CSS（我们已经为:hover提供的代码副本）：

  a:focus { /* 整个页面的通用规则 */
    border-bottom-color: https://www.php.cn/link/93ac0c50dd620dc7b88e5fe05c70e15b1295e6;
  }
  .menu-right a:focus,
  .branding a:focus {
    /* 反转标题和页脚中链接的颜色 */
    background-color: white;
    color: https://www.php.cn/link/93ac0c50dd620dc7b88e5fe05c70e15b1295e6;
  }

  步骤2：添加HTML和CSS

  最后的更改是将跳过链接本身添加到HTML和CSS中。它由两部分组成：触发器（链接）和目标（地标）。这是我推荐用于触发器的HTML，它位于页面开头<header></header>元素内部：

  <a href="https://www.php.cn/link/93ac0c50dd620dc7b88e5fe05c70e15bskip-link-target" class="text-assistive display-at-top-on-focus">Skip to main content.</a>
  

  这是目标的HTML，它直接放置在<main></main>内容的开头之前：

  <a id="skip-link-target" class="text-assistive" href="https://www.php.cn/link/93ac0c50dd620dc7b88e5fe05c70e15bskip-link-target">Start of main content.</a>
  
  <main></main>

  以下是HTML的工作原理：

  • 跳过链接触发器使用标准页面片段（href="https://www.php.cn/link/93ac0c50dd620dc7b88e5fe05c70e15bskip-link-target"）链接到跳过链接目标，该片段引用目标（<a></a>）的id属性。按照链接会将键盘焦点从触发器移动到目标。
  • 我们链接到一个锚点（<a></a>）元素，而不是直接向<main></main>元素添加id属性，原因有两个。首先，它避免了键盘焦点无法正确移动的任何问题（这在某些浏览器中可能是一个问题）；其次，这意味着我们可以向用户提供清晰的反馈，以表明跳过链接已成功。
  • 两个链接的文本具有描述性，以便清楚地向用户解释正在发生的事情。

  我们现在有了一个功能正常的跳过链接，但是有一个问题：每个人都能看到它。我们将使用CSS默认情况下将其隐藏，这可以使它不会妨碍鼠标用户，然后只有当它接收到键盘焦点时才会出现。有很多方法可以做到这一点，大多数方法都可以，但是有一些错误的方法你应该避免：

  • 应该：使用clip-path使链接不可见，或使用transform: translate或position: absolute将其定位到屏幕外。
  • 不应该：使用display: none，visibility: hidden，hidden属性，或将跳过链接的宽度或高度设置为零。所有这些都会使您的跳过链接对一类或两类键盘用户都不可用。
  • 不应该：使用clip，因为它已弃用。

  这是我推荐用于隐藏这两个链接的代码。使用clip-path及其前缀的-webkit-版本在撰写本文时可以覆盖96.84%的用户，这（在我看来）对于大多数网站和用例来说是可以的。如果您的用例需要，还有许多其他技术可供使用，这些技术在WebAIM上有详细介绍。

  .text-assistive {
    -webkit-clip-path: polygon(0 0, 0 0, 0 0, 0 0);
    clip-path: polygon(0 0, 0 0, 0 0, 0 0);
    box-sizing: border-box;
    position: absolute;
    margin: 0;
    padding: 0;
  }

  为了在它们获得焦点时显示链接，我建议使用此CSS的版本，颜色和大小与您的品牌相匹配：

  .text-assistive.display-at-top-on-focus {
    top: 0;
    left: 0;
    width: 100%;  
  }
  .text-assistive.display-at-top-on-focus:focus {
    -webkit-clip-path: none;
    clip-path: none;
    z-index: 999;
    height: 80px;
    line-height: 80px;
    background: white;
    font-size: 1.2rem;
    text-decoration: none;
    color: https://www.php.cn/link/93ac0c50dd620dc7b88e5fe05c70e15b1295e6;
    text-align: center;
  }
  https://www.php.cn/link/93ac0c50dd620dc7b88e5fe05c70e15bskip-link-target:focus {
    background: https://www.php.cn/link/93ac0c50dd620dc7b88e5fe05c70e15b084367;
    color: white;
  }

  这为在页面顶部提供触发器和目标的非常可见的显示，用户期望在加载页面后直接在该处看到键盘焦点。当您按照链接时，还会更改颜色，以提供清晰的反馈，表明某些事情已经发生。您可以在CodePen（如下所示）上自己修改代码，并在独立页面上使用NVDA进行测试。

  进一步改进

  跳过链接不仅仅用于圣诞节您的主菜单，每当您的网页包含很长的链接列表时，它们都很有用。事实上，此CodePen演示了在页面内容中使用跳过链接的一种好方法（此处为独立页面），使用CSS中的transform: translateY()来隐藏和显示触发器和目标。如果您处于需要支持旧版浏览器的“幸运”位置，那么这里有一个关于此的技巧（此处为独立页面）。

  让我们检查一下！

  最后，这里有一些简短的视频演示跳过链接对我们两类键盘用户如何工作。

  以下是使用NVDA屏幕阅读器时完成的跳过链接的工作方式：（此处应嵌入视频）

  以下是再次使用键盘浏览而无需屏幕阅读器时的情况：（此处应嵌入视频）

  我们刚刚查看了我认为在2021年可访问跳过链接的现代方法。我们在更新它们以适应更好的CSS实践、改进键盘用户的UI以及改进使用屏幕阅读器的用户的体验（感谢更新的HTML方法）的同时，借鉴了过去示例中的一些想法。