0

I'm using the 0.3 version of the jQuery jCarousel script to display three carousels on the webpage I'm working on. Those three carousels work just fine.

The trouble is : you can't use them properly using the keyboard.

  1. If you tab through the page, the focus goes to the first link of the first item in the carousel, even if this item is not visible ! (For example : click on a "next" link in one of the carousels, then use the tab key to browse : the focus will go to a link which is not visible inside of the carousel).
  2. If you keep using the "tab" key, the focus will successively go to all the links of all the items in the carousel.

Instead of that : the focus should go to the first link of the first visible item ; then, if the last link of the last visible item is reached, then the focus should go out of the carousel (the next link outside of it, in fact).

A solution could be to use tabindex... but some parts of the page are shared with other pages of the website, so I just can't use tabindex in all the links of all my pages...

Instead of that, I had tried things like this :

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

but then it prevents any further use of the "tab" key...

I hope this is clear... Thanx for any help !

RustyTheBoyRobot
  • 5,891
  • 4
  • 36
  • 55
user1296220
  • 3
  • 3

2 Answers2

0

I think you need a combination of the answers that you've already provided. It seems like you should be able to use Javascript to dynamically set tabindex attributes on the HTML that you need to be tabbable (heh, new word). I'm thinking of something like this:

  1. On page load, find all visible items in the carousel. Use jQuery to set the tabindex property for each item that you want in the tab cycle.
  2. Assign tabindex properties to all other links on the page that you want to cycle through.
  3. Add some jQuery to modify the tabindex attributes when the user changes the items in the carousel (click the next/prev buttons).

It would be much easier to help you if you made a simplified example in jsFiddle.

RustyTheBoyRobot
  • 5,891
  • 4
  • 36
  • 55
0

On the carousel createEnd and scrollEnd functions you can reset the contents of .jCarousel so that only the visible carousel items are "tabbable". I have done that in my code as follows:

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();
 };

The disableTabbing($container) and reenableTabbing($container) lines refer to helper functions I coded into my site which basically find all :focusable elements in a given container and set the tabindex to "-1", then "0" respectively.

After this processes, users will be left tabbing only through visible carousel items instead of all carousel items.

chamelea
  • 1
  • 3