Keyboard Accessibility Slider Arrows
Add keyboard accessibility functionality to your Webflow site with this custom Javascript code. This allows users to navigate between slides using their keyboards offering better accessibility to your Webflow sites.
Add keyboard accessibility functionality to your Webflow site with this custom Javascript code. This allows users to navigate between slides using their keyboards offering better accessibility to your Webflow sites.
How to add it
- Add the Javascript code to your closing body section of your pages custom code.
The code
Javascript
<!-- Add to your closing body -->
<script>
// Push Webflow event
var Webflow = Webflow || [];
Webflow.push(function () {
// Detect key up
document.onkeyup = AdvanceCarousel;
function AdvanceCarousel(e)
{
var keycode = (window.event) ? event.keyCode : e.keyCode;
// target ENTER key up
if (keycode == '13') {
// find the focused element
var focused = document.activeElement;
// target if carousel arrows are focused when hitting enter
if(focused.id == "carousel-1-left" ||
focused.id == "carousel-1-right" ||
focused.id == "carousel-2-left" ||
focused.id == "carousel-2-right") {
// find which carousel and which direction based on arrow id
var whichCarousel = focused.id.split("-")[1];
var whichDirection = focused.id.split("-")[2];
// target the correct carousel and direction
var arrowTrigger = $('#carousel-' + whichCarousel + ' .w-slider-arrow-' + whichDirection);
arrowTrigger.trigger('tap');
}
} else {
return;
}
}
});
</script>
