The Ultimate Checklist for Accessible Carousels
Information about the article
Author: Dmitry Dugarev
Oh these carousels — they are so popular yet so problematic when it comes to accessibility. Here you will find the complete, consolidated checklist of all verification points from my complete guide to accessible carousels — perfect for direct use in your project or audit report.
Basic Structure
- Carousel is enclosed in a
<section>element witharia-roledescription="Carousel". [1], [2] -
aria-roledescriptionis localized in the user's language. [3] - The carousel has a heading with a unique ID. [4]
- The section has an
aria-labelledbythat points to the heading. [5]
Slide Container
- The slides are located in a
<ul>with individual<li>elements. [6], [7] - The
<ul>has anaria-labelthat describes the list of slides. [8]
Slide Content
- Each slide is an
<article>for semantic structuring. [1] - Each slide has
aria-roledescription="Slide". [2] -
aria-roledescriptionis localized. [3] - Each slide has a unique heading with an ID. [4]
- Each slide has
aria-labelledbythat points to the heading. [5] - Each slide has
aria-posinsetandaria-setsize. [7] - Hidden slides are marked with
aria-hidden="true"andinertordisplay:none. [9]
Focus Management
- After manual change, focus lands on the heading of the new slide. [10], [11]
- Focus is shifted only after the animation is complete. [12]
Control of Automatic Rotation
- There is a visible pause/play button. [13], [14]
- The button is a true
<button>element witharia-labelandtitle. [9], [8], [15] - The button uses
aria-pressedto indicate the state (on/off). [16] - The button is keyboard operable (
Enter,Spacebar). [17] - Clear focus style with contrast ≥ 3:1. [18], [19]
- Contrast of the button ≥ 3:1. [19]
- Button is at least 44 × 44 px in size. [20]
- Automatic rotation pauses upon mouse or keyboard interaction. [13]
- Rotation respects
prefers-reduced-motion. [13]
Arrow Buttons (Previous/Next)
- Arrow navigation is marked up as a
<ul>witharia-label. [6], [8] - Arrows are consistently placed at the beginning or end of the carousel. [21]
- Arrows are
<button>elements witharia-labelandtitle. [9], [8], [15] - Keyboard operation works (
Enter/Spacebar). [17] - Clear focus style with contrast ≥ 3:1. [18], [19]
- Contrast of the arrows ≥ 3:1. [19]
- Buttons are at least 44 × 44 px in size. [20]
- Decorative icons are marked with
aria-hidden="true". [22]
Dot Navigation (Dots)
- Dots are located in
<fieldset>with<legend>. [23], [7] - Dots are implemented as radio buttons. [9], [17]
-
Home/Endkeys jump to the first/last slide;ArrowLeft/ArrowRightorUp/Downnavigate between slides. [17] - Each dot has an
aria-labelor visible text label. [8], [24] - Focused dots are visually distinguishable (Contrast ≥ 3:1). [18], [19]
- Active dot is visually highlighted and announced as active by screen readers. [9]
- Active dot is programmatically distinguishable. [9]
Live Region for Slide Change
- There is a hidden element with
aria-live="polite"andaria-atomic="true". [12] - Live region has
role="status". [25] - Announcement happens after focus shifts to the new slide. [12]
- No announcement during automatic rotation. [12]
- Live region is only updated during manual changes. [12]
Visual & Keyboard Focus
- All interactive elements (dots, arrows, pause button) have a clearly visible focus style. [18]
- Focus style exhibits contrast ≥ 3:1 against the background. [19]
Interaction Instructions
- There is a (possibly hidden) text element with interaction hints. [26]
- Instructions are connected to the carousel via
aria-describedby. [27] - Instructions are also connected to each slide via
aria-describedby. [27]
General Requirements (Cross-Cutting)
- Structure is semantically correct:
section,ul/li,article. [7] - Complete keyboard operability is ensured. [17]
- Reliable focus management is present. [11]
- Automatic movement is controllable. [13]
- Screen readers receive clear status and position announcements. [12]
- Progressive Enhancement: works even without JavaScript.
- Internationalization: Localized labels (especially
aria-roledescription). [3] -
prefers-reduced-motionis respected. [13] - Regular testing with keyboard & screen reader (VoiceOver, JAWS, NVDA).
Conclusion
With this checklist, you are well-equipped to develop or audit a carousel that complies with WCAG 2.2 guidelines. Remember that accessibility is an ongoing process — test regularly with real users and various assistive technologies to ensure your carousel remains accessible to everyone.
About the author