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.

Enable Keyboard Navigation in the Revolution Slider

Play and Pause links or buttonswith screen reader texts and focusable

Add Play button to all slides
  • Go to Slides > Global Layers.
Select Global Layer in Revolution Slider
  • Add Button Layer from Add Layers > Button.
Add New Button Layer In Revolution Slider
  • 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:
Set Button Horizontally center and Vertically bottom in Revolution Slider
  • 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:
Change Label of the Play button in Global Layer of Revolution Slider
  • Go to Editor View > Attributes > Attributes Tab > fill classes textbox field with the value “slider-button play”.
Play button class attribute set in Global Layer of Revolution Slider
  • Go to Editor View > Actions > Actions Modal anse Select “Play Slide” option.
Set Play action upon click on the play button of global layer
  • Click on the ‘Add to “button-x”‘.
Add Acttion to button-x in the play button of global layer of revolution slider
  • Click on the “x” button of Actions modal to close it.
Close Actions modal of the play button in global layer in revolution slider
  • Click on the “Save” button to save tha play buttom.

Save the play button in global layer of revolution slider
Add Pause button to all slides
  • Select Play button in the global layer of revolution slider and Click on the Duplicate button.
Duplicate the play button in global layer of revolution slider
  • 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.
Set content of pause button to “Pause” in-revolution-slider
  • Go to Editor View > Actions >. Actions Modal and Select “Pause Slider” action.
Set Pause.Button Action to “Pause Slider” in Revolution Slider
  • After Selecting Action of the Pause button, Click on the “Add action to Button-x”.
Add Action to Pause Button Revolution Slider
  • Click on the “x” button of Pause Slider action modal popupbox.
Close the pause slider action modal in the Revolution Slider
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:

Add New Navigation in Nav Editor of Revolution Slider
Save Navigation in Nav Editor of Revolution Slider

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.

Leave a Reply

Your email address will not be published. Required fields are marked *

Prashant Baldha