Make Revolution Slider Web Accessible

In the current era, There is a need to make a site web-accessible in the WordPress space. There are many popular slider plugins available to make a good slider on our WordPress website. The Revolution slider is one of them.

The Revolution slider doesn’t produce a web-accessible slider by default. We should make a revolution slider web accessible by ourselves.

Keyboard Navigation in Revolution Slider

To enable keyboard navigation, Go to Revolution Slider > Navigation > Keyboard and enable keyboard arrow navigation by switching on.

Play and Pause links or buttonswith screen reader texts and focusable

Add Play button to all slides

• Go to Slides > Global Layers.

• Add Button Layer from Add Layers > Button.

• Set the button vertically bottom and horizontally centered position by locating Editor View > Size & Pos > Position & Size tab. Click on the Alignment Horizontal center and Vertical bottom button as mention in the below screenshot:

• Go to Editor View > Content > Text/Button Layer content tab and change text of Idle text box field to “Play” as mentioned in the below screenshot:

• Go to Editor View > Attributes > Attributes Tab > fill classes textbox field with the value “slider-button play”.

• Go to Editor View > Actions > Actions Modal anse Select “Play Slide” option.

• Click on the ‘Add to “button-x”‘.

• Click on the “x” button of Actions modal to close it.

• Click on the “Save” button to save tha play buttom.

Add Pause button to all slides

• Select Play button in the global layer of revolution slider and Click on the Duplicate button.

• Retain the new duplicated button at the same position
• Go to Editor View > Content > Text/Button Layer Content and Change the idel content to the “Pause” of the duplicated button.

• Go to Editor View > Actions >. Actions Modal and Select “Pause Slider” action.

• After Selecting Action of the Pause button, Click on the “Add action to Button-x”.

• Click on the “x” button of Pause Slider action modal popupbox.

Make Play and Pause button toggling display, Add screen reader text and focusable

To add screen reader text, make them focusable and toggling display add the below code in the root/wp-content/mu-plugins/revolution-slider-web-accessible.php file:

function pmb_make_rev_slider_play_pause_buttons_accessible() {
        <script>
		var revapi = jQuery(document).ready(function() {
 
			jQuery('#rev_slider_1').show().revolution({

				/* SLIDER SETTINGS HERE */

			});
		});

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

			var slider = jQuery(this);
			slider.find( '.slider-button' ).attr( 'role', 'button' );
			slider.find( '.slider-button.play' ).attr( 'aria-label', 'play slides' ).hide();
			slider.find( '.slider-button.pause' ).attr( 'aria-label', 'pause slides' );

			slider.find( '.slider-button.play' ).attr( 'tabindex', '0' );
			slider.find( '.slider-button.pause' ).attr( 'tabindex', '0' );
		});

		revapi.on('revolution.slide.onpause', function() {
			// console.log('paused');
			var slider = jQuery(this);
			slider.find( '.slider-button.play' ).show();
			slider.find( '.slider-button.pause' ).hide();
		});

		revapi.on('revolution.slide.onresume', function() {
			// console.log('resumed to play');
			var slider = jQuery(this);
			slider.find( '.slider-button.play' ).hide();
			slider.find( '.slider-button.pause' ).show();
		});
		</script>
    <?php
}
add_action('wp_footer', 'pmb_make_rev_slider_play_pause_buttons_accessible', 999);

Next Previous buttons with screen reader texts and focusable

To show the Next and Previous buttons in the revolution slider, Go to Revolution Slider > Navigation > Nav Editor > Choose your Factory Skin and click on the “Add New Navigation” and Then click on the “Save Navigation” button as mentioned in the below screenshots:

To add screen reader text and make next and previous buttons focusable, Add the below code in the root/wp-content/mu-plugins/revolution-slider-web-accessible.php file:

function pmb_make_rev_slider_accessible() {
        <script>
		var revapi = jQuery( document ).ready( function() {
 
			jQuery('#rev_slider_1').show().revolution({

				/* SLIDER SETTINGS HERE */

			});
		});

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

		});


		</script>
    <?php
}
add_action( 'wp_footer', 'pmb_make_rev_slider_accessible', 999 );

In the above code,rev_slider_1 is the id of the revolution slider. Please do not forget to replace it with your revolution slider id.