fk:Blog – Fabians Weblog

jQuery Accessible Tabs

Dirk Ginader hat vor einiger Zeit mit einem Kollegen zusammen ein “wirklich” zugängliches “jQuery UI Tab Plugin” geschrieben.

Da ich mich in den letzten Wochen stark mit dem xHTML & CSS Framework “YAML” und auch mit “jQuery” auseinander gesetzt habe, bin ich auf dieses Plugin von Dirk Ginader gestoßen.

Das Plugin überzeugt wirklich durch seine Zugänglichkeit, denn selbst bei deaktivieren JavaScript im Browser wird eine saubere und Nutzerfreundliche Anzeige des Inhaltes präsentiert.
Ledentlich eine Schwachstelle viel mir an diesen Plugin auf. Aber machen wir langsam.
Hier erstmal der Aufbau des HTML Markups für die Realisierung der Tabs mit dem Plugin:

    <div class="tabs">
        <h6>some dummy headline</h6>
        <div class="tabbody">
            <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</p>
            <h3>Lorem ipsum</h3>
            <p>Nullam malesuada suscipit pede. Nullam ipsum lacus, varius</p>
        </div>
        <h6>another dummy headline</h6>
        <div class="tabbody">
            <p>Integer tincidunt. Cras dapibus. Vivamus elementum nisi.</p>
            <p>Quisque rutrum. Aenean imperdiet. Etiam ultricies nisi vel.</p>
        </div>
        <h6>anything else</h6>
        <div class="tabbody">
            <p>Here could be your content</p>
        </div>
    </div>

Das Überschrift Element h6 spielt eine entscheidende Rolle für die Zugänglichkeit der Tabs. Bei Deaktivierten JavaScript wird, wie erwähnt, der Tab Inhalt ganz Normal Angezeigt, als wäre alles Normal.

Bei Eingeschalteten JavaScript wird das HTML Markup durch das Plugin umgewandelt, so das folgende Ausgabe im Quelltext entsteht:

  <div class="tabs">
    <ul class="tabfield">
      <li class="current">
        <a href="#accessibletabscontent1254913644480" id="accessibletabs1254913644480"><span class="current-info">current tab: </span>some dummy headline</a>
      </li>
      <li>
        <a href="#accessibletabscontent1254913644480">another dummy headline</a>
      </li>
      <li>
        <a href="#accessibletabscontent1254913644480">anything else</a>
      </li>
    </ul>
    <div class="content">
      <h6><a id="accessibletabscontent1254913644480" name="accessibletabscontent1254913644480" class="accessibletabsanchor" tabindex="0">some dummy headline</a></h6>
      <div class="tabbody" style="display: block;">
        <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</p>
        <h3>Lorem ipsum</h3>
        <p>Nullam malesuada suscipit pede. Nullam ipsum lacus, varius</p>
			</div>
      <div class="tabbody" style="display: none;">
        <p>Integer tincidunt. Cras dapibus. Vivamus elementum nisi.</p>
        <p>Quisque rutrum. Aenean imperdiet. Etiam ultricies nisi vel.</p>
      </div>
			<div class="tabbody" style="display: none;">
        <p>Here could be your content</p>
      </div>
    </div>
  </div>

Ihr seht, das bzw. die Überschrift Elemente h6 wurden von dem Tab Plugin in eine “Liste” umgewandelt, so das man nun mittels CSS seine Tabs gestallten kann wie man es gerne möchte.

Ein Problem mit dem jQuery Plugin, das mir während den Arbeiten an yPress (Aktueller Theme von fkBlog) aufgefallen war, ist das man innerhalb des der Tabs keine Listen einfügen kann (Oder nur mit viel CSS um Schreiberei).

Ich habe mir daher mal das Plugin genauer angesehen und festgestellt, das Dirk die “UL-Listen” im Plugin ohne eine CSS Klasse etc. anbietet. (Original Code: $(el).prepend('<ul>'+list+'</ul>'); )
entsprechend in der CSS Angepasst hatte. war es möglich auch innerhalb der Tabs Listen zu erstellen, das Ergebnis seht ihr ja u.a. auf jeder Artikel Seite am ende.

Das Tab Plugin von Dirk bringt aber eine weiteren Vorteil für Screenreader mit, mehr dazu lest ihr am besten in dem Orginal Artikel von ihm.

Eine Beispielseite inkl. dem Download der angepassten Plugin Version findet ihr auf meinen Examples Seiten unter jQuery Example: »jQuery Accessible Tabs«.

Übrigens, seit Version 3.2 ist das jQuery Plugin bestandteil des YAML-Frameworkes.

---