jQuery UI Tabs made accessible

Felix Nagel - 29. November 2009 - jQuery, Accessibility

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 WAIARIA 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:

Tabs HTML

<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:

2 Kommentare Permalink

Die Kommentarfunktion ist für diesen Artikel deaktiviert.

2 Kommentare

Felix Nagel

06. Dezember 2012

Falsche Adresse

Hey Andreas,

ich glaube da bist du hier falsch. Dieses Seite erläutert ein a11y Addon für die jQuery UI Tabs, generell eher ein Thema für versierte Webworker.

Du solltest dir mal jQuery UI Tabs im allg. genauer anschauen: jqueryui.com/demos/tabs/

Zur Integration in dein spezielles CMS wird man dir da aber auch kaum helfen können. Da frag lieber mal im Hilfsforum oder beim Support für dein CMS an.

Grüße

Felix

Andreas

05. Dezember 2012

Wo muss was einbinden?

Hallo,

ich suche genau so ein Ta Menu um auf meiner HP www.whv-kicker.de/index.php?forum unten eine Legende per Tab Menu einzubinden.

Nur steht hier niergenwo, wo ich welchen Code einügen muss wo ich die ui-lightness Dateien uploaden muss.

Ich ntze das CMS System ilch für Clans.

ich habe folgende Ordnersturkturen für die CSS/ JS Dateien und meine showforum.htm

includes/css

includes/js

für die showforum.htm

templates/ilchbb_forum

Ich blicke hier nicht durch da keine Anleitung vorhanden ist.