Snippet: Slider Revolution Accessibility (tab support) for Bullets and Arrows

  • Updated:

By default the slider revolution plugin doesn't include tab support for the slider arrows or bullets. You can add this custom code directly in the Slider Revolution custom javascript tab so that it's only added on the page when the slider is inserted. Important: Make sure to change the "revapi1" variable matches your slider ID where 1 is your slider ID if you aren't sure how to do this, simply click on the API tab while in the JS editor and try inserting an Event and you'll be able to locate it.

revapi1.bind("revolution.slide.onloaded",function (e) {

	var slider = jQuery(this);
	
	// Add tab suppport to bullets and arrows
	var bulletsArrows = slider.find( '.tp-bullet, .tparrows' );

	bulletsArrows.attr( 'tabindex', '0' );
	bulletsArrows.attr( 'role', 'button' );
	bulletsArrows.keypress( function( event ) {
		if( event.keyCode == 13 ) {
			jQuery( this ).click();
		}
	} );


	// Add aria-label to bullets
	var bullets = slider.find( '.tp-bullet' );
	jQuery.each( bullets, function( index, val ) {
		var slideNumber = parseInt( index + 1 );
    	jQuery(this).attr( 'aria-label', 'go to slide number ' + slideNumber );
	});

	// Add label to next arrow
	slider.find( '.tp-leftarrow' ).attr( 'aria-label', 'previous slide' );

	// Add label to prev arrow
	slider.find( '.tp-rightarrow' ).attr( 'aria-label', 'next slide' );

} );
All PHP snippets should be added via child theme's functions.php file or via a plugin.
We recommend Code Snippets (100% Free) or WPCode (sponsored)
Back To Top