How should I hide the slides of a carousel that aren’t displayed visually?

Question

How should I hide the slides of a carousel that aren't displayed visually?

Answer

When a carousel is present on a web page, it may have one or more slides visible at a time. If there are multiple slides of a carousel that are not being displayed visually, they should be hidden from all users with one of the following techniques:

  1. Use CSS (such as display: none and visibility: hidden) to hide or show elements without deleting and recreating them.
  2. Use the native HTML hidden attribute, which prevents a user from seeing an element until some other condition has been met.
  3.  Apply aria-hidden="true" to the slide's wrapper and tabindex="-1" to all the focusable elements inside it. This method will hide an element (or group of elements) from screen readers.

Note: Methods 1 and 2 will hide elements on the screen, but also for screen reader users.

Learn more about carousels and other popular interactive designs in the Widgets course from Accessible Web Academy.

Free Tools to Continue Learning

Accessible Web Company Logo

Accessible Web RAMP

Monitor your website and manage your progress towards WCAG conformance.

Accessible Web Company Logo

Accessible Web Academy

Career specific courses to help power up your accessibility knowledge.