Posted By

terrencewood on 03/11/09

Tagged

Versions (?)

Last Edited at 03/11/09 11:58pm

Statistics

Viewed 701 times

Favorited by 3 user(s)

Related snippets

jquery accessible tabs

/ 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')}
 
			});