Post

Replies

Boosts

Views

Activity

Reply to Smart Invert and CSS background-image property
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.
Dec ’23
Reply to 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.
Nov ’23
Reply to Can Webview content adapt to the Button Shapes Setting?
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.
Aug ’21