jQuery UI Tabs made accessible
- 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 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:
- Barrierefreie Live Validierung von Formularen mit jQuery
- Barrierefreie jQuery Lightbox nach WAI ARIA und WCAG 2.0
- Barrierefreie, sortierbare Tabellen mit jQuery
06. Dezember 2012
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
05. Dezember 2012
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.