虽然大多数人在电脑上浏览网页时都使用鼠标，但许多人却依赖键盘。理论上，用键盘使用网页应该不成问题--按TAB键将键盘焦点从一个可关注的元素移动到下一个元素，然后按ENTER键激活，很简单！但是，许多（如果不是大多数）网站往往在页面顶部有一个链接菜单，有时需要花费大量时间。然而，许多（如果不是大多数）网站往往在页面的顶部有一个链接菜单，有时需要按很多键才能到达你想要的内容。以20min的主页为例，这是瑞士最大的新闻网站之一。你想阅读头条新闻吗？那将是按40次键的最好部分--这不是对任何人时间的最佳利用。
因此，如果你想让键盘用户真正使用你的网站，而不是感到无聊而去别的地方，你需要在幕后做一些工作，使直接跳到你的主要内容更快，更容易。你可以在网上找到各种各样的技术（包括在CSS-Tricks这里），但大多数都缺少一两个技巧，而且许多人建议使用过时的或废弃的代码。因此，在这篇文章中，我将深入探讨跳转到内容的问题，并以2021年的友好方式涵盖一切。
两种类型的键盘用户
尽管人们用于导航的键盘或同等开关设备的确切类型有许多不同，但从编码的角度来看，我们只需要考虑两类人：
我们的跳过内容技术需要迎合这两个群体，同时不妨碍所有的鼠标使用者。我们将使用两种互补的技术来获得最佳效果：地标和跳过链接。
看一个基本的例子
我创建了一个实例网站，我称之为_Style Magic_，以说明我们所涉及的技术。我们将从它的状态开始，这个状态对鼠标使用者来说很好，但对使用键盘的人来说就有点麻烦了。你可以在CodePen上找到这个系列中每个技术的基本站点和版本，由于在CodePen上测试键盘导航有点困难，你也可以在这里找到独立的版本。
尝试使用TAB键来导航这个例子。(在独立页面上更容易，TAB键可以从一个链接移动到下一个链接，SHIFT+TAB键可以倒退。)你会发现这不是_太_糟糕，但只是因为没有很多菜单项。
如果你有时间，而且是在Windows上，我也鼓励你下载一个免费的NVDA屏幕阅读器，也用它来尝试所有的例子，参考WebAIM的使用概述。大多数使用Mac的人已经有了VoiceOver屏幕阅读器，WebAIM也有一个很好的使用它的介绍。
添加地标
读屏软件可以做的一件事是显示他们在网页上发现的地标列表。地标代表了一个页面的重要区域，用户可以拉出这个列表，然后直接跳到这些地标中的一个。
如果你使用全键盘的NVDA，你敲击INS+F7来调出 "元素列表"，然后ALT+d来显示地标。(你可以通过使用网络项目旋转器在VoiceOver上找到一个类似的列表。)不过，如果你在示例网站上这样做，你只会看到一个毫无帮助的空列表。
NVDA中令人失望的空地标列表
让我们首先解决这个问题。
添加地标是非常容易的，而且，如果你使用的是HTML5，你可能已经在你的网站上有了它们而没有意识到，因为它们直接与HTML5语义元素（<header>,<main>,<footer>, 等等）相联系。
下面是用于生成网站标题部分的HTML的前后对比。
<div class="bg-dark">
<div class="content-width flex-container">
<div class="branding"><a href="#">Style Magic</a></div>
<div class="menu-right with-branding">
<a href="#">Home</a>
<!-- etc. -->
</div>
</div>
</div>
成为
<div class="bg-dark">
<header class="content-width flex-container">
<section class="branding"><a href="#">Style Magic</a></section>
<nav aria-label="Main menu" class="menu-right with-branding">
<a href="#">Home</a>
<!-- etc. -->
</nav>
</header>
</div>
所使用的类保持不变，因此我们完全不需要对CSS进行任何修改。
下面是我们在示例网站中需要做的改动的完整列表：
- 表示页面顶部的标题的
<div>，现在是一个<header>元素_。_ - 包含品牌标志的
<div>现在是一个<section>元素。 - 两个包含菜单的
<div>已经被替换成<nav>元素。 - 这两个新的
<nav>元素已经被赋予了一个描述它们的aria-label属性。页面顶部的菜单为 "主菜单"，而页面底部的菜单为 "实用菜单"。 - 包含页面主要内容的
<div>现在是一个<main>元素。 - 表示页面底部页脚的
<div>，现在是一个<footer>元素。
你可以在CodePen上看到完整的更新的HTML。
让我们再试试NVDA中的地标列表技巧（INS+F7然后ALT+d--这里有独立页面的链接，你可以自己测试）。
为地标欢呼!
太好了!我们现在有了banner 地标（映射到<header> 元素），Main menu; navigation （映射到顶部的<nav> 元素，并显示我们的aria-label ），main （映射到<main> ）和content info （映射到footer ）。在这个对话框中，我可以使用TAB 和光标键来选择main 地标，并直接跳到页面的内容，或者更好的是，我可以在浏览页面时直接按下D 键，从一个地标角色直接跳到下一个。使用JAWS屏幕阅读器的用户就更容易了--他们可以在浏览时简单地按下Q ，直接跳到main 地标。
作为一个额外的好处，使用语义元素也有助于搜索引擎更好地理解和索引您的内容。这是使网站更易于访问的一个不错的小好处。
添加一个跳过链接
我估计，在这一点上，你正坐在后面想 "工作完成"。那么，恐怕总有一个 "但是 "需要考虑。谷歌早在2011年就对使用CTRL+f在网页中搜索的情况做了一些研究，发现90%的人要么不知道它的存在，要么从未使用过它。当涉及到地标时，使用屏幕阅读器的用户也有同样的表现--他们中的很大一部分人根本不使用这个功能，尽管它非常有用。因此，我们要在我们的网站上添加一个跳过链接，以帮助这两个群体以及所有那些不使用屏幕阅读器的键盘用户。
什么是好的跳转链接的基本要求是：
- 当需要时，它应该能被所有的键盘用户（包括屏幕阅读器用户）感知。
- 它应该向键盘用户提供足够的信息来解释它的作用。
- 它应该在尽可能多的当前浏览器上工作。
- 它不应该干扰鼠标用户的浏览。
第一步：改进键盘焦点的外观
首先，我们要改善整个网站的键盘焦点的可见性。你可以把键盘焦点想象成相当于你在文字处理器中编辑文本时光标的位置。当你使用TAB键进行导航时，键盘焦点会从一个链接移动到另一个链接（或表单控件）。
最新的网络浏览器在显示键盘焦点的位置方面做得很好，但仍然可以从帮助中受益。有很多创造性的方法来设计焦点环，尽管我们的目标是让它更突出。
我们可以使用:focus 伪类来进行样式设计（将同样的样式应用到:hover ，这是一个好主意，我们已经在示例网站--CodePen，实时网站上做过了）。这是我们能做的最起码的事情，尽管在整个页面上进一步反转:focus 的链接颜色是很常见的。
这是我们的:focus 状态的一些CSS（是我们已经有的:hover 的副本）。
a:focus { /* generic rule for entire page */
border-bottom-color: #1295e6;
}
.menu-right a:focus,
.branding a:focus {
/* inverted colors for links in the header and footer */
background-color: white;
color: #1295e6;
}
第二步：添加HTML和CSS
最后的改动是将跳过链接本身添加到HTML和CSS中。它由两部分组成，触发器（链接）和目标（地标）。下面是我为触发器推荐的HTML，放在页面的开始部分，就在<header> 元素的里面。
<header class="content-width flex-container">
<a href="#skip-link-target" class="text-assistive display-at-top-on-focus">Skip to main content.</a>
<!-- etc. -->
</header>
这里是目标的HTML，直接放在<main> 内容的开始之前。
<a href="#skip-link-target" class="text-assistive display-at-top-on-focus" id="skip-link-target">Start of main content.</a>
<main class="content-width">
<!-- etc. -->
</main>
以下是HTML的工作原理：
- 跳过链接的触发器通过一个标准的页面片段（
href="#skip-link-target"）链接到跳过链接的目标，该片段引用了目标（id="skip-link-target"）的id属性。跟随链接将键盘焦点从触发器移到目标上。 - 我们链接到一个锚(
<a>)元素，而不是直接将id属性添加到<main>元素上，有两个原因。首先，它避免了键盘焦点不能正确移动的问题（这在某些浏览器中可能是个问题）；其次，它意味着我们可以向用户提供清晰的反馈，以显示跳过链接的效果。 - 这两个链接的文本是描述性的，以便向用户清楚地解释正在发生什么。
我们现在有了一个有效的跳过链接，但有一个问题：它对所有人都是可见的。我们将使用CSS在默认情况下隐藏它，使它不被鼠标使用者看到，然后让它在收到键盘焦点时才出现。有很多方法可以做到这一点，其中大部分都可以，但有几个错误的方法你应该避免。
- 做： 使用
clip-path，使链接不可见，或者使用transform: translate或position: absolute，将其置于屏幕之外。 - 不要： 使用
display: none，visibility: hidden，hidden属性，或将跳过链接的width或height设为零。所有这些都会使你的跳过链接对一个或两个类别的键盘用户来说无法使用。 - 不要 ： 使用
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: #1295e6;
text-align: center;
}
#skip-link-target:focus {
background: #084367;
color: white;
}
这提供了一个非常明显的触发器和目标的显示，就在用户期望在加载页面后直接看到键盘焦点的页面顶部。当你跟踪链接时，颜色也会发生变化，以提供明确的反馈，表明事情已经发生。你可以在CodePen上自己摆弄代码（如下图所示），并在独立页面上用NVDA测试。
更进一步
跳过链接不仅仅是为了圣诞节你的主菜单，只要你的网页有一长串的链接，它们就很有用。事实上，这个CodePen演示了在你的网页内容中跳过链接的好方法（这里是独立页面），在CSS中使用transform: translateY() 来隐藏和显示触发器和目标。如果你处于需要支持旧版浏览器的 "幸运 "位置，那么你在这个CodePen上有一个技术（独立的页面在这里）。
