Barrierefreies Webdesign — ein zugängliches und nutzbares Internet gestalten

Registernavigation für das Web veröffentlicht in 2015

Klassischer Tabpanel mit einer Linkliste

Registernavigationen müssen für Hilfsmittel wie Screenreader zugänglich gestaltet werden. Hierzu zählt:

  1. Nur der aktive Reiter steht in der Fokus-Reihenfolge. Innerhalb der Registerleiste wird der Fokus u.a. per Pfeiltasten bewegt.
  2. Die Reiterleiste und die Reiter benötigen eine Rolle (tablist bzw. tab), die Browser in den Accessibility-Tree ablegen können. Darüber hinaus benötigt der aktive Reiter eine semantische Kennzeichnung (aria-selected).
  3. Ein Reiter wird aktiviert (und der Inhalt der Registerseite ausgetauscht), wenn die Leertaste gedrückt wird. Die Aktivierung darf nicht durch bloßes Fokussieren stattfinden.
  4. Die Registerseiten benötigen eine Rolle (tabpanel) und eine Beschriftung. Wenn die Beschriftung durch den Reiter erfolgt, dann muss der Text des Reiters mit der Registerseite verknüpft werden.

Registernavigationen können im HTML unterschiedlich aufgebaut werden. Diese Variante setzt folgenden HTML-Aufbau und -Attribute voraus:

<div class="register">
  <ul class="registerleiste">
    <li id="beschriftung-id1" class="reiter"><a href="#id1" class="komponente">Beschriftung 1</a></li>
    <li id="beschriftung-id2" class="reiter"><a href="#id2" class="komponente">Beschriftung 2</a></li>
    <li id="beschriftung-id3" class="reiter"><a href="#id3" class="komponente">Beschriftung 3</a></li>
    ...
  </ul>
  <div id="id1" class="registerseite">
    <p>Inhalt für Registerseite 1.</p>
  </div>
  <div id="id2" class="registerseite">
    <p>Inhalt für Registerseite 2.</p>
  </div>
  <div id="id3" class="registerseite">
    <p>Inhalt für Registerseite 3.</p>
  </div>
  ...
</div>

Durch die Zuweisung von Rollen wird die Bedeutung der ursprünglichen HTML-Elemente vollständig verändert. Nachdem die HTML-Struktur mit JavaScript verarbeitet wird, muss die Registernavigation folgende Attribute aufweisen:

<div class="register">
  <element role="tablist">
    <element role="tab" aria-selected="true" aria-controls="id1" tabindex="0" id="beschriftung-id1">Beschriftung 1</element>
    <element role="tab" aria-controls="id2" tabindex="-1" id="beschriftung-id2">Beschriftung 2</element>
    <element role="tab" aria-controls="id3" tabindex="-1" id="beschriftung-id3">Beschriftung 3</element>
    ...
  </element>
  <element role="tabpanel" aria-labelledby="beschriftung-id1" id="id1">
    <p>Inhalt für Registerseite 1.</p>
  </element>
  <element role="tabpanel" aria-hidden="true" aria-labelledby="beschriftung-id2" id="id2">
    <p>Inhalt für Registerseite 2.</p>
  </element>
  <element role="tabpanel" aria-hidden="true" aria-labelledby="beschriftung-id3" id="id3">
    <p>Inhalt für Registerseite 3.</p>
  </element>
  ...
</div>

Die ARIA-Attribute haben folgende Bedeutung:

  • Die role-Attribute definieren die Semantik der Elemente neu. Damit können die Reiter und die Registerseiten semantisch identifiziert werden.
  • Mit aria-selected="true" wird das Element als aktives Element im Accessibility-Tree gekennzeichnet.
  • Das Attribut aria-controls mit der ID der zugehörigen Reiterseite als Wert erlaubt es Screenreadern, mit einem Tastenbefehl zur zugehörigen Registerseite zu springen.
  • Hat das tabindex-Attribut einen Wert von 0, so steht das Element in der Fokus-Reihenfolge. Ist hingegen der Wert -1, so kann das Element nur per JavaScript fokussiert werden. Damit kann gewährleistet werden, dass in der Reiterleiste nur das aktive Element in der Fokus-Reihenfolge steht.
  • Mit dem aria-labelledby-Attribut wird ein Text als Beschriftung für die Registerseite herangezogen.
  • Mit aria-hidden="true" wird ein Element und alle seiner Kindknoten nicht an den Accessibility-Tree des Betriebssystems übertragen, d.h. die Inhalte sind zwar sichtbar, können aber nicht von Screenreadern erfasst werden (siehe dazu die Hinweise unten.

Fokus-Reihenfolge der Reiterleiste:

  • Wenn der Fokus in die Reiterleiste per Tab-Taste gesetzt wird, wird das aktive Element fokussiert. Ein erneutes Drücken der Tab-Taste führt zum nächsten aktiven Element hinter der Reiterleiste.
  • Gleiches gilt, wenn mit Umschalt+Tab der Fokus in die Reiterleiste gesetzt wird, nur wird beim erneuten Drücken der Tastenkombination das nächste aktive Element vor der Reiterleiste fokussiert.

Tastaturbedienung, wenn der Fokus in der Reiterleiste gesetzt ist:

  • Die Leertaste aktiviert den fokussierten Reiter und ersetzt die Registerseite mit der zum Reiter zugehörigen Registerseite, ohne dabei den Fokus zu verändern.
  • Pfeiltaste nach rechts oder nach unten setzt den Fokus auf den nächsten Reiter. Ist der Fokus bereits auf den letzten Reiter, wird der Fokus auf den ersten Reiter gesetzt
  • Pfeiltaste nach links oder nach oben setzt den Fokus auf den vorherigen Reiter. Ist der Fokus bereits auf den ersten Reiter, wird der Fokus auf den letzten Reiter gesetzt
  • Die Pos1-Taste setzt den Fokus auf den ersten Reiter.
  • Die Ende-Taste setzt den Fokus auf den letzten Reiter.

Tastaturbedienung, wenn der Fokus in der Registerseite gesetzt ist:

  • Strg+Pfeil nach oben oder Strg+Pfeil nach links setzt den Fokus auf den zur Registerseite zugehörigen Reiter.
  • Strg+SeiteAuf setzt den Fokus auf den vorherigen Reiter und aktiviert sie. Wird die erste Registerseite bereits angezeigt, wird der letzte Reiter fokussiert und aktiviert.
  • Strg+SeiteAb setzt den Fokus auf den nächsten Reiter und aktiviert sie. Wird die letzte Registerseite bereits angezeigt, wird der erste Reiter fokussiert und aktiviert.

Links

Sie können das Beispiel mit der Linkliste Archiv: als .zip herunterladen.

Weitere Beispiele mit einem alternativen Aufbau im HTML stehen zur Verfügung:

Einschränkungen bei der Tastaturbedienung

Innerhalb von Registerseiten gibt es folgende Einschränkungen für die Tastaturbedienung:

Hinweise zum CSS

Zwei Angaben im CSS dürfen nicht vernachlässigt werden:

  1. Der Tastaturfokus muss sichtbar sein, was auch für den Kontrastmodus gilt. Für den Kontrastmodus wurde ein border-bottom für die Visualisierung in der Reiterleiste gewählt.
  2. Es gibt eine CSS-Eigenschaft, die in jedem Fall übernommen werden sollte: .registerseite[aria-hidden=true] {display:none;}.

Feinheiten mit ARIA

Einzelne Reiter sollten mit ihren zugehörigen Registerseiten verknüpft werden. Die ARIA-Spezifikation gibt 2 alternative Möglichkeiten vor, die beide berücksichtigt wurden: