Swiper Keyboard Navigation Focus Management When Touch is Disabled

Answer

When touch events are disabled (touchEvents: false), Swiper keeps its keyboard listeners active, but it does not move DOM focus to the newly active slide. Focus visibility therefore depends on your own CSS, and slide-change announcements only work if you explicitly enable the a11y module and provide announcement strings.

Confirmed facts

• Keyboard listeners remain functional regardless of the touchEvents setting.
• Swiper's a11y module adds ARIA roles, labels and a live-region for slide changes, but it must be enabled via a11y: { enabled: true, prevSlideMessage: 'Previous slide', nextSlideMessage: 'Next slide' }.
• Focus outline is not injected by Swiper; it appears only if the element that retains focus (usually the Swiper container) has an outline style defined in your CSS.
• The slideChangeTransitionEnd event fires after each slide transition and can be used to programmatically move focus.

Likely explanation

Because Swiper does not transfer focus, keyboard-only users may perceive focus as "stuck" on the last interacted element, and screen readers will not announce slide changes unless the live-region is active. The default behavior is therefore insufficient for full WCAG 2.1 keyboard compliance unless you supplement it.

Steps for this case

1. Make the Swiper container focusable: <div class="swiper" tabindex="0">...</div>.
2. Add a visible focus indicator in CSS, e.g. .swiper:focus { outline: 2px solid #0066ff; }.
3. Initialize Swiper with the a11y module enabled and announcement strings:

new Swiper('.swiper', {
  touchEvents: false,
  keyboard: { enabled: true },
  a11y: {
    enabled: true,
    prevSlideMessage: 'Previous slide',
    nextSlideMessage: 'Next slide'
  }
});

1. If you need focus to move inside the slide (e.g., to the first interactive element), add a listener:

swiper.on('slideChangeTransitionEnd', () => {
  const activeSlide = swiper.slides[swiper.activeIndex];
  const focusable = activeSlide.querySelector('button, [href], input, select, textarea, [tabindex]:not([tabindex="-1"])');
  if (focusable) focusable.focus();
});

1. Test with a screen reader (NVDA, VoiceOver) using arrow keys; verify that announcements are heard and that the focus outline moves as expected.

Missing diagnostic detail

Do you require focus to shift into interactive content inside each slide? If yes, the custom focus-transfer step (listener in step 4) is necessary; if keeping focus on the container is acceptable, steps 1-3 alone satisfy WCAG 2.1 keyboard navigation.