[A carousel] creates a viewport around a list of items, where n items are visible at any time. We say that each viewport of items constitutes a slide. A carousel with one item in the viewport is a Slideshow Carousel (pictured above). A carousel with more than one item in the viewport is a Filmstrip Carousel (pictured below). ~ Source
<button type="button" aria-label="Previous slide"></button>
<ul>
<li>
<div>
<h4>First slide</h4>
</div>
</li>
<li aria-hidden="true">
<div>
<h4>Second slide</h4>
</div>
</li>
</ul>
<button type="button" aria-label="Next slide"></button>
</div>
Nothing special
- Set
aria-hidden
totrue
for slides that are not visible. - Set
aria-label
on the buttons to change slide.
Key | Function |
---|---|
right | Display next slide |
left | Display previous slide. |
Nothing special