ARIA Carousels

Expected behaviors

The beginning and ending boundaries of the region should be conveyed to screen reader users, content changes should be announced to screen reader users only when a navigation button is manually activated and not when auto-rotate is enabled, all navigation buttons should be keyboard accessible, auto-rotation should stop when an element within the carousel receives focus to ensure accessibility for keyboard-only users, and auto-rotation should stop when the mouse is moved over the carousel region to ensure accessibility for low vision users.

The 4X ARIA Carousel module automatically configures all required ARIA attributes and focus handling, in strict accordance with the ARIA specification.

(A heavily modified version of Tiny-Slider.JS has been imported for this purpose, originally authored by William Lin, it was updated here to improve accessibility for screen reader and keyboard-only users.)

HTML syntax

<div class="carousel-wrapper">

    <div class="my-slider">
        <div class="slide s01">
            <div>1</div>
        </div>
        <div class="slide s02">
            <div>2</div>
        </div>
        <div class="slide s03">
            <div>3</div>
        </div>
        <div class="slide s04">
            <div>4</div>
        </div>
    </div>

    <div id="controls">
        <button class="previous">Previous</button>
        <button class="next">Next</button>
    </div>

</div>

NOTE: Individual slides may include any type of content, such as images, text, structural markup, links buttons and form fields, or any other. Which ever type of content is chosen, however, it is always important to ensure that such content is tested to ensure accessibility.

JavaScript syntax

var carouselDC = $A.setCarousel({
container: ".my-slider"
// Configure functionality key / value mappings
});

• Module file: Carousel.js
• Requires: TinySlider.css, TinySlider.js.
• Recommended: Velocity.js, VelocityUI.js.

Parameters

1. A configuration map to customize behaviors and options

Configuration

Imported from: https://github.com/ganlanyuan/tiny-slider

Responsive options

The following options can be redefined in the 'responsive' object declaration.

• 'startIndex'
• 'items'
• 'slideBy'
• 'speed'
• 'autoHeight'
• 'fixedWidth'
• 'edgePadding'
• 'gutter'
• 'center'
• 'controls'
• 'controlsText'
• 'nav'
• 'autoplay'
• 'autoplayHoverPause'
• 'autoplayResetOnVisibility'
• 'autoplayText'
• 'autoplayTimeout'
• 'touch'
• 'mouseDrag'
• 'arrowKeys'
• 'disable'

Properties and methods

Once initialized, the carousel DC object provides access to the tinySlider object instance to allow properties and methods to be accessed directly.

// Reference the tinySlider object instance.

var tinySliderInstance = carouselDC.tns;

To learn more about accessing specific properties and methods, as well as setting custom events, visit: https://github.com/ganlanyuan/tiny-slider