最近，我选择了一个Logitech K380键盘，可与MacBook Air一起使用。我尝试仅使用键盘向网页播放网页，我不得不说，对于支持“跳过主内容”链接的网站，体验要好得多。
所以我有渴望在我的个人网站上添加一个，因为我开始更多地潜入网络可访问性的东西。
html
显然我们需要在网页开头添加此链接，因此它是键盘和屏幕读取器用户访问的第一批项目之一。
<body>
<a href="#maincontent">Skip to main content</a>
<header></header>
<main id="main-content"></main>
<footer></footer>
</body>
以及光滑的卷轴bebavior，以增强视力人的体验。
html {
scroll-behavior: smooth;
}
下一步是在视觉上隐藏此链接，直到用户用键盘导航为止。
根据Webaim上的Skip Navigation Links，要由所有键盘用户（尤其是视力键盘用户）使用，链接必须：
：- 被默认隐藏
- 键盘导航可以访问
- 当专注于重点时，变得显着可见
- 激活时将重点设置为主要内容区域
有很多CSS技术可以在视觉上隐藏内容，techniques for hiding content是您不想跳过的很棒的文章：）
CSS
当此链接通过键盘焦点，通过更改outline-color和outline-offset，我们可以采用默认浏览器样式的优势。
.skip-to-content {
position: fixed;
top: 1rem;
left: 1rem;
z-index: -1;
padding-inline: 1.75ch;
padding-block: .75ch;
border-radius: .5ch;
background: var(--accent-color);
color: white;
font-weight: bold;
opacity: 0;
}
.skip-to-content:focus-visible {
outline-color: var(--accent-color, #7044e8);
outline-style: solid;
outline-width: 2px;
outline-offset: 3px;
opacity: 1;
z-index: 999;
}
您可以通过使用键盘导航在我的网站https://heybran.cn上实时尝试。