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
<section class="carousel" aria-label="Slideshow">
<h2 class="h-bravo" id="carousel-title">
NATO alphabet
</h2>
<div class="carousel-nav" role="group" aria-label="Slide controls">
<button class="previous">
<span class="hidden">Previous slide</span>
</button>
<button class="next">
<span class="hidden">Next slide</span>
</button>
</div>
<div class="slide-list" role="group" aria-labelledby="carousel-title" aria-live="polite">
<div role="group"
class="slide visible"
aria-labelledby="slide-heading-1"
tabindex="-1">
<h3 id="slide-heading-1" class="h-charlie">
Alpha/Alfa
<span class="position">1 of 7</span>
</h3>
<p>
Pronounced al fah
</p>
<button class="next">
Start
</button>
</div>
<div role="group" class="slide inert" aria-labelledby="slide-heading-2" tabindex="-1">
<h3 id="slide-heading-2" class="h-charlie">
Bravo
<span class="position">2 of 7</span>
</h3>
<p>
Pronounced brah voh
</p>
<button class="tertiary previous in-slide">
Previous
</button>
<button class="next">
Next
</button>
</div>
<div role="group" class="slide inert" aria-labelledby="slide-heading-3" tabindex="-1">
<h3 id="slide-heading-3" class="h-charlie">
Charlie
<span class="position">3 of 7</span>
</h3>
<p>
Pronounced char lee
</p>
<button class="tertiary previous in-slide">
Previous
</button>
<button class="next">
Next
</button>
</div>
<div role="group" class="slide inert" aria-labelledby="slide-heading-4" tabindex="-1">
<h3 id="slide-heading-4" class="h-charlie">
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">
Previous
</button>
<button class="next">
Next
</button>
</div>
<div role="group" class="slide inert" aria-labelledby="slide-heading-5" tabindex="-1">
<h3 id="slide-heading-5" class="h-charlie">
Echo
<span class="position">5 of 7</span>
</h3>
<p>
Pronounced eck oh
</p>
<button class="tertiary previous in-slide">
Previous
</button>
<button class="next">
Next
</button>
</div>
<div role="group" class="slide inert" aria-labelledby="slide-heading-6" tabindex="-1">
<h3 id="slide-heading-6" class="h-charlie">
Foxtrot
<span class="position">6 of 7</span>
</h3>
<p>
Pronounced foks trot
</p>
<button class="tertiary previous in-slide">
Previous
</button>
<button class="next">
Next
</button>
</div>
<div role="group" class="slide inert" aria-labelledby="slide-heading-7" tabindex="-1">
<h3 id="slide-heading-7" class="h-charlie">
Golf
<span class="position">7 of 7</span>
</h3>
<p>
Pronounced golf
</p>
<button class="tertiary previous in-slide">
Previous
</button>
</div>
</div>
</section>