跳过导航为什么“跳过导航”链接很重要！

不久前，我得到了一个从事无障碍功能实施工作的机会。我的一位同事Nawaz Khan， a11y 专家，请我为页面实现 SkipNav。“跳过导航”链接对我来说是一个全新的概念，我找到了一个不错的实现方案，或许能帮助所有关注无障碍功能和可用性的人。在本文中，我想讨论一下没有跳过导航链接会有什么问题，以及如何为我们的网站或应用程序构建跳过导航链接。

问题：

浏览一下https://www.nytimes.com/，看看页眉、侧边栏、页脚等中有多少个链接？

主要内容通常不是网页上的第一部分。键盘和屏幕阅读器用户通常必须浏览一长串导航链接、链接子列表、公司图标、网站搜索和其他元素，才能到达主要内容。

如何在不访问所有标题导航链接的情况下导航到主要内容？
如何避免在导航到另一个页面时访问每个页面的所有链接。

解决方案是“跳过导航”链接

解决方案：

一般来说，跳过导航链接会放在网站的第一个或第二个链接中，以便用户在几个选项卡中轻松导航到主要内容或所需部分。我们可能已经看到过许多不同的方法来解决这个问题，但我看到下面两种方法被广泛使用

在页面顶部提供可见的链接
使链接不可见，直到获得键盘焦点

我们将讨论第二种方法及其实施。

我们来看看https://www.nytimes.com/是如何直观地解决这个问题的。

正如您在剪辑中看到的，当链接获得键盘焦点时，显示跳过导航链接。

太棒了。现在看看用户是如何导航到网站的索引部分的，这个部分在网站中的位置很靠后。

让我们借助 CSS 和 React 实现相同的功能。

这里我们仅通过 CSS 中的:focus伪选择器控制链接切换逻辑，如下所示。我们通常会隐藏元素，然后只有当链接元素获得焦点时才会在屏幕上显示链接。请注意，我们没有使用display: none或visibility: hidden，因为它们会使其无法访问。从技术上讲，这些类型的元素（应用了display: none和visibility: hidden）不属于可访问性树。因此，我们使用了clip CSS 属性。

.skip-nav-link {
    border: 0;
    clip: rect(0 0 0 0);
    height: 1px;
    margin: -1px;
    overflow: hidden;
    padding: 0;
    position: absolute;
    width: 1px;
}

.skip-nav-link:focus {
    background: white;
    clip: auto;
    height: auto;
    left: 10px;
    padding: 1rem;
    position: fixed;
    top: 0px;
    width: auto;
    z-index: 1001;
}

React 的实现非常简单，而且不言自明。SkipNavLink和SkipNavContent这两个组件做得更好。


export const SkipNavLink = ({ id, children = 'Skip to content', ...props }) => {
  return (
    <a {...props} href={`#${id}`} className="skip-nav-link">
      {children}
    </a>
  );
};

export const SkipNavContent = ({ id, ...props }) => {
  return <div id={id} {...props} />;
};

以下是组件的用法

...
<SkipNavContent id="main-content">
    <main>
        Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
        tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
        quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
        consequat. Duis aute irure dolor in reprehenderit in voluptate velit ease
    </main>
</SkipNavContent>
...

ReactDOM.createPortal(
    <React.Fragment>
        <SkipNavLink id="main-content">
            Skip to main
        </SkipNavLink>
        <SkipNavLink id="sitemap-links">
            Skip to sitemap
        </SkipNavLink>
    </React.Fragment>,
    document.getElementById('skip-links-root')!
)

大致了解一下我们的 HTML 页面是如何布局的。

<body>
    <div class="wrapper">
        <div id="skip-links-root">
            <!-- Skip Nav links -->
        </div>
        <header>
            <nav>
                <!-- Nav links -->
            </nav>
        </header>
        <div id="root">
            <!-- React content goes here -->
        </div>
    </div>
</body>

请花一点时间思考一下这些微小的改变如何能够大大改善用户体验。

就是这样。

祝您 Tab 愉快⌨️！❤️

参考：

https://webaim.org/techniques/skipnav/

文章来源：https://dev.to/rajajaganathan/why-skip-nav-link-is-important-14bc