Info und Beziehungen: Listen

Gruppen von ähnlichen Elementen müssen korrekt als Listen ausgezeichnet sein. Dies ermöglicht assistierenden Technologien (z.B. Screenreadern), diese zu erfassen und eine schnelle Übersicht sowie Navigation darin anzubieten.

Verstehen

Listen (<ul> und <ol>) sowie Glossare (<dl>) sind wichtige Elemente der semantischen Gruppierung und Gliederung von beispielsweise Links, Produkten, Menüeinträgen etc. Sie ermöglichen es, den Anfang und das Ende der Gruppen sowie die Gesamtzahl enthaltener Elemente zu erkennen und darin zu navigieren.

Listenelemente können sowohl horizontal (nebeneinander, z.B. Social-Media-Kanäle) als auch vertikal (untereinander, z.B. eine Seitennavigation) angeordnet sein. Das Verwenden von Plain-Text-Bindestrichen am Anfang einer Textzeile ist keine «echte» Liste.

Listen mit einem einzigen Eintrag sollten vermieden werden (ausser sie werden automatisch generiert). Listen können verschachtelt werden, etwa für Untermenüs.

Wichtig: Zum Gruppieren umfangreicherer Elemente (z.B. Auflistung mehrere Newsteaser mit Titel, Datum, Bild) eignen sich Listen nicht. Verwenden Sie stattdessen Elemente wie <article> oder <section>.

Verantwortlichkeiten

• Das Entwicklungsteam versieht die Seitenbereiche und Funktionalitäten mit Listen. Es schafft zudem die notwendigen technischen Voraussetzungen für die Inhaltserstellung, etwa die Möglichkeit zum Wählen verschiedener Listenarten als Formatvorlagen in einem WYSIWYG-Editor.
• Die Inhaltsverantwortlichen formatieren Listen korrekt.

WCAG-Text

Info und Beziehungen: Informationen, Struktur und Beziehungen, die über die Darstellung vermittelt werden, können durch Software bestimmt werden oder stehen in Textform zur Verfügung.

Code-Beispiel

<!-- Linkliste -->
<ul>
  <li>Sitemap</li>
  <li>Legal Disclaimer</li>
  <li>RSS Feed</li>
</ul>

<!-- Verschachteltes Menü -->
<ul>
  <li>Startseite</li>
  <li><a href="...">Produkte</a>
    <ul>
      <li><a href="...">Computer</a></li>
      <li><a href="...">Fernseher</a></li>
      <li><a href="...">Kühlschränke</a></li>
    </ul>
  </li>
  <li>Kontakt</li>
</ul>

<!-- Falsche Liste (nicht zugänglich) -->
<p>
  - Zimmer aufräumen<br />
  - Einkaufen gehen<br />
  - Abendessen kochen<br />
</p>