Carousel Slider

Keywords

• Slide: These are the distinct content elements showcased within the carousel, encompassing images, text, videos, or any amalgamation of these components.
• Navigation Arrows: Typically depicted using left and right arrows, they enable users to manually navigate through the slides.
• Pagination buttons: They are commonly displayed as a set of dots or numbers corresponding to each slide in the sequence. These provide an alternative means for users to manually move through the slides while showing the current position within the slide set.
• Container: This is the main container encompassing all elements of the carousel slider. It usually holds the currently displayed slide, navigation controls, and additional components.
• Content: Slides may display text, images and multimedia.
• CTA button (optional): Slides might feature a call-to-action button, urging users to undertake specific actions such as 'Buy Now,' 'Read More,' 'Sign Up,' and so forth.

Breakdown of Components

Container

The slides typically create a grouping or list of items. Therefore, it's wise to utilise WAI-ARIA roles like 'group/region' on the main container and 'list' on the container of all slides to designate them as such for assistive technologies. These roles establish the carousel wrapper as a significant landmark and intricate widget, composed of multiple elements.

Because a carousel holds multiple information slides, it's crucial to provide a clear title to such a complex widget. This way, users reading content through assistive technologies can readily comprehend the carousel's contents. Achieve this using WAI-ARIA attributes like aria-label or aria-labelledby. While aria-label can directly label content in the code, aria-labelledby is preferable when a visible title already exists on the page. Simply assign an ID to the visible title and link it via the aria-labelledby attribute.

<div id="carousel" role="group" aria-label="Featured news carousel">
  <div id="carouselSlides" role="list">
    <!-- All slides -->
  </div>
</div>

<div id="carousel" role="group" aria-label="Featured news carousel">
  <div id="carouselSlides" role="list">
    <!-- All slides -->
  </div>
</div>

Slides

Given that the slides container was defined as a list, it's important to label each slide as a list item using the role="listitem". When a screen reader encounters the attributes role="list" and role="listitem", it perceives the carousel as a collection of items and indicates the count of slides contained within the carousel.

<div id="slide1" role="listitem">
    <h2>Slide 1 Title</h2>
    <p>Slide 1 Content</p>
</div>
<div id="slide2" role="listitem">
    <h2>Slide 2 Title</h2>
    <p>Slide 2 Content</p>
</div>

<div id="slide1" role="listitem">
    <h2>Slide 1 Title</h2>
    <p>Slide 1 Content</p>
</div>
<div id="slide2" role="listitem">
    <h2>Slide 2 Title</h2>
    <p>Slide 2 Content</p>
</div>

Navigation Arrows

1. Setting Up: Preferably, define them using the <button> element, which inherently offers several accessible attributes.
2. Providing Clear Titles: Use aria-label attributes on each button to clarify their purpose for screen reader users. For instance, aria-label="next slide" and aria-label="previous slide".
3. Visible Focus Clarity: Always ensure clear visual indication when arrows receive the keyboard focus.
4. Visual Aspects: Ensure arrows are easily visible. They should offer strong contrast against their background and be adequately sized, making it easy to click/pressed. Place the previous arrow on the left side of the carousel and the next arrow on the right.
5. State: When the end or beginning of the carousel is reached, it's important to disable the next or previous arrow accordingly. They can also be hidden, but this action should consistently employ aria-hidden or aria-disabled attributes.
6. Icons: In case <svg> tags are used for creating visual arrow, these icons are decorative and should possess the attribute aria-hidden="true". This conceals them from assistive technologies for enhanced accessibility.

<button id="prevSlide" aria-label="previous slide">
    <!-- SVG or icon for arrow go here -->
</button>

<button id="nextSlide" aria-label="next slide">
    <!-- SVG or icon for arrow go here -->
</button>

<button id="prevSlide" aria-label="previous slide">
    <!-- SVG or icon for arrow go here -->
</button>

<button id="nextSlide" aria-label="next slide">
    <!-- SVG or icon for arrow go here -->
</button>

Pagination buttons

1. The Container: Designate all buttons as a group with a meaningful title to help users of assistive technologies in recognising that these buttons facilitate carousel navigation. Use the role="group" attribute to define the group, and incorporate the title via the aria-label.
2. Setting Up: Preferably, define them using the <button> element, which inherently offers several accessible attributes.
3. Providing Clear Titles: Use aria-label attributes on each button to clarify their purpose for screen reader users. For instance, aria-label="Go to slides 7 to 9"
4. Indicate Current Button: The currently selected button should possess a noticeable visual difference to signify the currently displayed slide (like a distinct color or border). Use the aria-pressed attribute to indicate the current slide. For the button representing the current slide, set aria-pressed="true". For others, use aria-pressed="false". Dynamically update these attributes as slides change.
5. Visible Focus Clarity: Always ensure clear visual indication when pagination buttons receive the keyboard focus.

<div aria-label="Carousel Pagination" role="group" aria-label="Carousel pagination">
  <button aria-label="Go to Slide 1 to 3" aria-pressed="true">1</button>
  <button aria-label="Go to Slide 4 to 6" aria-pressed="false">2</button>
  <button aria-label="Go to Slide 7 to 9" aria-pressed="false">3</button>
</div>

<div aria-label="Carousel Pagination" role="group" aria-label="Carousel pagination">
  <button aria-label="Go to Slide 1 to 3" aria-pressed="true">1</button>
  <button aria-label="Go to Slide 4 to 6" aria-pressed="false">2</button>
  <button aria-label="Go to Slide 7 to 9" aria-pressed="false">3</button>
</div>

Interaction with the keyboard

Intial tab order

The focus order within a carousel slider should logically correspond to the visual positioning of the content, ensuring comprehensibility for all users, particularly those relying on keyboard navigation or screen readers. Below is the recommended focus order:

1. Slides: Initially, the focus should be directed to the first visible slide. In cases where these slides include interactive elements like links or buttons, it's crucial to integrate them within the existing focus sequence. If multiple slides are visible simultaneously, the focus should transition through each of them before progressing to the subsequent element.
2. Navigation Arrows: Subsequently, the focus should be directed towards the navigation arrows. If the previous arrow is visible and enabled, it should be the initial focus before the next button.
3. Pagination Buttons: Lastly, the pagination buttons should receive the focus. These buttons allow users to directly choose individual slides.

After interaction

When a user clicks the next or previous button in a carousel or activates them using a keyboard, the focus should ideally shift to the newly presented slide content. The tab order should now be as follows:

1. Slides and any interactive contents thet might contain.
2. Navigation Arrows. First the previous button and then the next button
3. Pagination Buttons.