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

TOPIC: Keyboard accessible slideshow controls

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

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: 19767
  • Karma: 412
  • Thank you received: 2523
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: 19767
  • Karma: 412
  • Thank you received: 2523
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

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: 19767
  • Karma: 412
  • Thank you received: 2523
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 18 Jan 2018 03:56 #46677

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.

Keyboard accessible slideshow controls 18 Jan 2018 07:10 #46679

  • ced1870
  • ced1870's Avatar
  • Offline
  • Administrateur
  • Administrateur
  • Posts: 19767
  • Karma: 412
  • Thank you received: 2523
Hi
please explain what you need, and why this question
CEd
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 19 Jan 2018 20:03 #46690

I am just curious. I remember the day when the Joomla Extension directory used to show how many downloads an extension had. I can see your Wordpress slidershow has 4000 users. I am interested to see if Joomla is more popular.

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

Keyboard accessible slideshow controls 20 Jan 2018 09:32 #46695

  • ced1870
  • ced1870's Avatar
  • Offline
  • Administrateur
  • Administrateur
  • Posts: 19767
  • Karma: 412
  • Thank you received: 2523
ok, yes it has more than 4000 downloads, it is more used on joomla!
On wordpress there are more plugins and the people often don't take the time to investigate, if it does not work as expected within 5 seconds, then try another plugin
On Joomla! the situation is different, people ask for features to improve something that they find great.

Hope it helps

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

Joomlack Webmaster and Developer

Keyboard accessible slideshow controls 10 Mar 2018 10:54 #47373

Salut Cédric,

C'est formidable, je cherchais justement une solution de «Slideshow» avec navigation au clavier. Et comme j'adore tes extensions Joomla, ce serait vraiment top de pouvoir utiliser ton SlideshowCK pour ce projet.

Mais le client aimerait pouvoir naviguer (en avant / en arrière) via les flèches du clavier. Cela lui semble plus logique. Est-ce une option pour toi ?

Merci par avance pour ta réponse (que j'espère positive) !!!

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

  • Page:
  • 1
  • 2
Time to create page: 0.214 seconds

Fast and powerful creation, customizable and responsive.

Read More

Qui est en ligne

We have 741 guests and no members online