Carousel Accessibility

My Home Page had a Carousel display of some photographs. I removed it as I thought that it was both distracting and not understood by the casual visitor.

I called my carousel display a "slide show". Looking closer at some of the ARIA reccomendations I see that there are potential problems with accessibilty.

My home page features photos for purely cosmetic reasons.

The WAI example

I made a page for this using their sample code. In my opinion there is too much overhead in the code to make it really viable for "simple" use. If you have a series of explanatory slides that need to be displayed then fine, but a "pretty pretty" rolling display of photos (such as on a home page) I don't think that it is worth it.

The code

The code for the example is pretty involved and I would guess that it is still in the experimental stage. It is spread between a CSS file and a number of Javascipt files that I will try and look at here.

There is much for me to learn here even though I do not intend to use the code at the present time. There is much DOM object stuff here, the following is an example prototype function:

Carousel.prototype.init = function () {

  var elems, elem, button, items, item, imageLinks, i;

  this.liveRegionNode = this.domNode.querySelector('.carousel-items');

  items = this.domNode.querySelectorAll('.carousel-item');

  for (i = 0; i < items.length; i++) {
    item = new CarouselItem(items[i], this);

    item.init();
    this.items.push(item);

    if (!this.firstItem) {
      this.firstItem = item;
      this.currentDomNode = item.domNode;
    }
    this.lastItem = item;

    imageLinks = items[i].querySelectorAll('.carousel-image a');

    if (imageLinks && imageLinks[0]) {
      imageLinks[0].addEventListener('focus', this.handleImageLinkFocus.bind(this));
      imageLinks[0].addEventListener('blur', this.handleImageLinkBlur.bind(this));
    }

  }

  // Pause, Next Slide and Previous Slide Buttons

  elems = document.querySelectorAll('.carousel .controls button');

  for (i = 0; i < elems.length; i++) {
    elem = elems[i];

    if (elem.classList.contains('rotation')) {
      button = new PauseButton(elem, this);
      this.pauseButton = elem;
      this.pauseButton.classList.add('pause');
      this.pauseButton.setAttribute('aria-label', this.pauseLabel);
    }
    else {
      button = new CarouselButton(elem, this);
    }

    button.init();
  }

  this.currentItem = this.firstItem;

  this.domNode.addEventListener('mouseover', this.handleMouseOver.bind(this));
  this.domNode.addEventListener('mouseout', this.handleMouseOut.bind(this));

  // Start rotation
  setTimeout(this.rotateSlides.bind(this), this.timeInterval);
};