Keyboard accessible slideshow controls

Keyboard accessible slideshow controls was created by adamgatt

Posted 6 years 3 months ago #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:
Code:
fakeHover.append( '<div class="camera_prev"><span></span></div>' ).append( '<div class="camera_next"><span></span></div>' );

to:
Code:
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:
Code:
$('.camera_pag_ul',wrap).append('<li class="pag_nav_'+li+'" style="position:relative; z-index:1002"><span><span>'+li+'</span></span></li>');

to:
Code:
$('.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:
Code:
$(commands).append('<div class="camera_play"></div>').append('<div class="camera_stop"></div>');

To:
Code:
$(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
Code:
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
Code:
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
Code:
$('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
Code:
$('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
Code:
$('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.

Replied by ced1870 on topic Keyboard accessible slideshow controls

Posted 6 years 3 months ago #46401
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

Joomlack Webmaster and Developer

by ced1870

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

Replied by ced1870 on topic Keyboard accessible slideshow controls

Posted 6 years 2 months ago #46554
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
Code:
camera_thumbs_wrap.on('click keypress','.camera_stop',function(e){ if ((e.type == 'keypress' && e.which == 13) || e.type == 'click') { ...
Hope it helps
CEd

Joomlack Webmaster and Developer

by ced1870

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

Replied by adamgatt on topic Keyboard accessible slideshow controls

Posted 6 years 2 months ago #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.

Replied by ced1870 on topic Keyboard accessible slideshow controls

Posted 6 years 2 months ago #46556
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.

Joomlack Webmaster and Developer

by ced1870
The following user(s) said Thank You: adamgatt

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

Replied by adamgatt on topic Keyboard accessible slideshow controls

Posted 6 years 2 months ago #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.

Time to create page: 0.721 seconds

Fast and powerful creation, customizable and responsive.

Read More

We have 815 guests and no members online