Welcome, Guest
Username: Password: Remember me
  • Page:
  • 1

TOPIC: Keyboard accessible slideshow controls

Keyboard accessible slideshow controls 19 Dec 2017 23:07 #46376

  • adamgatt
  • adamgatt's Avatar Topic Author
  • Away
  • Fresh Boarder
  • Fresh Boarder
  • Posts: 3
  • Thank you received: 1
Hi Cedric.

Firstly, many thanks for your efforts in making this slideshow module free. It is brilliant, definitely the best slider module I've ever used with Joomla.

Can I make some suggestions above improving the module to make it more accessible to meet the WCAG 2.0 AA level guidelines? Meeting these guidelines is a requirement for certain organisations in Australia. As such, I have been making small changes to some javascript files on multiple websites every time there is an update for the module.

I would like to share the changes I make hoping that it will help others. The changes allow the user to keyboard focus and tab/enter the next, previous, play, pause and slide index buttons. This allows vision impaired screen reader users to understand that there is a slideshow, and be able to control it with their keyboard.

The changes I have made are:

/assets/camera.js
Line 242 - Added tabindex and aria-label parameters to the divs as below:

Changed:
fakeHover.append(
			'<div class="camera_prev"><span></span></div>'
			).append(
			'<div class="camera_next"><span></span></div>'
			);

to:
fakeHover.append(
			'<div class="camera_prev" tabindex="0" aria-label="Show the previous slide"><span></span></div>'
			).append(
			'<div class="camera_next" tabindex="0" aria-label="Show the next slide"><span></span></div>'
			);

Line 1198 - Added tabindex and aira-label parameters to the list item as below:

Changed:
$('.camera_pag_ul',wrap).append('<li class="pag_nav_'+li+'" style="position:relative; z-index:1002"><span><span>'+li+'</span></span></li>');

to:
$('.camera_pag_ul',wrap).append('<li class="pag_nav_'+li+'" style="position:relative; z-index:1002" tabindex="0" aria-label="Show slide '+(li+1)+'"><span><span>'+li+'</span></span></li>');

Line 1331 - Added tabindex and aria-label parameters to the divs

Changed:
$(commands).append('<div class="camera_play"></div>').append('<div class="camera_stop"></div>');

To:
$(commands).append('<div class="camera_play"  tabindex="0" aria-label="Start the slideshow"></div>').append('<div class="camera_stop" tabindex="0" aria-label="Pause the slideshow"></div>');

Line 1022 - Added the keypress listener to camera_stop
camera_thumbs_wrap.on('keypress','.camera_stop',function(e){
			
			if(e.which == 13){//Enter key pressed
				autoAdv = false;
				elem.addClass('paused');
				if($('.camera_stop',camera_thumbs_wrap).length){
					$('.camera_stop',camera_thumbs_wrap).hide()
					$('.camera_play',camera_thumbs_wrap).show();
					if(loader!='none'){
						$('#'+pieID).hide();
					}
				} else {
					if(loader!='none'){
						$('#'+pieID).hide();
					}
				}
			}
		});

Line 1058 - Added the keypress listener to camera_play
camera_thumbs_wrap.on('keypress','.camera_play',function(e){
			if(e.which == 13){//Enter key pressed
				autoAdv = true;
				elem.removeClass('paused');
				if($('.camera_play',camera_thumbs_wrap).length){
					$('.camera_play',camera_thumbs_wrap).hide();
					$('.camera_stop',camera_thumbs_wrap).show();
					if(loader!='none'){
						$('#'+pieID).show();
					}
				} else {
					if(loader!='none'){
						$('#'+pieID).show();
					}
				}
			}
		});

Line 2500 - Added the keypress listener to camera_prev
$('div.camera_prev').on('keypress', prevNav, function(e){
						if(e.which == 13){//Enter key pressed
						//$(prevNav).click(function(){
							if(!elem.hasClass('camerasliding')){
								var idNum = parseFloat($('.cameraSlide.cameracurrent',target).index());
								clearInterval(u);
								imgFake();
								$('#'+pieID+', .camera_canvas_wrap',wrap).animate({opacity:0},0);
								canvasLoader();
								if(idNum!=0){
									nextSlide(idNum);
								} else {
									nextSlide(amountSlide);
							   }
							   opts.onStartLoading.call(this);
							}
						}
					});

Line 2538 - Added the keypress listener to camera_next
$('div.camera_next').on('keypress', nextNav, function(e){
						if(e.which == 13){//Enter key pressed
						//$(nextNav).click(function(){
							if(!elem.hasClass('camerasliding')){
								var idNum = parseFloat($('.cameraSlide.cameracurrent',target).index());
								clearInterval(u);
								imgFake();
								$('#'+pieID+', .camera_canvas_wrap',camera_thumbs_wrap).animate({opacity:0},0);
								canvasLoader();
								if(idNum==amountSlide-1){
									nextSlide(1);
								} else {
									nextSlide(idNum+2);
							   }
							   opts.onStartLoading.call(this);
							}
						}
					});

Line 2738 - Added keypress listener to camera_pag_ul
$('ul.camera_pag_ul').on('keypress', 'li', function(e){
						if(e.which == 13){//Enter key pressed
						//$('.camera_pag li',wrap).click(function(){
							if(!elem.hasClass('camerasliding')){
								var idNum = parseFloat($(this).index());
								var curNum = parseFloat($('.cameraSlide.cameracurrent',target).index());
								if(idNum!=curNum) {
									clearInterval(u);
									imgFake();
									$('#'+pieID+', .camera_canvas_wrap',camera_thumbs_wrap).animate({opacity:0},0);
									canvasLoader();
									nextSlide(idNum+1);
									opts.onStartLoading.call(this);
								}
							}
						}
					});

I've attached a copy of the camera.js (as a text file so that I could upload it) that I am using with the above changes. You can see the effect of this on www.visitpenrith.com.au - give it a go and use your keyboard to tab down to the slideshow and press Enter on your keyboard to 'click' the control buttons. :)

Regards,
Adam.
Attachments:

Please Log in or Create an account to join the conversation.

Keyboard accessible slideshow controls 21 Dec 2017 07:56 #46401

  • ced1870
  • ced1870's Avatar
  • Offline
  • Administrateur
  • Administrateur
  • Posts: 18534
  • Karma: 401
  • Thank you received: 2357
Hi
thank you very much for your help on this. I will check all this and see how to integrate this feature in the next version.
I will let you know
CEd

Please Log in or Create an account to join the conversation.

Joomlack Webmaster and Developer

Keyboard accessible slideshow controls 08 Jan 2018 21:12 #46554

  • ced1870
  • ced1870's Avatar
  • Offline
  • Administrateur
  • Administrateur
  • Posts: 18534
  • Karma: 401
  • Thank you received: 2357
Hi
I have now added your suggestion in the 1.4.49 that is available on joomlack.fr
I have modified the code to adapt it. Example to avoid to repeat the lines of code for each event, I have merged them like this
camera_thumbs_wrap.on('click keypress','.camera_stop',function(e){
			if ((e.type == 'keypress' && e.which == 13) || e.type == 'click') { ...
Hope it helps
CEd

Please Log in or Create an account to join the conversation.

Joomlack Webmaster and Developer

Keyboard accessible slideshow controls 08 Jan 2018 21:18 #46555

  • adamgatt
  • adamgatt's Avatar Topic Author
  • Away
  • Fresh Boarder
  • Fresh Boarder
  • Posts: 3
  • Thank you received: 1
Thanks, Cedric. You're an absolute legend!!!

And thanks for mentioning me in the Release notes. Would you please be able to change my name to Adam Gatt?

Many thanks! :cheer:
The following user(s) said Thank You: ced1870

Please Log in or Create an account to join the conversation.

Keyboard accessible slideshow controls 08 Jan 2018 21:25 #46556

  • ced1870
  • ced1870's Avatar
  • Offline
  • Administrateur
  • Administrateur
  • Posts: 18534
  • Karma: 401
  • Thank you received: 2357
thanks to you for your collaboration ! :)
I have updated the notes for your complete name.Don't hesitate to test and confirm me that all is ok on your side with my script because I have also seen a modification for the alt text that I have not implemented, and another line in your file that was commented without reason.
The following user(s) said Thank You: adamgatt

Please Log in or Create an account to join the conversation.

Joomlack Webmaster and Developer

Keyboard accessible slideshow controls Today 03:56 #46677

  • adamgatt
  • adamgatt's Avatar Topic Author
  • Away
  • Fresh Boarder
  • Fresh Boarder
  • Posts: 3
  • Thank you received: 1
Thanks, Cedric.

Do you have an estimate of how many downloads your module has or how many Joomla websites are using it?

Many thanks!

Please Log in or Create an account to join the conversation.

  • Page:
  • 1
Time to create page: 0.200 seconds

Fast and powerful creation, customizable and responsive.

Read More

Qui est en ligne

We have 375 guests and one member online