带键盘的 j轮播 :使用 Tab 键的错误焦点

jCarousel with keyboard : wrong focus using the tab key

本文关键字：Tab 错误 使用 焦点 键盘 轮播      更新时间：2023-09-26

我正在使用 0.3 版本的 jQuery jCarousel 脚本在我正在处理的网页上显示三个轮播。这三个轮播工作得很好。

问题是：你不能使用键盘正确使用它们。

  1. 如果您按 Tab 键浏览页面，焦点将转到轮播中第一个项目的第一个链接，即使该项目不可见！(例如：单击其中一个轮播中的"下一步"链接，然后使用 Tab 键浏览：焦点将转到轮播中不可见的链接(。
  2. 如果您继续使用"tab"键，焦点将依次转到轮播中所有项目的所有链接。

取而代之的是：焦点应该转到第一个可见项目的第一个链接;然后，如果到达最后一个可见项目的最后一个链接，那么焦点应该离开轮播(实际上是它之外的下一个链接(。

一个解决方案可能是使用标签索引...但是页面的某些部分与网站的其他页面共享，所以我无法在所有页面的所有链接中使用 tabindex......

取而代之的是，我尝试了这样的事情：

$("#carousel-editos li a").focusin(function () { 
  $("#carousel-editos li.jcarousel-item-first .post-title a").focus(); 
  return false; 
});

但随后它会阻止进一步使用"选项卡"键......

我希望这是清楚的...感谢任何帮助！

我认为您需要组合您已经提供的答案。看起来你应该能够使用Javascript在HTML上动态设置你需要的tabbable属性(呵呵，新词(。我在想这样的事情：

  1. 在页面加载时，找到轮播界面中的所有可见项目。使用 jQuery 为选项卡周期中所需的每个项设置 tabindex 属性。
  2. 将tabindex属性分配给页面上要循环访问的所有其他链接。
  3. 添加一些 jQuery 以在用户更改轮播中的项目时修改tabindex属性(单击下一个/上一个按钮(。

如果你在jsFiddle中做了一个简化的例子，帮助你会容易得多。

在轮播创建结束和滚动结束功能上，您可以重置 .j轮播的内容，以便只有可见的轮播项目是"可选项卡的"。 我已经在我的代码中做到了这一点，如下所示：

var bannerSlider_scrollEnd = function(event, carousel) {
    var $carousel = carousel.element(),
        $items = carousel.items(),
        $bannerContent,
        $visibleItemsContent = carousel.visible().find('.bannerContent');
    $items.each(function (index) {
        $bannerContent = $(this).find('.bannerContent');
        disableTabbing($bannerContent);
    });
    reenableTabbing($visibleItemsContent);
    $visibleItemsContent.find(':focusable').eq(0).focus();
 };

disableTabbing($container)行和reenableTabbing($container)行是指我编码到我的网站中的帮助程序函数，它基本上找到给定容器中的所有:focusable元素，并将tabindex分别设置为"-1"，然后设置为"0"。

完成此过程后，用户将只能通过可见轮播项而不是所有轮播项进行 Tab 键操作。

相关文章：