jQuery UI Tabs made accessible

Avatar of Felix Nagel Felix Nagel - 29. November 2009 - jQuery, Accessibility, Open Source, Studium

  • Features-jquery-aria

    © jQuey Logo: 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

Oops, an error occurred! Code: 2017081205554033b96f87

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.

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.