If you want background images to avoid the invert, you can use the CSS media feature: @media (inverted-colors) { .mySelector { filter: invert(100%); } } The selected element will still be inverted screen pixels, but applying the invert filter means it's effectively "double-inverted" so it looks normal, as if it was never inverted.

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.

Seems like a bug. Will you file it at bugs.webkit.org? Thanks for including the CodePen.

Please include the version number of the OS and browsers you are testing. Thanks.

Check out CSS MQ Level 5: https://drafts.csswg.org/mediaqueries-5/ The prefers-reduced-motion and prefers-reduced-transparency features are 1-to-1 correlations with the native API features on Apple devices. prefers-contrast has gone through iterations, so YMMV with regard to support, but the current syntax of @media (prefers-contrast: more) is intended to match the "Increase Contrast" feature on Apple devices, as well as similar higher contrast features on Windows and Android. Some of the values being discussed in that feature are Windows-specific or otherwise not relevant to iOS or macOS. There is currently no Web API feature equivalent to the Button Shapes setting. You can also use these media features with the window.matchMedia interface.