Accessible Carousel Markup - the second slide is the current slide

README.html

<!-- Carousel - the second slide is the current slide -->
<div id="carousel" role="section" aria-label="Carousel">
	<button>Previous Slide</button>

	<div aria-live="polite">
		<div id="carousel-slide-1" aria-hidden="true">
			<p>These are the contents of Slide 1</p>
		</div>
		<div id="carousel-slide-2">
			<p>These are the contents of Slide 2</p>
		</div>
		<div id="carousel-slide-3" aria-hidden="true">
			<p>These are the contents of Slide 3</p>
		</div>
	</div>

	<button>Next Slide</button>

	<nav aria-labelledby="carousel">
		<button>Slide 1</button>
		<button aria-controls="carousel-slide-2" aria-selected="true">Slide 2</button>
		<button>Slide 3</button>
	</nav>
</div>