Create a gist now

Instantly share code, notes, and snippets.

What would you like to do?
Klappfunktion mit jQuery und WAI-ARIA accessible machen.
/*
* 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);
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment