Semantisches HTML

Was geprüft

Gezählt werden im HTML die Strukturelemente article, section, Listen (ul, ol, dl) und Tabellen sowie zum Vergleich die div-Elemente. Auffällig ist der Punkt nur, wenn keines der Strukturelemente vorkommt. Landmarks wie main und nav zählen hier nicht, sie bewertet die Kategorie Barrierefreiheit.

Wie relevant

Niedrig, wenn die Seite nur aus div-Elementen besteht. Die Gewichtung ist gering, weil Strukturelemente die Extraktion erleichtern, eine Wirkung auf Sichtbarkeit aber nicht belegt ist.

Warum

Semantische Elemente sagen, was ein Bereich ist: ein eigenständiger Beitrag, ein Abschnitt, eine Aufzählung, eine Tabelle. Programme, die Inhalte auslesen, können Zusammenhänge daraus leichter erkennen als aus verschachtelten div-Blöcken. Screenreader nutzen dieselben Informationen.

Wie beheben

Verwenden Sie für Aufzählungen ul/ol, für tabellarische Daten table mit Kopfzellen und für eigenständige Beiträge article. Gliedern Sie lange Seiten mit section und passenden Überschriften.

Nebenwirkung: Neue Elemente bringen eigene Browser-Standardstile mit (Abstände, Aufzählungszeichen). Prüfen Sie die Darstellung nach der Umstellung und passen Sie das CSS an.

WordPress: Der Block-Editor erzeugt für die Blöcke „Liste“ und „Tabelle“ semantisches HTML. Page-Builder bauen Listen und Tabellen oft aus div-Elementen nach; nutzen Sie dort die echten Listen- und Tabellen-Module.

Codebeispiel

HTML: Beitrag mit Abschnitt, Liste und Tabelle

<article>
  <h1>Öffnungszeiten und Leistungen</h1>
  <section>
    <h2>Leistungen</h2>
    <ul>
      <li>Beratung</li>
      <li>Umsetzung</li>
    </ul>
  </section>
  <section>
    <h2>Öffnungszeiten</h2>
    <table>
      <tr><th scope="row">Mo–Fr</th><td>9–17 Uhr</td></tr>
    </table>
  </section>
</article>

Weiterführende Quellen

• https://developer.mozilla.org/en-US/docs/Web/HTML/Element/article
• https://html.spec.whatwg.org/multipage/sections.html