jQuery UI Tabs made accessible

29. November 2009, Felix Nagel in jQuery, Accessibility, Open Source, Studium

  • jQuey Logo: (c) The jQuery Project

Zeit für Post 3 in meiner Reihe über jQuery Accessible Rich Internet Applications im Zuge meiner Diplomarbeit: Accessible Tabs

 

jQuery UI stellt bereits ein sehr mächtiges UI Widget für Tabs zur Verfügung und so war für mich schnell klar das ich dieses erweitern und verbessern will. Nachdem ich verschiedene Methoden zur Erweiterung vorhandener Klassen in jQuery durch hatte und diese alle nicht hinnehmbare Probleme mit sich brachten, entschied ich mich dafür relativ schlicht die Funktionen zu überschreiben und die Originalmethoden vor meinen Änderungen aufzurufen.

 

Das sieht dann ungefähr so aus:

Tabs JS

// extends original ui.tabs widget
$.fn.extend($.ui.tabs.prototype,{
	// copy original method
	_original_init: $.ui.tabs.prototype._init,
	// when widget is initiated
	_init: function() {
		var self = this, options = this.options;			
		// fire original method
		self._original_init();			
		
		// now we can do some accessibility stuff
	}
});

Methode _init wird hier sozusagen „abgespeichert“ und dann in der überschriebenen Funktion aufgerufen. So kann ich auf die Optionen und Methoden des Originalwidget zugreifen und habe trotzdem eine akzeptable Trennung von Original und Erweiterung – nur so konnte ich die Updatefähigkeit erhalten.

Features

 

Benutz die normalen jQuery UI Tabs, mit allen Möglichkeiten und Optionen – sie werden alle (!) unterstützt: AJAX, collapsible content, open on mouseover, oder rotate. Natürlich ist auch dieses Widget jQuery UI CSS Framework kompatibel und funktioniert daher mit dem Themeroller.

 

Hier werden unter anderem die WAI ARIA Eigenschaften aria-labelledby, aria-role, aria-hidden, aria-expanded, aria-selected, aria-controls sowie die Standard tabindex Eigenschaft genutzt. Einfach mal im Firebug anschauen!

How To

 

Unter (!) die für ui.tabs benötigten JS Files kommt meine Datei. Das ist alles:

 
<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript" src="js/ui.core.js"></script>
<script type="text/javascript" src="js/ui.tabs.js"></script>
<script type="text/javascript" src="js/ui.ariaTabs.js"></script>

Demo und Donwload

jQuery Accessible Tabs Demo

 

jQuery Accessible Tabs Download

 

 

Auch dieses Widget entstand während meiner Diplomarbeit “Barrierefreie, Java-Script gestützte Webapplikationen im praxisnahen Umfeld” bei der Full Service Internetagentur Namics.

 

Es steht unter Creative Commons BY-SA Lizenz und kann somit auch für kommerzielle Projekte genutzt werden.

 

 

Weitere jQuery Widgets aus meiner Diplomarbeit:

 

 

Die Kommentarfunktion ist für diesen Artikel deaktiviert.

0 Kommentare