2

I need the Views Accordion module in Drupal 7 and what is in it to be accessible by the keyboard. When you are tabbing, it skips it completely. Also the screen reader does not recognize the closed items.

Anything I can modify to achieve this?

5
  • what does your markup look like? if you use <a> to toggle your accordion content, it will be tabbable (is that a word?!).
    – jdu
    Commented Jun 7, 2013 at 15:20
  • @jdu Sadly not. But I use it all the time too ;)
    – Clive
    Commented Jun 7, 2013 at 15:25
  • Hi, i dont understand about using the <a> to toggle your accordion content. what does that mean?
    – Diana
    Commented Jun 7, 2013 at 20:58
  • Hi, I can see that the views is putting an a href tag in the accordian header objects but still the tab does not get there. it looks like this :a href="#how_to_become_a_grantee-block-0" tabindex="-1">
    – Diana
    Commented Jun 11, 2013 at 14:14
  • so there are two problems that I see, one is that tabindex is -1 . How do I get rid of that? also the ahref anchor goes to a content that doesnt exist in the source
    – Diana
    Commented Jun 11, 2013 at 15:05

2 Answers 2

1

iput this in a block

<script type="text/javascript">
(function ($) {
  $(document).ready(function(){
$('a')  

 .each(function(){ // loop through all matched elements

  $(this).removeAttr("tabindex");  

}); 

});

})(jQuery);
</script>
0

The accordion is not accessible because it uses an extremely old version of Jquery UI that is included in Drupal core. The latest version of JqueryUI fixes several accessibility issues.

You need to

  • Install the v3 series of Jquery update module. Unfortunately the jquery update module has at the moment still a very old version of JQueryUI (but there are some issues working on it)

  • Until jquery update offers a recent version of JQueryUI you need to patch the module so you connect to the CDN of the latest JQueryUI version, see this issue: in jquery_update.module around line 529, just change the number of the latest version you want to use (see https://code.jquery.com/ui/). Depending on what of JQueryUI you are using you might also take an older version if you have issues.

     case 'google':
       $cdn = '//ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/jquery-ui' . $min . '.js';
       ...............
    
     case 'microsoft':
       $cdn = '//ajax.aspnetcdn.com/ajax/jquery.ui/1.12.1/jquery-ui' . $min . '.js';
       ...............
    
     case 'jquery':
       $cdn = '//code.jquery.com/ui/1.12.1/jquery-ui' . $min . '.js';
       ...............
    
  • Then go to /admin/config/development/jquery_update and select to use the CDN

  • Clear caches

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.