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

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.