Klappfunktion mit jQuery und WAI-ARIA accessible machen.

af-toggle.js

/* 
 * Klappfunktion mit jQuery accessible machen mit WAI-ARIA. Skript von Alexander Farkas. 
 * Original: http://gist.github.com/329709
 * Fork: http://gist.github.com/329832
 * Ausgangsartikel mit Diskussion dazu: 
   http://grochtdreis.de/weblog/2010/03/11/anreicherung-meiner-webseite-mit-wai-aria/
*/
(function($){

/* a11y-helper */
/*
 * gibt die ID eines Elements zurück und erstellt falls nötig eine
 * 
 */
if(!$.fn.getID){
	var uId = new Date().getTime();
	$.fn.getID = function(setAll){
		
		function setID(){
			var id 		= this.getAttribute('id');
			if(!id){
				id = 'ID-' + (uId++);
				this.setAttribute('id', id);
			}
			return id;
		}
		if(this[0]){
			if(setAll){
				this.each(setID);
			}
			return setID.call(this[0]);
		}
		return undefined;
	};
}

/* 
 * So kann man einzelne Attribute leichter zuweisen. 
 * Aus den Attributen werden Funktionen, die Werte der Attribute werden diesen übergeben.
*/
$.each({
	labelWith: 'aria-labelledby',
	describeWith: 'aria-describedby',
	ownsThis: 'aria-owns',
	controlsThis: 'aria-controls',
	activateThis: 'aria-activedescendant'
}, function(name, prop){
	$.fn[name] = function(elem){
		return this.attr(prop, $(elem).getID());
	};
});

/*
 * Eingabeunabhängiges Clickevent, sowohl für normalerweise klickbare als auch nichtklickbare Elemente geeignet.
 */
var preventclick = false;
		
function handleAriaClick(e){
	
	if(!preventclick && (!e.keyCode || e.keyCode === 13)){
		//ToDo:  || e.keyCode === $.ui.keyCode.SPACE
		preventclick = true;
		setTimeout(function(){
			preventclick = false;
		}, 1);
		return $.event.special.ariaclick.handler.apply(this, arguments);
	} else if(preventclick && e.type == 'click'){
		e.preventDefault();
		return false;
	}
	return undefined;
}
$.event.special.ariaclick = {
	setup: function(){
		$(this).bind('click keydown', handleAriaClick);
        return true;
    },
	teardown: function(){
        $(this).unbind('click keydown', handleAriaClick);
        return true;
    },
    handler: function(e){
        e.type = 'ariaclick';
        return $.event.handle.apply(this, arguments);
    }
};

})(jQuery);

/*
 * Die eigentliche Implementierung:
 */
(function($){
	$('.toggle h3').each(function() {
		var button = $(this);
		var nextID = button.next().attr('id');
		var panel = button.next().attr({role: 'group'}).labelWith(button);
		button
			.attr({
				role: 'button',
				'aria-expanded': 'false',
				'aria-controls': nextID,
				tabindex: 0
			})
			//.controlsThis(panel)
			.bind('ariaclick', function(){
				button.add(panel).attr('aria-expanded', String( button.is('[aria-expanded=false]') ) );
				panel.slideToggle('fast');
			})
		;
	});
})(jQuery);