Warning: file_get_contents(/data/phpspider/zhask/data//catemap/3/html/71.json): failed to open stream: No such file or directory in /data/phpspider/zhask/libs/function.php on line 167

Warning: Invalid argument supplied for foreach() in /data/phpspider/zhask/libs/tag.function.php on line 1116

Notice: Undefined index: in /data/phpspider/zhask/libs/function.php on line 180

Warning: array_chunk() expects parameter 1 to be array, null given in /data/phpspider/zhask/libs/function.php on line 181
Javascript 我应该在我的列表页面的过滤器之前添加跳过链接吗?_Javascript_Html_Accessibility - Fatal编程技术网

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

Javascript 我应该在我的列表页面的过滤器之前添加跳过链接吗?,javascript,html,accessibility,Javascript,Html,Accessibility,我有一个为一组产品设置的列表页面,左边有一组过滤器。过滤器出现在源代码顺序中的产品之前,因此在页面中使用Tab键时,它们首先被聚焦 真正的页面有大约15个不同的可过滤选项,用户在找到他们搜索的实际产品之前,必须通过标签进行筛选 我是否应该在过滤器前添加一个跳过链接,以便将用户直接移动到列表 页面结构类似于以下内容(简化后可在此处发布): 产品名称 我爱你,我爱你 我在页面顶部设置了一个类似的跳过链接,它会跳转到主要内容——在这种情况下,下一个选项卡会将用户放在第一个过滤器输入上 我看过其他一

我有一个为一组产品设置的列表页面,左边有一组过滤器。过滤器出现在源代码顺序中的产品之前,因此在页面中使用Tab键时,它们首先被聚焦

真正的页面有大约15个不同的可过滤选项,用户在找到他们搜索的实际产品之前,必须通过标签进行筛选

我是否应该在过滤器前添加一个跳过链接,以便将用户直接移动到列表

页面结构类似于以下内容(简化后可在此处发布):


产品名称
我爱你,我爱你

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

我看过其他一些大型零售商网站,它们似乎没有这项功能,要求用户首先通过所有过滤器进行标签操作。

跳过链接(正式名称为“”)非常棒。谢谢你实施了它们。它们通常是您在使用选项卡进入网页或使用屏幕阅读器导航时遇到的第一件事(DOM中的第一件事)

大多数时候,只有一个跳转链接可以跳转到主要内容,听起来你已经做到了。但是,您可以在开始时有几个跳过链接,只是不要过火。也许我最多只能跳过3个链接。所以你可以有这样的东西:

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

大多数跳过链接在收到焦点之前都是隐藏的。如果您正在这样做,并且您有多个跳过链接,则每个链接在接收到焦点时都会可见,然后在失去焦点(模糊)时隐藏。两个跳过链接可以实际位于页面上的同一空间中。也就是说,它们不必像您在普通导航菜单中看到的那样水平跟随,因为您一次只能看到一个。它本质上看起来就像当你点击标签时,焦点下面的文本发生了变化

另一种方法是只跳转一个链接,而不是跳转到你认为主要的部分(可能是也可能不是元素),它可以跳转到结果。基本上,您可以将跳过链接跳转到您认为是页面“主要”或最重要部分的内容


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

据推测,产品过滤选项对使用辅助技术的人来说很有价值,但强迫人们在每次页面加载时都要查看这些选项也会让人不知所措

一种选择是在包含产品的页面上包含“转到产品过滤器”或类似内容的专用跳过链接。然后,您可以为“转到主要内容”设置另一个。您可以拥有的跳过链接的数量没有限制,尽管可能最好保持尽可能小的数量(我建议3个或更少)

另一种选择是在跳过链接后包含过滤器,但将其折叠在某种菜单中,用户需要在访问之前展开该菜单。这将使访问者可以选择轻松绕过控制。如果您使用引导,像a、a或组件之类的东西可能会工作得很好