Prüfpunkt 1.3.1Stufe AÜberschriften, Tabellen und Reihenfolge
Warum müssen Überschriften und Tabellen im Code sauber ausgezeichnet sein?
Überschriften und Tabellen müssen im Code sauber ausgezeichnet sein, weil Vorleseprogramme und Suchmaschinen den Aufbau einer Seite nur daran erkennen. Ein sehender Besucher sieht auf einen Blick, was Überschrift und was Tabellenkopf ist — ein blinder Besucher und Google erfahren das nur, wenn es im Code auch so benannt ist. Fett gedruckter Text ist keine Überschrift.
Struktur im Code: das Inhaltsverzeichnis der Seite
Vorleseprogramme bieten blinden Besuchern eine Abkürzung an: von Überschrift zu Überschrift springen, wie man ein Inhaltsverzeichnis überfliegt. Das funktioniert nur, wenn Überschriften im Code als solche markiert sind — mit Ebenen von H1 bis H6, wie Kapitel und Unterkapitel. Springt die Auszeichnung von H1 direkt auf H4, wirkt das wie ein Buch, in dem nach Kapitel 1 sofort Abschnitt 1.1.1.1 folgt: Der Besucher fragt sich, was er verpasst hat. Bei Tabellen gilt dasselbe: Nur wenn die Kopfzeile als Kopfzeile markiert ist, kann das Vorleseprogramm zu jeder Zahl ansagen, zu welcher Spalte sie gehört. Auch Google nutzt diese Struktur, um Ihre Inhalte zu verstehen.
So prüft unser Messkern die Seitenstruktur
Die automatische Prüfung kombiniert zwei Werkzeuge. Das Prüfwerkzeug axe-core untersucht Listen, Beschreibungslisten und die technischen Verknüpfungen zwischen Elementen. Zusätzlich prüfen eigene Prüfschritte zwei Punkte, die axe-core im Standardlauf nicht abdeckt: übersprungene Überschriften-Ebenen — etwa H1 direkt gefolgt von H4 — und Datentabellen ohne eine einzige markierte Kopfzelle. Beides sind belegbare Verstöße und fließen als solche in den Bericht ein. Wichtig für die Einordnung: Dieses Kriterium ist so weit gefasst, dass ein unauffälliger automatischer Lauf bei uns nie als „bestanden“ gilt — der Bericht weist es dann als „manuell prüfen“ aus, und beim Gold-Standard beurteilt ein Mensch die Struktur.
Saubere Struktur zahlt direkt auf Google ein
Die gleiche Auszeichnung, die blinden Besuchern das Springen ermöglicht, hilft Ihrer Auffindbarkeit: Google gewichtet Überschriften bei der Einordnung einer Seite und zeigt gut strukturierte Inhalte eher als hervorgehobene Antwort im Suchergebnis. Eine Seite mit genau einer Hauptüberschrift, sinnvoll gestuften Zwischenüberschriften und echten Listen liest sich für die Suchmaschine wie ein gut gegliedertes Dokument. Umgekehrt verschenkt eine Seite, deren „Überschriften“ nur fett formatierter Text sind, dieses Signal vollständig — für die Maschine ist das gewöhnlicher Fließtext ohne Gewicht.
Beispiele
Überschrift als fetter Text
<p><strong style="font-size:24px">Öffnungszeiten</strong></p>
<p>Montag bis Freitag 8–16 Uhr</p><h2>Öffnungszeiten</h2>
<p>Montag bis Freitag 8–16 Uhr</p>Nur ein echtes h-Element erscheint in der Überschriftenliste des Vorleseprogramms.
Datentabelle ohne Kopfzellen
<table>
<tr><td>Tarif</td><td>Preis</td></tr>
<tr><td>Basis</td><td>9 €</td></tr>
</table><table>
<caption>Tarife</caption>
<thead><tr><th scope="col">Tarif</th><th scope="col">Preis</th></tr></thead>
<tbody><tr><td>Basis</td><td>9 €</td></tr></tbody>
</table>Mit th und scope sagt das Vorleseprogramm zu jeder Zelle, zu welcher Spalte sie gehört.
So gehen Sie es an
- Bitten Sie Ihre Agentur um eine Übersicht der Überschriften-Ebenen Ihrer wichtigsten Seiten — die Stufen sollten wie ein Inhaltsverzeichnis lückenlos sein.
- Prüfen Sie Ihre Tabellen: Jede Datentabelle braucht eine als Kopfzeile markierte erste Zeile oder Spalte.
- Ersetzen Sie fett formatierten Text, der als Überschrift dient, durch echte Überschriften im Redaktionssystem.
- Nutzen Sie im Redaktionssystem die Listen-Funktion statt Spiegelstriche von Hand zu tippen.
- Vergeben Sie je Seite genau eine Hauptüberschrift, die das Thema der Seite benennt.
Weiter im Prüfbereich Barrierefreiheit
- Warum muss die Reihenfolge der Inhalte im Code stimmen?Vorleseprogramme lesen eine Seite in der Code-Reihenfolge vor. Weicht sie von der sichtbaren Ordnung ab, wird der Inhalt sinnlos durcheinandergewürfelt.
- Warum reichen Hinweise wie „der grüne Knopf rechts“ auf Websites nicht aus?Anweisungen dürfen sich nie allein auf Farbe, Form oder Position stützen — blinde Besucher und Vorleseprogramme können ihnen sonst nicht folgen.
- Muss meine Website im Hochformat und im Querformat funktionieren?Ja — Inhalte dürfen die Bildschirm-Ausrichtung nicht erzwingen. Wer sein Tablet am Rollstuhl montiert hat, kann es oft nicht drehen.
- Was bringt das autocomplete-Attribut in Website-Formularen?Das autocomplete-Attribut sagt dem Browser, was ein Formularfeld erwartet — er füllt E-Mail oder Telefonnummer dann automatisch und fehlerfrei aus.
Dieser Prüfpunkt gehört zum Prüfbereich Barrierefreiheit; dort stehen alle Prüfpunkte im Überblick. Was die Prüfung insgesamt leistet, zeigt die Leistungsseite; wie ein Ergebnis zustande kommt, erklärt das Prüfverfahren. Alle Prüfbereiche im Überblick: Wissensbasis.
Foto: Clem Onojeghuo, CC0
.jpg){kind=link}