Image comparison sliders and visual accessibility
I am creating an image slider for a site, and I am confused on how to successfully meet wcag requirements. Below is an example that conveys the idea of what I am creating.
I have read a couple articles on accessiblity (WebAIM's contrast explanation and w3.org's explnation for sufficient color contrast). After reading, it has led me to these questions:
- What is considered essential to understanding the information and functionality in the image slider? Is it the circle in the middle of the slider that one uses to drag between the two images? Or does the vertical divider between the images also count as essential?
- How does one ensure sufficient contrast with the slider and the images behind it? If the images in the component were unpredictable, how can you design the component in a way that ensures sufficient contrast with any image? Is good contrast between the inner arrows of the slider and the background enough? (For example, the middle circle in the slider component would have white inner arrows with a blue background).
There does not seem to be any talk of this online that I have found as well.