Accessibility question for slider

m.lohrman's Avatar

m.lohrman

05 Aug, 2019 03:14 PM

Good morning! I have Royalslider implemented on a site that is getting some updates for better accessibility. I have "keyboardNavEnabled" set to true, which works nicely for moving between slides. But once on a slide, is it possible to Tab or some other key press to move between links within a slide? Currently if I press "Tab", it messes up the slider. I think optimally we would like to be able to move between slides with the keyboard using the Arrows or Tab button, then when on a slide, be able to move through the links within a slide using the arrow keys or Tab key. Any information would be great, thanks!

Using the slider at http://seismicbrewingco.com/

  1. Support Staff 1 Posted by Dmitry Semenov on 05 Aug, 2019 06:09 PM

    Dmitry Semenov's Avatar

    Hello,

    You may focus link is the selected slide like so:

    $('.royalSlider').each(function() {
      var slider = $(this).data('royalSlider');
      slider.ev.on('rsAfterSlideChange', function() {
        slider.currSlide.content.find('a:first').focus();
      });
    });
    

    but be careful with autoplay option if you do this.

  2. 2 Posted by m.lohrman on 06 Aug, 2019 02:24 PM

    m.lohrman's Avatar

    Dmitry, thanks for this! It worked well. One more thing, slightly off-topic. I have 2 sliders on the page, when using arrow keys to change slides, I think it is changing both slideshows at the same time, This was not previously an issue as they aren't visible at the same time. But with the focus code, the focus is jumping between the 2 sliders. Is there any way for the script to know what slider is visible and will only control that slider with the arrow keys? Thanks!

  3. Support Staff 3 Posted by Dmitry Semenov on 06 Aug, 2019 03:55 PM

    Dmitry Semenov's Avatar

    There is no built-in option for this, you'll need to disable default keyboard navigation and implement your own, you may use slide methods like:

    var slider = $(".royalSlider").data('royalSlider');
    slider.next();  // go to next slide
    slider.prev();  // go to previous slide
    
  4. 4 Posted by m.lohrman on 06 Aug, 2019 05:58 PM

    m.lohrman's Avatar

    Thank you!

Reply to this discussion

Internal reply

Formatting help / Preview (switch to plain text) No formatting (switch to Markdown)

Attaching KB article:

»

Attached Files

You can attach files up to 10MB

If you don't have an account yet, we need to confirm you're human and not a machine trying to post spam.

Keyboard shortcuts

Generic

? Show this help
ESC Blurs the current field

Comment Form

r Focus the comment reply box
^ + ↩ Submit the comment

You can use Command ⌘ instead of Control ^ on Mac