Carousels

Demo

HTML Code

				
					
<!-- Container for the entire carousel -->
<div class="carousel-container">
  <!-- Previous slide button -->
  <button id="prevSlide" class="carousel-control" onclick="prevSlide()" aria-label="Previous Slide">&lt;</button>

  <!-- Carousel itself -->
  <div id="carousel" class="carousel" role="region" aria-label="Image Carousel">
    <!-- Track to hold the slides -->
    <div class="carousel-track" id="carouselTrack">
      <!-- Slide 1 -->
      <div class="carousel-slide" aria-hidden="false">
        <img decoding="async" src="https://placehold.co/600x400?text=Slide+One" alt="Slide 1">
      </div>
      <!-- Slide 2 -->
      <div class="carousel-slide" aria-hidden="true">
        <img decoding="async" src="https://placehold.co/600x400?text=Slide+Two" alt="Slide 2">
      </div>
      <!-- Slide 3 -->
      <div class="carousel-slide" aria-hidden="true">
        <img decoding="async" src="https://placehold.co/600x400?text=Slide+Three" alt="Slide 3">
      </div>
    </div>
  </div>

  <!-- Next slide button -->
  <button id="nextSlide" class="carousel-control" onclick="nextSlide()" aria-label="Next Slide">&gt;</button>

  <!-- Dots for slide navigation -->
  <div id="dots" class="carousel-dots" role="list">
    <button class="dot" aria-label="Slide 1" onclick="goToSlide(0)"></button>
    <button class="dot" aria-label="Slide 2" onclick="goToSlide(1)"></button>
    <button class="dot" aria-label="Slide 3" onclick="goToSlide(2)"></button>
  </div>
</div>

CSS Code

				
					
.carousel-container {
  position: relative;
}

.carousel {
  position: relative;
  width: calc(100% - 70%); /* Adjust the width as needed */
  overflow: hidden;
  display: flex;
  align-items: center;
  margin: 0 auto; /* Center the carousel horizontally */
}

.carousel-track {
  display: flex;
  transition: transform 0.5s ease-in-out;
}

.carousel-slide {
  min-width: 100%;
  box-sizing: border-box;
}

.carousel-control {
  position: absolute;
  top: 50%;
  font-size: 1.2em;
  cursor: pointer;
  z-index: 1; /* Ensure the buttons are above the images */
}

#prevSlide {
  left: 30%;
}

#nextSlide {
  right: 30%;
}

.carousel-dots {
  display: flex;
  justify-content: center;
  margin-top: 10px;
}

.dot {
  width: 10px;
  height: 10px;
  margin: 0 5px;
  border-radius: 50%;
  background-color: #bbb;
  cursor: pointer;
  border: none;
}

.dot.active {
  background-color: #333;
}

JavaScript Code

				
					
// Initialize current slide index
let currentSlide = 0;
const totalSlides = 3; // Total number of slides
const carouselTrack = document.getElementById('carouselTrack');
const dots = document.querySelectorAll('.dot');

// Function to update the carousel view
function updateCarousel() {
  // Calculate the translate value based on the current slide
  const translateValue = -currentSlide * 100 + '%';
  carouselTrack.style.transform = 'translateX(' + translateValue + ')';

  // Update the active state and aria-current attribute of dots
  dots.forEach((dot, index) => {
    const isActive = index === currentSlide;
    dot.classList.toggle('active', isActive);
    dot.setAttribute('aria-current', isActive ? 'true' : 'false');
  });
}

// Function to navigate to a specific slide
function goToSlide(slideIndex) {
  currentSlide = slideIndex;
  updateCarousel();
}

// Function to move to the next slide
function nextSlide() {
  currentSlide = (currentSlide + 1) % totalSlides;
  updateCarousel();
}

// Function to move to the previous slide
function prevSlide() {
  currentSlide = (currentSlide - 1 + totalSlides) % totalSlides;

Why use a carousel?

Carousels are employed in web development for their dynamic and visually engaging way of presenting multiple pieces of content within a confined space. These rotating displays are often used to showcase featured products, highlight key information, or provide a visually appealing introduction to a website. However, it’s important to note that carousels are notoriously difficult to implement accessibly, presenting challenges in providing equal usability for all users. The fast-paced, automatic cycling of content can be disorienting and may not cater to users who require more time to read or interact with the displayed information. Additionally, implementing accessible features, such as keyboard navigation and screen reader compatibility, can be complex. As a result, carousels may not offer an optimal user experience, and alternative design patterns are often recommended for improved accessibility and usability across diverse audiences.

What are some accessibility concerns?

Keyboard Accessibility:
- Concern: Carousels often lack proper keyboard navigation support, making it difficult for users who rely on keyboards or other assistive devices to interact with and control the content.
- Mitigation: Ensure comprehensive keyboard navigation support, allowing users to navigate through carousel content easily. Focus management should be implemented, ensuring that interactive elements within the carousel are accessible via keyboard.
Automatic Timing and Control:
- Concern: Automatic transitions and lack of user control over the carousel can be disorienting, especially for users who may need more time to read or interact with the content.
- Mitigation: Provide users with controls to pause, play, and navigate through the carousel manually, reducing the reliance on automatic timing. Additionally, allow users to control the speed of transitions or disable automatic movement.
Focus Management:
- Concern: Maintaining focus on interactive elements within the carousel during transitions can be challenging, potentially causing confusion for keyboard users and screen reader users.
- Mitigation: Implement proper focus management to ensure that keyboard focus remains consistent and predictable, even during carousel transitions. Use ARIA attributes to indicate changes in content to screen readers.
Responsive Design Issues:
- Concern: Carousels may not adapt well to different screen sizes, causing issues on smaller devices and reducing the overall user experience.
- Mitigation: Implement responsive design principles to ensure that carousels adapt seamlessly to various screen sizes. Test the carousel on different devices to verify its usability and readability.
Alternative Content Accessibility:
- Concern: Providing alternative content, such as descriptive text or links, for each carousel slide may be overlooked, impacting users who cannot view the visual content.
- Mitigation: Include descriptive text or links for each carousel slide, ensuring that users with disabilities or those who have opted not to view visual content can access relevant information.
Motion and Animation Effects:
- Concern: Excessive motion or rapid transitions can be problematic for users with vestibular disorders or other motion-related sensitivities.
- Mitigation: Allow users to disable motion or animation effects in the carousel settings. Provide options for users to control the speed of transitions or choose a static view.
Operable Timeouts:
- Concern: Timed interactions within carousels, such as automatic transitions, may not account for users who require more time to read or interact with the content.
- Mitigation: Allow users to adjust the timing of carousel transitions or provide an option to pause automatic movements, ensuring that users have adequate time to interact with the content.

1.3.1
Info and Relationships ( level A ) :
Information, structure, and relationships conveyed through presentation can be programmatically determined or are available in text.
2.1.1
Keyboard ( level A ) :
All functionality of the content is operable through a keyboard interface without requiring specific timings for individual keystrokes, except where the underlying function requires input that depends on the path of the user's movement and not just the endpoints.
2.2.1
Timing Adjustable ( level A ) :
For each time limit that is set by the content, at least one of the following is true:
Turn off: The user is allowed to turn off the time limit before encountering it, or

Adjust: The user is allowed to adjust the time limit before encountering it over a wide range that is at least ten times the length of the default setting, or

Extend: The user is warned before time expires and given at least 20 seconds to extend the time limit with a simple action (for example, 'press the space bar'), and the user is allowed to extend the time limit at least ten times, or

Real-time Exception: The time limit is a required part of a real-time event (for example, an auction), and no alternative to the time limit is possible, or

Essential Exception: The time limit is essential and extending it would invalidate the activity, or

20 Hour Exception: The time limit is longer than 20 hours.
2.2.2
Pause, Stop, Hide ( level A ) :
For moving, blinking, scrolling, or auto-updating information, all of the following are true:
Moving, blinking, scrolling: For any moving, blinking or scrolling information that (1) starts automatically, (2) lasts more than five seconds, and (3) is presented in parallel with other content, there is a mechanism for the user to pause, stop, or hide it unless the movement, blinking, or scrolling is part of an activity where it is essential, and

Auto-updating: For any auto-updating information that (1) starts automatically and (2) is presented in parallel with other content, there is a mechanism for the user to pause, stop, or hide it or to control the frequency of the update unless the auto-updating is part of an activity where it is essential.
2.3.1
Three Flashes or Below Threshold ( level A ) :
Web pages do not contain anything that flashes more than three times in any one second period, or the flash is below the general flash and red flash thresholds.