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

By default the slider revolution plugin doesn't include tab support for the slider arrows or bullets. You can add this custom code under the slider main settings where it says "Custom Javascript" to include tab support for the arrows and bullets.

var api = revapi1; // Important: Make sure to change the "revapi1" variable to match your slider ID where 1 is your slider ID

api.on( 'revolution.slide.onloaded', function() {

	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' );

} );