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:
- Use CSS (such as
visibility: hidden) to hide or show elements without deleting and recreating them.
- Use the native HTML
hiddenattribute, which prevents a user from seeing an element until some other condition has been met.
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.