Prinzip P2

Semantische Tiefe

Was visuell Hierarchie ist, muss strukturell Hierarchie bleiben — auch ohne Augenkontakt.

Warum dieses Prinzip wichtig ist

Was Screen-Reader, SEO-Crawler und KI-Crawler sehen, ist nicht Ihr Layout, sondern Ihre Struktur. Beide müssen parallel funktionieren.

Wenn ein Screen-Reader Ihre Website vorliest, sieht er keine Farben und kein Layout. Er sieht nur, was strukturell ausgezeichnet ist: Überschriften, Listen, Tabellen, Schaltflächen, Verweise. Was visuell als Überschrift wirkt, aber im Code ein gewöhnlicher Absatz ist, existiert für ihn nicht als Überschrift.

Dieselbe Logik gilt für SEO-Crawler von Google und für die KI-Modelle, die zunehmend das Web durchsuchen. Strukturelles Markup ist die einzige Sprache, die alle drei verstehen — Screen-Reader, Suchmaschinen, KI-Systeme. Eine semantisch flache Website ist für all diese Empfänger blind.

Strukturelles Markup ist günstig, wenn es von Anfang an Teil der Implementierung ist. Es wird teuer, wenn es nachgerüstet werden muss — weil dann nicht nur Code, sondern auch Layout-Entscheidungen rückwärts korrigiert werden müssen. Das macht Semantik zu einer Frage der Anfangsdisziplin, nicht der Nachbesserung.

Layout und Struktur sind zwei Ebenen

Was visuell wahrgenommen wird und was im Code als Struktur steht, sind voneinander unabhängig — und müssen beide passen.

<header>
  <nav aria-label="Hauptnavigation">…</nav>
</header>
<main id="main">
  <h1>Seitentitel</h1>
  <section>
    <h2>Abschnitt 1</h2>
    …
  </section>
  <section>
    <h2>Abschnitt 2</h2>
    …
  </section>
</main>
<footer>…</footer>
Layout und Struktur sind zwei Ebenen derselben Seite. Screen-Reader, Suchmaschinen und KI-Crawler lesen ausschließlich die rechte.

Best Practice und Anti-Pattern

Drei strukturelle Entscheidungen, die regelmäßig die semantische Tiefe untergraben — und ihre korrekten Pendants.

Anti-Pattern

<div class="heading"> als Überschrift

Visuell wirkt es wie eine H2, semantisch ist es ein Absatz. Screen-Reader-Navigation per Heading-Rotor scheitert.

Best Practice

Native <h1> bis <h6> hierarchisch korrekt

Tailwind- oder andere Style-Klassen ändern nichts an der nativen Semantik.

Anti-Pattern

Klickbare Divs mit onClick

Keine Tastatur-Unterstützung, kein Focus-Indikator, keine Screen-Reader-Erkennung als Schaltfläche.

Best Practice

<button> oder <a> mit korrekter Rolle

Tastatur, Fokus und Semantik kommen native und gratis.

Anti-Pattern

Skip-Link weggelassen

Tastatur-Nutzer:innen müssen sich durch die gesamte Navigation tabben, bevor sie den Hauptinhalt erreichen.

Best Practice

Skip-Link plus Landmark-Struktur

<a href="#main">Zum Inhalt</a> als erstes fokussierbares Element, <main id="main"> als Sprungziel.

Anbindung an WCAG 2.2

Die normativen Erfolgskriterien, an denen dieses Prinzip operativ andockt.

  • SC 1.3.1Info and RelationshipsA
  • SC 2.4.1Bypass BlocksA
  • SC 2.4.6Headings and LabelsAA
  • SC 4.1.2Name, Role, ValueA

Verwandte Prinzipien

Semantische Tiefe lehnt sich an diese Prinzipien an.

Steht die strukturelle Hierarchie Ihrer Website parallel zur visuellen?

Selbstcheck starten

Neun Fragen, etwa vier Minuten. Kein Login.