Posted By

terrencewood on 03/11/09


Tagged

javascript jquery accessibility


Versions (?)

Who likes this?

4 people have marked this snippet as a favorite

terrencewood
LeeRJohnson
jessibird
vali29


jquery accessible tabs


 / Published in: jQuery
 

jquery ui/tabs initiation ensures screenreaders can focus content when selecting tabs. Tested using Jaws 8.

  1. /// Depends on jquery and jquery ui
  2.  
  3.  
  4. // Method 1, bind to tabsshow event
  5. $('#tabs').tabs().bind('tabsshow', function(ev, ui) {
  6. $(ui.panel).attr('tabindex','0').focus().removeAttr('tabindex');
  7. });
  8.  
  9. // Method 2, bind to click event refocusses content in existing tab
  10. $('#tabs').tabs().find(' > ul a').bind('click', function (){
  11. $($(this).attr('href')).attr('tabindex','0').focus().removeAttr('tabindex');
  12. });
  13.  
  14. // Method 3, bind to tabshow within options
  15.  
  16. $('#tabs').tabs({
  17.  
  18. fx: { opacity: 'toggle', duration: 'fast' },
  19. show: function(event, ui) {$(ui.panel).attr('tabindex','0').focus().removeAttr('tabindex')}
  20.  
  21. });

Report this snippet  

You need to login to post a comment.