When navigating the homepage using keyboard-only (Tab), the user becomes trapped inside the carousel component. After tabbing into the carousel, focus cycles through the items but never escapes to the rest of the page.
Steps to reproduce:
- Go to https://www.designpatternpedia.nl/
- Press Tab repeatedly until focus enters the carousel
- Continue pressing Tab
Observed behavior:
- Keyboard focus becomes locked inside the carousel
- It is not possible to tab out
- Arrow navigation also doesn’t work because the scrollbar blocks arrow-based movement
Expected behavior:
One of the following should happen:
Option A: After the last interactive element inside the carousel, focus should move to the next element on the page (normal tab flow),
or
Option B: Carousel should support navigation via arrow keys without requiring mouse or scroll input (ARIA-compliant behavior)
Impact:
This creates an accessibility barrier for keyboard users and violates WCAG 2.1 Success Criterion 2.1.2 (No Keyboard Trap).
Users relying on keyboard-only navigation cannot access the rest of the page once entering the carousel.
Additional context:
Screenshot for reference:
When navigating the homepage using keyboard-only (Tab), the user becomes trapped inside the carousel component. After tabbing into the carousel, focus cycles through the items but never escapes to the rest of the page.
Steps to reproduce:
Observed behavior:
Expected behavior:
One of the following should happen:
Option A: After the last interactive element inside the carousel, focus should move to the next element on the page (normal tab flow),
or
Option B: Carousel should support navigation via arrow keys without requiring mouse or scroll input (ARIA-compliant behavior)
Impact:
This creates an accessibility barrier for keyboard users and violates WCAG 2.1 Success Criterion 2.1.2 (No Keyboard Trap).
Users relying on keyboard-only navigation cannot access the rest of the page once entering the carousel.
Additional context:
Screenshot for reference: