JuxtaposeJS is a tool for creating before/after image sliders. Supported by KnightLab and created by Alex Duner, this project allows a user to create and embed this kind of interaction on a site. Alex wrote about his process for creating the project here.
Last month I made a keyboard accessibility pull request to the project. The main thing my contribution did was to apply the role of
the slider rails that allow the user to overlay the before/after image. I also added aria roles (
aria-valuemax) to the slider rail
and provided :focus styling.
If you use your keyboard to navigate through Juxtapose, you’ll see the result: