E-mail List Archives

Search E-mail List Archives for

Number of posts in this thread: 1 (In chronological order)

From: Kian Badie
Date: Tue, Mar 22 2022 4:46PM
Subject: Side-by-side image comparison slider accessibility
No previous message | No next message

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