Hi. I'm a frontend developer and i'm having problems navigating and interacting with any type of carousel using VoiceOver on mobile. The carousel navigation works perfectly using the arrows and touch, but after enabling VoiceOver, the navigation freezes and it's impossible to move the carousel using touch gestures, working only with the arrows. Following the documentations i'm trying to use a three finger gesture to move the carousel. I also tried other gestures, but none worked as expected. Even tested using the VoiceOver in other webpages that have carousels, like Bootstrap carousel component page, Picpay, Amazon and even Apple. I made an StackBlitz page with a sample code i'm using to test carousel accessibility https://stackblitz.com/edit/stackblitz-starters-gg2t5w?file=src%2Fmain.ts So the question is. Is there any limitations regarding using VoiceOver on browsers? Am i doing something wrong here? Or is there a different approach when it comes to carousels?
I'm having problems navigating within a mobile carousel using VoiceOver.
I can't speak specifically to the Bootstrap component you're using, but in general there are API differences between iOS Native, and the Web Platform. It's not always 1-for-1. For example, the Web Platform design principles specifically forbid accessibility-specific API (https://w3ctag.github.io/design-principles/#do-not-expose-use-of-assistive-tech), so you can't intercept an accessibilityScroll event directly. That said, you can intercept certain mainstream events (focus, scroll, etc) that occur downstream.
If you’re trying to get the “as-close-to-iOS-Native-as-possible” experience (e.g. using the 3-finger VO page-scroll gestures), you might try a scroll-snapped backing div that catches the scroll event (either directly or with document.body delegation), and shows/focuses the now-current carousel panel. This might require some finagling and you should test it thoroughly with iOS VoiceOver, Android TalkBack, and as many desktop browser and screen reader combinations as you can test.
An easier way is to make each panel always accessible and update your carousel controller when you receive any focus event on or in that panel. If you want VO heading navigation to work well, don't forget to add tabindex="-1" on the panel headings too, so that you can have an event listener for that focus, and update your carousel view controller.