Adding keyboard accessibility to JuxtaposeJS

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 slider to the slider rails that allow the user to overlay the before/after image. I also added aria roles (aria-valuenow, aria-valuemin, aria-valuemax) to the slider rail and provided :focus styling.

If you use your keyboard to navigate through Juxtapose, you’ll see the result: