Accessibility UI Guidelines: Carousels

Sliders

3.4 Sliders/Carousels

Sliders and carousels are interactive components used to display content dynamically within limited space. Ensuring that sliders are accessible is critical for providing an inclusive experience, especially for users with disabilities or those relying on assistive technologies.

3.4.1 Semantic Markup

Use semantic HTML elements to structure sliders. Wrap the carousel items in a container and use appropriate ARIA roles and attributes to enhance accessibility.

<!-- Accessible Slider -->
<div id="carousel" aria-roledescription="carousel" aria-label="Image Slider" aria-live="polite">
    <div role="group" aria-roledescription="slide" aria-label="Slide 1 of 3">
        <img src="image1.jpg" alt="Description of image 1">
    </div>
    <div role="group" aria-roledescription="slide" aria-label="Slide 2 of 3">
        <img src="image2.jpg" alt="Description of image 2">
    </div>
    <div role="group" aria-roledescription="slide" aria-label="Slide 3 of 3">
        <img src="image3.jpg" alt="Description of image 3">
    </div>
</div>

3.4.2 Keyboard Accessibility

Ensure that sliders can be operated using the keyboard. Use Tab to navigate to the slider controls and Arrow keys to move between slides.

<!-- Slider with Navigation Controls -->
<div id="carousel" aria-roledescription="carousel" aria-label="Image Slider">
    <button aria-label="Previous Slide" id="prevSlide">Previous</button>
    <div role="group" aria-roledescription="slide" aria-label="Slide 1 of 3">
        <img src="image1.jpg" alt="Description of image 1">
    </div>
    <div role="group" aria-roledescription="slide" aria-label="Slide 2 of 3">
        <img src="image2.jpg" alt="Description of image 2">
    </div>
    <div role="group" aria-roledescription="slide" aria-label="Slide 3 of 3">
        <img src="image3.jpg" alt="Description of image 3">
    </div>
    <button aria-label="Next Slide" id="nextSlide">Next</button>
</div>

// Keyboard Navigation for Sliders
const prevButton = document.getElementById('prevSlide');
const nextButton = document.getElementById('nextSlide');
const slides = document.querySelectorAll('[role="group"]');
let currentSlide = 0;

prevButton.addEventListener('click', () => {
    slides[currentSlide].setAttribute('hidden', true);
    currentSlide = (currentSlide - 1 + slides.length) % slides.length;
    slides[currentSlide].removeAttribute('hidden');
});

nextButton.addEventListener('click', () => {
    slides[currentSlide].setAttribute('hidden', true);
    currentSlide = (currentSlide + 1) % slides.length;
    slides[currentSlide].removeAttribute('hidden');
});

3.4.3 ARIA Attributes

Use ARIA attributes to provide additional context for sliders, such as aria-roledescription, aria-live, and aria-label.

<!-- Slider with ARIA Attributes -->
<div id="carousel" aria-roledescription="carousel" aria-label="Promotional Images" aria-live="polite">
    <div role="group" aria-roledescription="slide" aria-label="Slide 1 of 3">
        <img src="image1.jpg" alt="Image 1 Description">
    </div>
    <div role="group" aria-roledescription="slide" aria-label="Slide 2 of 3">
        <img src="image2.jpg" alt="Image 2 Description">
    </div>
    <div role="group" aria-roledescription="slide" aria-label="Slide 3 of 3">
        <img src="image3.jpg" alt="Image 3 Description">
    </div>
</div>

3.4.4 Pause, Stop, and Play Controls

Provide controls to pause, stop, or play the carousel, allowing users to control the playback speed of slides.

<!-- Slider with Playback Controls -->
<div id="carousel" aria-roledescription="carousel" aria-label="Image Slider">
    <button id="pauseCarousel" aria-label="Pause Slider">Pause</button>
    <button id="playCarousel" aria-label="Play Slider" hidden>Play</button>
    <div role="group" aria-roledescription="slide" aria-label="Slide 1 of 3">
        <img src="image1.jpg" alt="Description of image 1">
    </div>
</div>

// Pause and Play Controls for Carousel
const pauseButton = document.getElementById('pauseCarousel');
const playButton = document.getElementById('playCarousel');
let isPaused = false;

pauseButton.addEventListener('click', () => {
    isPaused = true;
    pauseButton.hidden = true;
    playButton.hidden = false;
    // Stop automatic playback logic here
});

playButton.addEventListener('click', () => {
    isPaused = false;
    playButton.hidden = true;
    pauseButton.hidden = false;
    // CV automatic playback logic here
});

3.4.5 Visible Focus Indicators

Provide clear focus indicators for navigation and control buttons to help users identify the currently focused element.

/* Focus Styles for Slider Controls */
button:focus {
    outline: 2px solid #005fcc;
    background-color: #e0f0ff;
}

3.4.6 Testing Sliders for Accessibility

Test sliders with assistive technologies to ensure they are accessible. Verify that ARIA roles, keyboard navigation, and visible focus indicators are implemented correctly.

// Test Checklist
// - Verify that slides are announced correctly by screen readers.
// - Ensure all controls are operable using a keyboard.
// - Check visible focus indicators for navigation and controls.
// - Test pause, stop, and play functionality for automatic sliders.

Best Practices for Sliders/Carousels

• Use Semantic HTML: Structure sliders with appropriate elements and ARIA attributes.
• Ensure Keyboard Accessibility: Make sliders fully operable using keyboard controls.
• Provide ARIA Attributes: Enhance accessibility with descriptive ARIA roles and labels.
• Include Playback Controls: Allow users to pause, stop, or play the slider to maintain control over content playback.
• Design for Responsiveness: Ensure sliders adapt to various screen sizes and orientations.
• Provide Visible Focus Indicators: Highlight currently focused elements for better usability.
• Test Thoroughly: Regularly test sliders with assistive technologies and automated tools.