WCAG 2.1 AA — release blocker
Carousel must satisfy these on every render before it ships.
Semantics
- The carousel container renders
role="region"witharia-roledescription="carousel". - Each slide renders
role="group"witharia-roledescription="slide". - The current slide is announced via
aria-label(e.g. "1 of 5").
Keyboard navigation
| Key | Action |
|---|---|
Arrow Left | Move to the previous slide (horizontal). |
Arrow Right | Move to the next slide (horizontal). |
Arrow Up | Move to the previous slide (vertical). |
Arrow Down | Move to the next slide (vertical). |
Tab | Move focus to the next interactive element. |
Focus management
- Previous/Next buttons are focusable and receive visible focus rings.
- Focus does not move into off-screen slides.
- Buttons are disabled (and announced as such) when at the first or last slide.
Labelling
CarouselPreviousandCarouselNexthavearia-labeldefaults ("Previous slide", "Next slide").- Provide a descriptive
aria-labelon theCarouselwhen the context is not obvious.
Disabled state
- At the first slide, the previous button has
aria-disabled="true". - At the last slide, the next button has
aria-disabled="true". - When
loopis enabled, neither button is ever disabled.
Audit checklist
- Container has
role="region"witharia-roledescription="carousel" - Each slide has
role="group"witharia-roledescription="slide" - Arrow keys navigate between slides
- Previous/Next buttons have accessible labels
- Disabled buttons announced as
aria-disabled - Focus ring visible on all interactive elements
- 4.5:1 contrast on controls