Code examples
Use semantic HTML
This is one example of an accessible carousel wizard.
- It is not the only way to build a carousel, but it meets all the critieria:
- The group has a name
- New slides titles are announced
- Arrow keys advance the slides
<div class="carousel">
<h2 class="h-bravo" id="carousel-title">
NATO alphabet
</h2>
<div class="carousel-nav">
<button class="previous" aria-described="carousel-title">
<span class="hidden">Previous slide</span>
</button>
<button class="next" aria-described="carousel-title">
<span class="hidden">Next slide</span>
</button>
</div>
<ul class="slide-list" role="group" aria-labelledby="carousel-title">
<li class="slide visible" tabindex="-1">
<h3 class="h-charlie" role="status">
Alpha/Alfa
<span class="position">1 of 7</span>
</h3>
<p>
Pronounced al fah
</p>
<button class="next">
Start
</button>
</li>
<li class="slide inert" tabindex="-1">
<h3 class="h-charlie" role="status">
Bravo
<span class="position">2 of 7</span>
</h3>
<p>
Pronounced brah voh
</p>
<button class="tertiary previous in-slide">
Back
</button>
<button class="next">
Next
</button>
</li>
<li class="slide inert" tabindex="-1">
<h3 class="h-charlie" role="status">
Charlie
<span class="position">3 of 7</span>
</h3>
<p>
Pronounced char lee
</p>
<button class="tertiary previous in-slide">
Back
</button>
<button class="next">
Next
</button>
</li>
<li class="slide inert" tabindex="-1">
<h3 class="h-charlie" role="status">
Delta
<span class="position">4 of 7</span>
</h3>
<p>
Pronounced dell tah dell tah dell tah. Can I help yah help yah help yah?
</p>
<button class="tertiary previous in-slide">
Back
</button>
<button class="next">
Next
</button>
</li>
<li class="slide inert" tabindex="-1">
<h3 class="h-charlie" role="status">
Echo
<span class="position">5 of 7</span>
</h3>
<p>
Pronounced eck oh
</p>
<button class="tertiary previous in-slide">
Back
</button>
<button class="next">
Next
</button>
</li>
<li class="slide inert" tabindex="-1">
<h3 class="h-charlie" role="status">
Foxtrot
<span class="position">6 of 7</span>
</h3>
<p>
Pronounced foks trot
</p>
<button class="tertiary previous in-slide">
Back
</button>
<button class="next">
Next
</button>
</li>
<li class="slide inert" tabindex="-1">
<h3 class="h-charlie" role="status">
Golf
<span class="position">7 of 7</span>
</h3>
<p>
Pronounced golf
</p>
<button class="tertiary previous in-slide">
Back
</button>
</li>
</ul>
</div>