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

Question

我为一组产品设置了一个列表页面，并在左侧设置了一组过滤器。过滤器按源顺序显示在产品之前，因此在通过页面进行 Tab 键切换时它们首先获得焦点。

真实页面大约有 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时，焦点下方的文本发生了变化。

另一种方法是只有一个跳过链接，而不是跳转到您认为的主要部分(可能是也可能不是

元素或

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

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

关于javascript - 我应该在列表页面上的过滤器之前添加跳过链接吗？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/54348900/