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

Question

I have a listing page set up for a group of products and a set of filters on the left. The filters appear before the products in the source order, therefore they are focused first when tabbing through the page.

The real page has about 15 different filterable options that the user will have to tab through before they arrive at the actual products they've searched for.

Should I add a skip link before the filters, to move users directly to the listing?

The structure of the page is similar to the below (simplified for posting here):

<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 -->

I've set up a similar skip link at the top of the page, which skips to the main content - in this case, the next tab would place the user on the first filter input.

I've had a look at some other large retailer sites and they don't appear to have this functionality, requiring the user to tab through all of the filters first.

Answer 1

Skip links (officially called " Bypass Blocks ") are fantastic. Thanks for implementing them. They are normally the very first thing you encounter (first in the DOM) when you TAB into the webpage or navigate with a screen reader.

Most of the time there is only one skip link to jump to the main content and it sounds like you've done that. However, you can have several skip links at the beginning, just don't go overboard. Perhaps 3 skip links is the max I would do. So you could have something like this:

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

Most skip links are hidden until they receive focus. If you're doing that and you have multiple skip links, then each link can become visible when it receives focus and then hidden when it loses focus (blurs). Both skip links can physically be in the same space on the page. That is, they don't have to follow each other horizontally like you would see in a normal navigation menu because you'll only see one at a time. It'll essentially look like when you tab , the text underneath your focus changed.

An alternative is to only have one skip link but instead of jumping to what you think is the main section (which may or may not be the <main> element or <div role="main">), it could jump to the results. You can basically make the skip link jump to what you think is the "main" or most important part of your page.

It's hard for me to recommend which solution to try because I don't know enough about the organization of your page, but you have two options.

Answer 2

Presumably, the product filtering options would be of value to people who use assistive technology, but forcing people to review these options on every page load would also be overwhelming.

One option could be to include a dedicated skip link for " go to product filter " or something similar on pages that contain products. You could then have another one for " go to main content ". There's no limit to the number of skip links you can have, although it's probably best to keep the number as small as possible (I'd recommend 3 or less).

Another option could be to include the filter after the skip link, but have it collapsed in some sort of a menu that the user would need to expand before it could be accessed. This would give visitors the option of easily bypassing the control. If you use Bootstrap, something like a Dropdown , a Collapse , or a Nav component would probably work quite well.