我应该在列表页面上的过滤器之前添加跳过链接吗？

Question

我在左侧为一组产品和一组过滤器设置了清单页面。 过滤器按源顺序显示在产品之前，因此在浏览页面时，它们将首先聚焦。

实际页面上大约有15种不同的可过滤选项，用户在到达所搜索的实际产品之前，必须先通过这些选项卡进行选择。

我是否应该在过滤器之前添加跳过链接，以将用户直接移动到列表中？

该页面的结构类似于以下内容（简化后在此处发布）：

<div id="products">
    <div class="filters">
        <input name="keyword" type="text" value="">

        <input name="price_min" type="number" value="0">
        <input name="price_max" type="number" value="0">
        <!-- ...and others -->
    </div>

    <div class="listing">

        <div class="product">
            <h3>Product name</h3>
            <p>Lorem ipsum dolor sit amet, consectetur...</p>
        </div> <!-- /.product -->

    </div> <!-- /.listing -->
</div> <!-- /#products -->

我在页面顶部设置了一个类似的跳过链接，该链接跳至主要内容-在这种情况下，下一个选项卡会将用户放在第一个过滤器输入上。

我看过其他一些大型零售商站点，它们似乎没有此功能，因此要求用户首先浏览所有过滤器。

Answer 1

跳过链接（正式称为“ 旁路块 ”）非常棒。 感谢您实施它们。 当您TAB进入网页或使用屏幕阅读器进行导航时，它们通常是您遇到的第一件事（在DOM中是第一件事）。

大多数时候，只有一个跳转链接可以跳转到主要内容，听起来您已经做到了。 但是，一开始可以有几个跳过链接，只是不要太过分。 也许3个跳过链接是我最多能做的。 因此，您可能会遇到这样的事情：

<a href="#main">skip to main</a>
<a href="#results">skip to results</a>

大多数跳过链接都是隐藏的，直到获得焦点为止。 如果执行此操作，并且有多个跳过链接，则每个链接在获得焦点时可以变为可见，而在失去焦点时会被隐藏（模糊）。 两个跳过链接实际上都可以在页面上的同一空间中。 也就是说，它们不必像您在普通导航菜单中看到的那样水平地互相跟随，因为您一次只能看到一个。 当您使用Tab键时 ，焦点下面的文本实际上会发生变化。

一种替代方法是仅具有一个跳过链接，而不是跳转到您认为是主要部分的部分（可能是或可能不是<main>元素或<div role =“ main”>），它可能会跳转到结果。 您基本上可以使跳过链接跳到您认为是页面“主要”或最重要部分的位置。

对于我很难推荐尝试哪种解决方案，因为我对您的页面的组织了解不多，但是您有两个选择。

Answer 2

大概，产品过滤选项对于使用辅助技术的人来说是有价值的，但是强迫人们在每次页面加载时都对这些选项进行审查也将是压倒性的。

一种选择可能是包括一个专用的跳转链接，用于“ 转到产品过滤器 ”或包含产品的页面上的类似内容。 然后，您可以有另一个用于“ 转到主要内容 ”。 跳转链接的数量没有限制，不过最好将链接的数量保持尽可能小（我建议不超过3个）。

另一个选择可能是在跳过链接之后包含过滤器，但是将其折叠在某种菜单中，用户需要先展开菜单才能访问它。 这将为访问者提供轻松绕过控件的选项。 如果使用Bootstrap，则Dropdown ， Collapse或Nav组件之类的东西可能会很好地工作。