Swiper a11y module vs custom focus management for screen-reader-friendly slide announcements
21.5K reputation · 13 Nov 2024, 00:44 UTC
I'm building a carousel with Swiper (v8) where each slide contains interactive elements—links and a small form—and I need reliable keyboard and screen-reader support. The decision I'm stuck on is whether to enable Swiper's built-in a11y module or disable it and manage focus and announcements myself.
The built-in module adds ARIA roles, labels, and arrow-key handling with almost no code, but I understand it may conflict with the focusable components inside my slides and produce unexpected tab order. A custom approach (trapping focus on the active slide, announcing changes through my own aria-live region on slideChangeTransitionEnd) gives control over announcement timing and verbosity, but I'd have to handle focus restoration myself when breakpoints destroy and re-initialize slides, and re-test on major upgrades since the internal DOM structure can change.
My concrete constraint: screen-reader users should hear a slide announcement only once it is fully visible, not during the transition.
- Can the built-in a11y module's live-region behavior be tuned to announce only after the transition ends, or is it fixed?
- If I go custom, what is the minimal reliable way to restore focus after breakpoint-driven re-initialization?
- Are there known tab-order conflicts between the a11y module and focusable elements inside slides when slideClass/slideActiveClass are customized?