carousel-region

Ensure that carousels and their elements are properly contained using ARIA role="region" or a <section> tag.

Description

Carousels must be enclosed within a role ="region" or a <section> element.

When carousels are not contained within a landmark region, screen readers and other assistive technologies may not provide sufficient context to users. This can make navigation difficult for users with disabilities, especially when dynamic content is involved. Adding landmarks helps users bypass blocks of content that are not relevant to them and quickly jump to relevant content.

Example

The following example code lacks the role="region" or <section> wrapper for navigation buttons and images.

<div class="carousel">
  <button>◀</button>
  <div class="slides">
    <img src="image1.jpg">
    <img src="image2.jpg">
    <img src="image3.jpg">
  </div>
  <button>▶</button>
</div>

The following sample code corrects the issue in the earlier example by enclosing the carousel with a <section> tag:

<section aria-label="Image Carousel">
  <div class="carousel">
    <button aria-label="Previous Slide">◀</button>
    <div class="slides">
      <img src="image1.jpg" alt="A beautiful landscape">
      <img src="image2.jpg" alt="A city skyline at sunset">
      <img src="image3.jpg" alt="A tranquil beach">
    </div>
    <button aria-label="Next Slide">▶</button>
  </div>
</section>

You can also solve the issue by using role="region" as follows:

<div role="region" aria-label="Image Carousel">
  <div class="carousel">
    <button aria-label="Previous Slide">◀</button>
    <div class="slides">
      <img src="image1.jpg" alt="A beautiful landscape">
      <img src="image2.jpg" alt="A city skyline at sunset">
      <img src="image3.jpg" alt="A tranquil beach">
    </div>
    <button aria-label="Next Slide">▶</button>
  </div>
</div>

How to fix?

Ensure that the carousel is enclosed within an appropriate landmark region using either:

• An HTML <section> element along with an aria-label or aria-labelledby attribute.
• An element with role="region" applied, along with an aria-label or aria-labelledby attribute.

Reference

• Using ARIA landmarks to identify regions of a page
• WCAG 2.4.1 Bypass Blocks (Level A)