Barrierefreie Überschriften - Ein Leitfaden für klare Struktur im Web

Überschriften sind Ihr wichtigstes Werkzeug, damit Seiten für alle gut nutzbar sind – gerade für Menschen, die Screenreader nutzen (Bildschirmleseprogramm für blinde Menschen), aber auch für Suchmaschinen und KI (Künstliche Intelligenz). Damit Überschriften barrierefrei werden, sollten Sie folgende Schritte beachten. 

Als Faustregel gilt: Alles, was wie eine Überschrift aussieht, muss im CMS als Überschrift formatiert sein. Verwenden Sie dazu konsequent die Überschriftsformate Ihres Editors – also z. B. „Überschrift 1“, „Überschrift 2“, „Überschrift 3“ – und machen Sie niemals normalen Text einfach fett oder größer, um optisch eine Überschrift zu imitieren. 

Denken Sie dabei weniger in Schriftgrößen, sondern eher wie in einem Inhaltsverzeichnis: 

• Seitentitel / Hauptthema → Überschriftebene 1 
• Wichtige Abschnitte → Überschriftebene 2 
• Unterpunkte → Überschriftebene 3 

Bevor Sie sich darauf verlassen, dass die Technik den Rest erledigt, lohnt sich ein kurzer Blick in den Quelltext: Prüfen Sie einmalig, ob die Formatvorlagen aus Ihrem Editor tatsächlich korrekt als HTML-Überschriften im Code ankommen – also ob eine als „Überschrift 1“ formatierte Zeile wirklich als H1 ausgespielt wird. Das muss nicht regelmäßig wiederholt werden, aber einmal kontrolliert beruhigt und schafft Sicherheit für die tägliche Arbeit. 

Ein häufiges Missverständnis in Redaktionen lautet: „Ich nehme lieber Überschrift 3 als Hauptüberschrift, die sieht kleiner und hübscher aus.“ Das mag optisch im ersten Moment einleuchten, ist aber grundlegend falsch gedacht. Schriftgröße, Farbe und Abstände werden über das Cascading Style Sheet (CSS) des Webauftritts gesteuert – nicht über den Typ der Überschrift. Die Redaktion verantwortet die inhaltliche Struktur, nicht das Design. 

Wenn etwas optisch nicht passt, legen Sie die Struktur trotzdem korrekt an – also z. B. „Überschrift 1“ für das Hauptthema – und melden Sie das optische Problem weiter. Je nach Teamstruktur geht die Rückmeldung an: 

• allgemeine Webverantwortliche, die solche Anpassungen weiter delegieren und übergeordnete Konsequenzen einer solchen Designänderung beachten 
• falls Sie selbst in einer Entscheidungsposition sind, können Sie eine solche Änderung natürlich auch direkt an das Designteam weitergeben, die auf die Konsistenz und Anmutung des gesamten Auftritts achten sollten 
• falls der Zwischenschritt über das Designteam nicht nötig ist, können Sie die Änderung natürlich auch direkt an die Programmierabteilung weitergeben, die die Änderung im CSS umsetzen 

Das sollten Sie bedenken: Eine CSS-Änderung wirkt sich in der Regel auf alle Unterseiten des gesamten Webauftritts aus. Das ist kein Fehler, sondern das Prinzip eines konsistenten Corporate Designs (CD) – sollte aber bewusst entschieden und mit dem CD abgeglichen werden, bevor die Änderung eingespielt wird. 

Eine Überschrift ist kein Platzhalter – sie hat eine klare Aufgabe: den Inhalt des folgenden Abschnitts so treffend wie möglich zusammenfassen, damit Leserinnen und Leser auf einen Blick erkennen, worum es geht. Schwache Überschriften wie „Willkommen“ oder „Mehr Infos“ sagen nichts aus. Besser ist es, direkt zu benennen, was kommt. 

Ein Beispiel: Eine Webseite rund ums Gärtnern könnte so strukturiert sein: 

• H1: „Gärtnern“ – das Hauptthema der Seite 
• H2: „Gemüse anbauen“ und „Zierpflanzen pflegen“ – die großen Themenbereiche 
• H3: „Tomaten richtig gießen“ oder „Rosen schneiden im Herbst“ – konkrete Inhalte auf der dritten Ebene 

Diese Logik hilft nicht nur Leserinnen und Lesern bei der Orientierung. Suchmaschinen und Screenreader werten Überschriften gezielt aus, um den Inhalt einer Seite zu verstehen. Je präziser die Überschrift, desto besser wird der Inhalt gefunden und eingeordnet. 

Das sollten Sie bedenken: Überschriften dienen der Strukturierung und dem besseren Verständnis. So weit, so richtig. Unterüberschriften können dabei in der Regel im CMS bis zur Hierarchie H6 angelegt werden. Bedenken Sie aber, dass immer tiefere Abstufungen der Überschriftsebenen nicht unbedingt zu einer besseren Strukturierung und zu einem besseren Verständnis des Textes beitragen. In der Regel ist eine Hierarchie bis H3 oder H4 ausreichend, um auch komplexere Themen zu beschreiben. Falls weitere Abstufungen nötig sind, sollten Sie überlegen, ob sie das Thema lieber auf zwei verschiedene Webseiten aufteilen und diese gegenseitig verlinken. 

Drei Muster tauchen in der Praxis immer wieder auf. Alle drei lassen sich leicht beheben, sobald man sie kennt: 

• Nur eine „Alibi-Hauptüberschrift“: Ganz oben steht eine korrekte Hauptüberschrift, alle weiteren Abschnitte sind aber nur fett formatierter Text.
  Besser: Jeden inhaltlichen Abschnitt als echte Überschrift H2 oder H3 oder anlegen. 
• Optische Überschriften ohne Semantik: Text wurde nur größer und fett gemacht, aber als „normaler Absatz“ formatiert.
  Besser: Im CMS das passende Überschriftsformat auswählen, nicht manuell stylen. 
• Reine Bildüberschriften: Eine Überschrift wurde als Grafik eingebunden, ohne begleitenden echten Text.
  Besser: Im CMS immer zusätzlich eine Textüberschrift anlegen – Grafiken werden von Screenreadern und Suchmaschinen nicht gelesen. 

Überschriften sind weit mehr als ein gestalterisches Mittel. Sie sind das Rückgrat jeder gut strukturierten Webseite – und ein zentrales Element der digitalen Barrierefreiheit. Wer Überschriften konsequent und sinnvoll einsetzt, sorgt dafür, dass Inhalte für alle zugänglich sind: für Menschen mit Screenreader genauso wie für Suchmaschinen und KI-Systeme. 

Die wichtigsten Punkte auf einen Blick: 

• Formatvorlagen im CMS nutzen – niemals mit Fettdruck oder Schriftgröße imitieren. 
• In Strukturen denken, nicht in Optik: H1 für das Hauptthema, H2 für Abschnitte, H3 oder tiefer für Details. 
• Überschriften präzise formulieren – sie sollen den Inhalt zusammenfassen, nicht nur schmücken. 
• Optische Probleme melden, nicht durch falsche Hierarchien umschiffen. 
• Einmalig prüfen, ob die Formatvorlagen korrekt im Code ankommen – das schafft Sicherheit für die tägliche Arbeit. 

Der Aufwand ist gering. Der Effekt ist groß. Und das Gute ist: Sie müssen das Rad nicht täglich neu erfinden. Wer die Grundregeln einmal verinnerlicht hat, wendet sie fast automatisch an – bei jeder Seite, jedem Artikel, jedem neuen Inhalt im CMS. 

Text: Stiftung Pfennigparade