Techniken für WCAG 2.0

Zum Inhalt

-

H4: Erstellung einer logischen Tab-Reihenfolge durch Links, Formular-Steuerelemente und Objekte

Anwendbarkeit

HTML und XHTML

Die Technik bezieht sich auf:

Beschreibung

Das Ziel dieser Technik ist es, eine logische Tab-Reihenfolge zur Verfügung zu stellen, wenn die Standard-Tab-Reihenfolge nicht ausreicht. Ost reicht G59: Platzierung der interaktiven Elemente in einer Reihenfolge, die sich nach Abfolgen und Beziehungen innerhalb des Inhalts richtet aus und diese Technik ist nicht notwendig. Es ist sehr leicht, Usability-Programmfehler einzubauen, wenn man die Tab-Reihenfolge explizit festlegt.

In manchen Fällen kann es sein, dass der Autor eine Tab-Reihenfolge festlegen möchte, die den Beziehungen im Inhalt folgt, ohne der Reihenfolge der interaktiven Elemente im Code zu folgen. In diesen Fällen kann eine alternative Reihenfolge festgelegt werden, indem man das tabindex-Attribut des interaktiven Elements benutzt. Der tabindex erhält einen Wert zwischen 0 und 32767.

Wenn man per Tab-Taste durch die interaktiven Elemente navigiert, dann erhalten die Elemente den Fokus in aufsteigender Reihenfolge des Wertes ihres tabindex-Attributs. Elemente, deren tabindex-Wert größer Null ist, erhalten den Fokus vor Elementen ohne tabindex oder einem tabindex von 0. Nachdem alle Elemente mit einem tabindex größer 0 den Fokus erhalten haben, erhält der Rest der interaktiven Elemente den Fokus in der Reihenfolge, in der sie auf der Webseite erscheinen.

Beispiele

Beispiel 1

Ein Formular zur Abstammungssuche sucht nach Heiratsurkunden. Das Suchformular enthält verschiedene Eingabefelder für Braut und Bräutigam. Das Formular wurde ausgezeichnet, indem eine Datentabelle benutzt wurde, welche die Felder für den Bräutigam in der ersten Spalte und die Felder für die Braut in der zweiten Spalte enthält. Die Reihenfolge des Inhalts ist Zeile für Zeile, aber der Autor hat das Gefühl, dass es logischer wäre, Spalte für Spalte durch das Formular zu navigieren. Auf diese Art und Weise können die Kriterien des Bräutigams ausgefüllt werden bevor man zu den Kriterien der Braut geht. Die tabindex-Attribute der Eingabefelder werden dazu benutzt, eine Tab-Reihenfolge festzulegen, die Spalte für Spalte navigiert.

Code-Beispiel:

			<form action="#" method="post">
 <table summary="the first column contains the search criteria 
  of the groom, the second column the search criteria of 
  of the bride">
 <caption>Search for marriage records</caption>
 <tr>
   <th>Search criteria</th>
   <th>Groom</th>
   <th>Bride</th>
 </tr>
 <tr>
  <th>First name</th>
  <td><input type="text" size="30" value="" name="groomfirst" 
      title="First name of the groom" tabindex="1"></td>
  <td><input type="text" size="30" value="" name="bridefirst" 
       title="First name of the bride" tabindex="4"></td>
 </tr>
 <tr>
  <th>Last name</th>
  <td><input type="text" size="30" value="" name="groomlast" 
      title="Last name of the groom" tabindex="2"></td>
  <td><input type="text" size="30" value="" name="bridelast" 
      title="Last name of the bride" tabindex="5"></td>
 </tr>
 <tr>
  <th>Place of birth</th>
  <td><input type="text" size="30" value="" name="groombirth" 
      title="Place of birth of the groom" tabindex="3"></td>
  <td><input type="text" size="30" value="" name="bridebirth" 
      title="Place of birth of the bride" tabindex="6"></td>
 </tr>
</table>
</form>      

Beispiel 2

Eine Webseite enthält ein Suchformular in der oberen rechten Ecke. Das Feld erhält den tabindex="1", so dass es in der Tab-Reihenfolge zuerst erscheint, auch wenn es nicht erstes in der Reihenfolge des Inhalts ist.

Beispiel 3

Tabindex-Werte müssen nicht sequentiell sein, noch müssen sie mit einem bestimmten Wert beginnen. Die Werte müssen nicht einzigartig sein. Elemente, die identische tabindex-Werte haben, werden in der Reihenfolge, in der sie im Zeichenfluss, dem so genannten "character stream", erscheinen, navigiert. Somit wäre die Tab-Reihenfolge im folgenden Beispiel eins, zwei, drei, vier.

Code-Beispiel:

			<a href="" tabindex="1">one</a>
 <a href="" tabindex="2">two</a>
 <a href="" tabindex="1">three</a>
 <a href="" tabindex="2">four</a>  

In Bereichen des Inhalts, in denen die Tab-Reihenfolge der Reihenfolge des Inhalts folgt, kann es weniger fehleranfällig sein, allen Elementen den gleichen tabindex-Wert zu geben, statt unterschiedliche Zahlen für jedes Element festzulegen. Dann ist es einfach, diese Elemente neu anzuordnen oder neue Elemente hinzuzufügen und eine logische Tab-Reihenfolge beizubehalten.

Code-Beispiel:

			 <a href="xxx" tabindex = "1">First link in list</a>
<a href="xxx" tabindex = "1">Second link in list</a>
<a href="xxx" tabindex = "1">Link that was added long 
  after the original list was created</a>
<a href="xxx" tabindex = "1">Third link in list</a>
  ...
<a href="xxx" tabindex = "1">Twentieth link in list</a>      

Ressourcen

Ressourcen sind nur zu Informationszwecken und keine offizielle Empfehlung.

Tests

Vorgehensweise

  1. Prüfen Sie, ob tabindex benutzt wird

  2. Wenn tabindex benutzt wird, prüfen Sie, ob die Tab-Reihenfolge, die durch die tabindex-Attribute festgelegt wird, den Beziehungen im Inhalt folgt.

Erwartete Ergebnisse

Wenn dies eine ausreichende Technik für ein Erfolgskriterium ist, dann bedeutet das Scheitern an diesem Testverfahren nicht zwangsläufig, dass das Erfolgskriterium nicht auf irgendeine andere Art und Weise erfüllt wurde, sondern nur, diese Technik nicht erfolgreich implementiert wurde und nicht benutzt werden kann, um die Konformität zu erklären.