키보드가있는 jCarousel : 탭 키를 사용하여 포커스가 잘못되었습니다.

Question

jQuery jCarousel script의 0.3 버전을 사용하여 the webpage I'm working on에 3 개의 캐 러셀을 표시합니다. 그 3 개의 회전 장치는 잘 작동합니다.

문제는 키보드를 사용하여 올바르게 사용할 수 없다는 것입니다. 당신이 페이지를 통해 탭, 초점이 회전 목마의 첫 번째 항목의 첫 번째 링크로 이동하면

1. 것은 경우에도이 항목이 표시되지 않습니다! 예를 들어 캐 러셀 중 하나에서 '다음'링크를 클릭 한 다음 탭 키를 사용하여 찾아보기 : 초점은 캐 러셀 내부에 표시되지 않는 링크로 이동합니다.
2. "탭"키를 계속 사용하면 회전식 캐 러셀의 모든 항목에 대한 링크가 차례로 표시됩니다.

대신 첫 번째 표시 항목의 첫 번째 링크 으로 포커스를 이동해야합니다. 마지막으로 보이는 항목의 마지막 링크에 도달하면 포커스는 에서 (캐랙터 밖의 다음 링크)이되어야합니다.

용액의 tabindex를 사용하는 수 ...하지만 페이지의 일부는 웹 사이트의 다른 페이지를 공유하는, 그래서 난 그냥 ...

내 모든 페이지의 모든 링크에 tabIndex를 사용할 수 없습니다 이 같은 대신 그

, 내가 시도했던 것들 : 나는 희망

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

하지만 그것은 "탭"키를 더 이상 사용을 방지 ...

이 ... 고맙습니다 분명하다 어떤 도움이라도!

Answer 1

나는 당신이 이미 제공 한 답변들의 조합이 필요하다고 생각합니다. Javascript를 사용하여 tabbable (heh, new word)이어야하는 HTML에서 tabindex 속성을 동적으로 설정할 수 있어야합니다. 나는 다음과 같은 것을 생각하고있다.

1. 페이지가로드 될 때, 캐 러셀에 보이는 모든 항목을 찾는다. jQuery를 사용하여 탭 사이클에서 원하는 각 항목에 대해 tabindex 속성을 설정하십시오.
2. 순환하려는 페이지의 다른 모든 링크에 tabindex 속성을 지정하십시오.
3. 사용자가 캐 러셀에서 항목을 변경할 때 (다음/이전 버튼 클릭) tabindex 속성을 수정하려면 jQuery를 추가하십시오.

jsFiddle에서 간단한 예를 만든 경우 도움이 될 것입니다.

Answer 2

캐 러셀 createEnd 및 scrollEnd 함수에서 .jCarousel의 내용을 재설정하여 보이는 회전식 항목 만 "tabbable"이되도록 할 수 있습니다. 다음과 같이 내 코드에서 그 짓을 :

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"이됩니다.

이 과정이 끝나면 모든 캐 러셀 항목 대신 가시적 인 회전 목마 항목을 통해서만 탭을 남깁니다.