WebAIM - Web Accessibility In Mind

E-mail List Archives

Side-by-side image comparison slider accessibility

for

From: Kian Badie
Date: Mar 22, 2022 4:46PM

Hello all,

I have made an image comparison slider where 2 images can be overlayed over
each other using a vertical slider to distinguish the 2. It's like a
"before/after" kind of display. Other than keyboard controls and color
contrast, what else should I do for accessibility? It is challenging to
think what a screen reader user would need for this component since it is a
very visual based component. Would one just need to describe the images in
alt text?

I am having trouble figuring out how to handle the alt text as well. Would
the alt text for the "before" describe the image plainly and the "after"
describe the differences in the image? Or describe the images in isolation?

Thank you,
Kian Badie