/ Published in: jQuery
jquery ui/tabs initiation ensures screenreaders can focus content when selecting tabs. Tested using Jaws 8.
Expand |
Embed | Plain Text
Copy this code and paste it in your HTML
/// Depends on jquery and jquery ui // Method 1, bind to tabsshow event $('#tabs').tabs().bind('tabsshow', function(ev, ui) { $(ui.panel).attr('tabindex','0').focus().removeAttr('tabindex'); }); // Method 2, bind to click event refocusses content in existing tab $('#tabs').tabs().find(' > ul a').bind('click', function (){ $($(this).attr('href')).attr('tabindex','0').focus().removeAttr('tabindex'); }); // Method 3, bind to tabshow within options $('#tabs').tabs({ fx: { opacity: 'toggle', duration: 'fast' }, show: function(event, ui) {$(ui.panel).attr('tabindex','0').focus().removeAttr('tabindex')} });