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

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

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

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

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

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

另一种选择是仅具有一个跳过链接，而不是跳转到您认为是主要部分的部分（可能是或不是

元素或

），它可能会跳转结果。您基本上可以使跳过链接跳转到您认为页面的“主要”或最重要部分的内容。

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

答案 1 :(得分：0)

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

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

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

Answer 2

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

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

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