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 fiel 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 damals 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>'); )
Eine minimale Anpassung an das jQuery Script von Dirk, ermöglicht dann auch das einfügen von Listen in den jQuery Tabs.

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.