Techniken für WCAG 2.0

Zum Inhalt

-

H48: Benutzung von ol, ul und dl für Listen oder für Link-Gruppen

Anwendbarkeit

HTML, XHTML

Die Technik bezieht sich auf:

Anmerkungen zur Unterstützung durch Benutzeragenten und assistierende Techniken

Assistierende Techniken enthalten eine nicht konsistente Unterstützung für die unterschiedlichen Anwendungen des type-Attributs, das dazu benutzt wird, um die Gestaltung von Nummerierungen und Aufzählungspunkten anzugeben.

Beschreibung

Das Ziel dieser Technik ist es, Listen mit zusammenhängenden Punkten zu erstellen, indem die für ihren Zweck angebrachten Listenelemente benutzt werden. Das ol-Element wird benutzt, wenn die Liste geordnet ist und das ul-Element wird benutzt, wenn die Liste ungeordnet ist. Definitionslisten (dl) werden benutzt, um Begriffe mit ihren Definitionen zu gruppieren. Obwohl die Benutzung dieses Markups Listen lesbarer machen kann, benötigen nicht alle Listen Markup. Zum Beispiel brauchen Sätze, die durch Kommata getrennte Listen enthalten, möglicherweise kein Listen-Markup.

Wenn Markup benutzt wird, das die Punkte visuell als Liste formatiert, nicht aber die Beziehung innerhalb der Liste kennzeichnet, dann kann es sein, dass Benutzer Schwierigkeiten haben, durch die Informationen zu navigieren. Ein Beispiel einer solchen visuellen Formatierung ist das Hinzufügen von Asterisken im Inhalt zu Beginn jedes Listenpunktes und die Benutzung des <br>-Elements, um die Listenpunkte zu trennen.

Einige assistierende Techniken erlauben es Benutzern, von Liste zu Liste oder von Punkt zu Punkt zu navigieren. Stylesheets können benutzt werden, um die Darstellung der Listen zu ändern, während gleichzeitig deren Integrität gewahrt wird.

Die Listenstruktur (ul/ol) ist auch hilfreich, um Hyperlinks zu gruppieren. Wenn dies gemacht wird, dann hilft das Screenreader-Benutzern dabei, vom ersten Element in einer Liste zum Ende der Liste zu navigieren oder zur nächsten Liste zu springen. Dies hilft ihnen dabei, Gruppen von Links zu umgehen, wenn sie dies möchten.

Beispiele

Beispiel 1: Eine Liste, die Schritte in einer Abfolge zeigt

Dieses Beispiel benutzt eine geordnete Liste, um die Abfolge von Schritten in einen Prozess zu zeigen.

Code-Beispiel:

			 <ol>
  <li>Mix eggs and milk in a bowl.</li>
  <li>Add salt and pepper.</li>
</ol>

Beispiel 2: Eine Einkaufsliste

Dieses Beispiel zeigt eine ungeordnete Liste mit im Geschäft zu kaufenden Dingen.

Code-Beispiel:

			<ul>
  <li>Milk</li>
  <li>Eggs</li>
  <li>Butter</li>
</ul>

Beispiel 3: Ein Wort und seine Definition

Dieses Beispiel benutzt eine Definitionsliste, um eine Definition mit dem definierten Begriff zu gruppieren.

Code-Beispiel:

			<dl>
  <dt>blink</dt>
  <dd>turn on and off between .5 and 3 times per second
  </dd>
</dl> 

Beispiel 4: Benutzung von Listen, um Links zu gruppieren

In diesem Beispiel werden die Links gruppiert, indem man die ul- und li-Elemente benutzt.

Code-Beispiel:

			<a name="categories" id="categories"></a><h2>Product Categories</h2>
<ul class="navigation">
    <li><a href="kitchen.html">Kitchen</a></li>
    <li><a href="bedbath.html">Bed &amp; Bath</a></li>
    <li><a href="dining.html">Fine Dining</a></li>
    <li><a href="lighting.html">Lighting</a></li>
    <li><a href="storage.html">Storage</a><li>
</ul> 

Man kann CSS benutzen, um die Listenelemente zu formatieren, so dass diese Technik mit einer Vielzahl an visuellen Erscheinungsbildern benutzt werden kann.

Hier ist eine Formatierung, welche die Aufzählungspunkte der Liste und den linken Innenabstand, der zur Einrückung führt, entfernt und die einzelnen Listenelemente horizontal laufen lässt.

Code-Beispiel:

			ul.navigation {
  list-style: none; 
  padding: 0;
}
ul.navigation li {
  display: inline;
}

Diese Formatierung entfernt die Aufzählungspunkte der Liste und den linken Innenabstand und zeigt die Elemente in einem fließenden Block an.

Code-Beispiel:

			ul.navigation {
 list-style: none; 
 padding: 0;
}
ul.navigation li {
 display: block; 
 float: left;
}

Ressourcen

Ressourcen sind nur zu Informationszwecken und keine offizielle Empfehlung.

Tests

Vorgehensweise

  1. Prüfen Sie, ob Inhalt, der die visuelle Erscheinung einer Liste hat (mit oder ohne Aufzählungspunkte) als ungeordnete Liste ausgezeichnet ist.

  2. Prüfen Sie, ob Inhalt, der die visuelle Erscheinung einer nummerierten Liste hat, als geordnete Liste ausgezeichnet ist.

  3. Prüfen Sie, ob Inhalt als Definitionsliste ausgezeichnet ist, wenn Begriffe und ihre Definitionen in Form einer Liste präsentiert werden.

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.