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.

Examples

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

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

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

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)