0

I need to make a an existing slider navigation controls accessible (wcag2), meaning --> to enable full keyboard support for the Prev and Next buttons. 1. first I need to make sure that the buttons get focus when the user is navigating with the tab key. 2. when the user press "ENTER" the slider will work the same way as the cicking with the mouse pointer on that button.

so far this is what I did:it solves the first problem but not the second one:(

jquery( document ).ready(function(){
 jquery(".fusion-naprev").attr("tabindex","0").addClass("tab_enable");
 jquery(".fusion-nanext").attr("tabindex","0").addClass("tab_enable");
 jquery(".tab_enable").keypress(function(e) {
 var code = e.keyCode || e.which;
  if (code == '13'){
     jquery(this).mouseover();
   } 
});
Cœur
  • 37,241
  • 25
  • 195
  • 267
turcospeed
  • 23
  • 5
  • I assume you are creating your own slider rather than using a native html5 one (``)? The built in slider is already accessible. You will also need to handle left/right/pageup/pagedown/home/end keys. The authoring practices has good information about sliders, https://www.w3.org/TR/wai-aria-practices/#slider. A working demo of your problem would be helpful to further diagnose. – slugolicious Nov 12 '16 at 13:48
  • perhaps I will be more specific ,when the prev button has focus and the user press enter, I want that the button will behave as if the user clicked on it with the mouse.pointer – turcospeed Nov 12 '16 at 16:26

0 Answers0