Carousels

When using a carousel on your page there are a few things you need to do to ensure that the content you're putting inside each slide remains accessible and doesn't cause confusion. If you're using a plugin to create your carousel you may need to apply additional css to improve the accessibility.

Accessibility Checklist

• Do you have any slides with aria-hidden="true" when it renders?
  • If Yes, have you made sure that the content inside that slide has display: none or visibility: hidden?
• Do you have more than one carousel on a page?
  • If Yes, have you ensured that any sections used by the carousel have unique labels?
• Do you have any images in your carousel?
  • If Yes, have you ensured that they are folllowing the guidance in the images section?

Aria Hidden

If you have any slides with aria-hidden=true then you need to ensure that the content isn't focusable when navigating the page with the keyboard. If you are using a plugin to render your carousel, you won't see this happen in code and will need to check this on your website. It is more likely to appear when the plugin is cloning the slide for a carousel that wraps around.

You will want to make sure that you are applying visibility: hidden or display: none to any focusable slides under aria-hidden="true"

Example

<li class="carousel_slide" aria-hidden="true">
  <div class="carousel_item">
    <iframe>
  </div>
</li>

.carousel_slide[aria-hidden=true] > .carousel_item {
  visibility: hidden;
}

Associated WCAG Criteria

1.1.1 Non-Text Content (Level A)

All non-text content visible on the website has a text alternative that serves the same purpose. See the WCAG 2.2 Guidelines for Non-Text Content for more information.

See the WCAG documentation for Other Techniques for Non-Text Content

1.3.1 Info and Relationships (Level A)

Information and relationships are accessible to non-sighted users. See the WCAG 2.2 Guidelines for Info and Relationships for more information.

See the WCAG documentation for Other Techniques for Info and Relationships