j帶鍵盤的卡通：使用標籤鍵錯誤對焦

Question

我使用的是jQuery jCarousel script的0.3版本，在the webpage I'm working on上顯示三個輪播。這三個傳送帶工作得很好。

問題是：您無法使用鍵盤正確使用它們。

1. 如果您通過網頁標籤，焦點將轉到第一個項目，在傳送帶上的第一個鏈接，即使這個項目是不可見的！ （例如：點擊其中一個輪播中的「下一個」鏈接，然後使用Tab鍵瀏覽：焦點將轉到輪播中不可見的鏈接）。
2. 如果您繼續使用「tab」鍵，焦點會連續轉到轉盤中所有項目的所有鏈接。

取而代之的是：重點應該放在第一個可見項目的第一個鏈接;那麼，如果到達最後一個可見項目的最後一個鏈接，那麼焦點應該在之外（實際上是它外面的下一個鏈接）轉到。

解決方案可能是使用tabindex ...但頁面的某些部分與網站的其他頁面共享，所以我不能在所有頁面的所有鏈接中使用tabindex ...

取而代之的是，我曾試圖這樣的事情：

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

但隨後阻止任何進一步的使用「Tab」鍵的...

我希望這是明確的...爲感謝名單任何幫助！

Answer 1

我認爲你需要結合你已經提供的答案。看起來你應該可以使用Javascript來動態設置HTML中的tabindex屬性，你需要將其設置爲tabbable（heh，new word）。我正在考慮這樣的事情：

1. 在頁面加載時，查找傳送帶中的所有可見項目。使用jQuery爲標籤週期中的每個項目設置tabindex屬性。
2. 將tabindex屬性分配給您要循環訪問的頁面上的所有其他鏈接。
3. 當用戶更改傳送帶中的項目（單擊下一個/上一個按鈕）時，添加一些jQuery以修改tabindex屬性。

如果您在jsFiddle中作了簡化示例，那麼幫助您會容易得多。

Answer 2

在傳送帶createEnd和scrollEnd函數上，您可以重置.jCarousel的內容，以便只有可見傳送帶物品是「可放置」的。我這樣做，是在我的代碼如下：

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

完成此過程後，用戶將僅通過可見輪播物品而不是所有輪播物品留下標籤。