Überschriften sind nicht nur eine optische Gestaltung. Sie geben einer Seite eine inhaltliche Struktur. Suchmaschinen, Screenreader und andere Hilfsmittel können anhand der Überschriften erkennen, welche Inhalte besonders wichtig sind und wie die Seite aufgebaut ist. Gut gesetzte Überschriften helfen daher sowohl den Besucherinnen und Besuchern als auch Suchmaschinen, den Inhalt schneller zu verstehen. Google berücksichtigt unter anderem sichtbare Seitentitel, Überschrift-Elemente und besonders hervorgehobene Texte, um den Hauptinhalt einer Seite besser einzuordnen.
Für die Barrierefreiheit sind Überschriften besonders wichtig. Menschen, die Screenreader verwenden, können sich von Überschrift zu Überschrift bewegen und erhalten dadurch einen schnellen Überblick über die Seite. Auch Menschen mit Sehbehinderung, kognitiven Einschränkungen oder Leseschwierigkeiten profitieren von einer klaren Überschriftenstruktur. Die WCAG fordert, dass Überschriften den Inhalt oder Zweck eines Abschnitts beschreiben.
Die Überschriften sollten wie ein Inhaltsverzeichnis aufgebaut sein:
Überschrift 1. Ebene / H1
Die H1 ist die Hauptüberschrift der Seite. Sie beschreibt das zentrale Thema der gesamten Seite. In der Regel sollte es pro Seite nur eine echte H1 geben. Häufig wird diese bereits automatisch durch den Seitentitel oder das Seitenlayout ausgegeben.
Überschrift 2. Ebene / H2
Eine H2 gliedert die Seite in größere Inhaltsbereiche. Sie wird für die wichtigsten Abschnitte unterhalb der Hauptüberschrift verwendet.
Überschrift 3. Ebene / H3
Eine H3 wird verwendet, wenn ein Abschnitt unterhalb einer H2 weiter unterteilt werden soll.
Überschrift 4. Ebene / H4
Eine H4 wird nur verwendet, wenn innerhalb einer H3 noch eine weitere Untergliederung notwendig ist.
Die Reihenfolge sollte möglichst nicht übersprungen werden. Nach einer H1 folgt also zuerst eine H2, danach bei Bedarf eine H3 und danach eine H4. Überschriften sollten nicht nur gewählt werden, weil sie optisch gut aussehen, sondern weil sie zur inhaltlichen Struktur passen. Google empfiehlt ebenfalls eine hierarchische Struktur mit H1, H2, H3 usw. und das Vermeiden übersprungener Überschriftenebenen.
In TYPO3 gibt es zusätzlich Auswahlmöglichkeiten wie:
Diese Auswahl erzeugt keine echte technische Überschrift wie H1, H2, H3 oder H4. Der Text sieht nur optisch wie eine Überschrift aus. Für Suchmaschinen und Hilfsmittel zur Barrierefreiheit ist dieser Text dadurch nicht als echte Überschrift erkennbar.
Diese Varianten sollten daher nur verwendet werden, wenn ein Text optisch wie eine Überschrift aussehen soll, aber nicht Teil der eigentlichen Seitenstruktur ist. Für echte Abschnittsüberschriften sollten immer die normalen Überschriftenebenen H1 bis H4 verwendet werden.
Verwenden Sie echte Überschriften immer zur Strukturierung des Inhalts und nicht nur zur Gestaltung. Die H1 beschreibt das Thema der Seite, H2 gliedert die wichtigsten Bereiche, H3 und H4 werden für weitere Unterteilungen genutzt.
Die Varianten „Als Überschrift …“ sind nur für die optische Darstellung gedacht und sollten nicht für wichtige Inhaltsüberschriften verwendet werden. So bleibt die Seite verständlich, besser auffindbar und barriereärmer nutzbar.
Suchmaschinenoptimierung und Barrierefreiheit verfolgen ein gemeinsames Ziel: Inhalte sollen verständlich, gut strukturiert und leicht auffindbar sein. Eine Seite sollte daher nicht für Suchmaschinen „geschrieben“ werden, sondern für die Menschen, die diese Seite nutzen.
Gute Inhalte beantworten konkrete Fragen, sind klar aufgebaut und verwenden verständliche Begriffe. Suchmaschinen können solche Inhalte besser einordnen, und Besucherinnen und Besucher finden schneller die Informationen, die sie suchen. Auch Menschen, die Hilfsmittel wie Screenreader verwenden, profitieren von klaren Texten, sinnvollen Überschriften, aussagekräftigen Links und verständlichen Alternativtexten.
Jede Seite sollte einen eindeutigen und verständlichen Seitentitel haben. Der Seitentitel beschreibt kurz, worum es auf der Seite geht. Er hilft Besucherinnen und Besuchern bei der Orientierung und kann auch von Suchmaschinen für die Darstellung in Suchergebnissen berücksichtigt werden.
Der wichtigste Begriff sollte möglichst am Anfang des Seitentitels stehen. Allgemeine Titel wie „Informationen“, „Aktuelles“ oder „Willkommen“ sind oft zu ungenau. Besser sind konkrete Titel wie „Mitgliedschaft beim VBB“, „Anmeldung zur Veranstaltung“ oder „Leistungen und Service für Mitglieder“.
Die Meta-Beschreibung ist ein kurzer Beschreibungstext zur Seite. Sie ist für Besucherinnen und Besucher auf der Webseite selbst oft nicht direkt sichtbar, kann aber von Suchmaschinen für die Vorschau in den Suchergebnissen verwendet werden. Google weist darauf hin, dass Titel und Meta-Informationen zu den Quellen gehören können, aus denen Suchergebnis-Texte erzeugt werden.
Die Meta-Beschreibung sollte den Inhalt der Seite kurz zusammenfassen und deutlich machen, warum die Seite hilfreich ist. Sie sollte nicht nur aus Schlagworten bestehen, sondern wie ein kurzer, verständlicher Beschreibungssatz formuliert sein.
Die Meta-Angaben können in TYPO3 in den Seiteneigenschaften jeder Seite unter dem Tab “SEO” und “Soziale Medien” hinterlegt werden.
Der erste Absatz einer Seite sollte kurz erklären, worum es auf der Seite geht. Viele Besucherinnen und Besucher entscheiden bereits nach wenigen Sekunden, ob sie auf der richtigen Seite sind. Eine klare Einleitung hilft dabei, den Inhalt schnell einzuordnen.
Die Einleitung sollte keine langen allgemeinen Formulierungen enthalten, sondern direkt zum Thema führen. Wichtige Begriffe dürfen hier genannt werden, sollten aber natürlich in den Text eingebunden sein.
Lange Textblöcke sollten vermieden werden. Inhalte lassen sich besser erfassen, wenn sie in kurze Absätze, Zwischenüberschriften, Listen oder klar getrennte Inhaltsbereiche aufgeteilt werden.
Eine gute Struktur hilft nicht nur beim Lesen, sondern auch bei der Bedienung mit assistiven Technologien. Menschen, die Screenreader nutzen, können Inhalte über Überschriften, Listen oder Links gezielt ansteuern. Das W3C empfiehlt unter anderem klare Überschriften, aussagekräftige Linktexte, verständliche Anweisungen und kurze, klare Inhalte.
Linktexte müssen verständlich beschreiben, wohin der Link führt. Allgemeine Formulierungen wie „hier klicken“, „mehr“ oder „weiterlesen“ sind ungünstig, weil sie ohne den umgebenden Text nicht aussagekräftig sind.
Ein guter Linktext benennt das Ziel des Links möglichst konkret. Das ist besonders wichtig für Menschen, die sich Links von einem Screenreader gesammelt vorlesen lassen.
Bilder sollten immer dann einen Alternativtext erhalten, wenn sie eine inhaltliche Bedeutung haben. Der Alternativtext beschreibt, welche Information das Bild vermittelt. Er ist wichtig für Menschen, die das Bild nicht sehen können, und hilft auch Suchmaschinen, Bildinhalte besser einzuordnen. Google empfiehlt beschreibende Dateinamen, Bildtitel und Alternativtexte und weist darauf hin, dass Alt-Texte auch die Barrierefreiheit verbessern.
Ein guter Alternativtext beschreibt nicht jedes Detail des Bildes, sondern die relevante Aussage im Zusammenhang der Seite.
Wenn ein Bild nur dekorativ ist und keine inhaltliche Aussage hat, sollte es nicht unnötig beschrieben werden. In diesem Fall kann es je nach technischer Umsetzung als dekorativ behandelt werden.
Auch der Dateiname eines Bildes sollte möglichst beschreibend sein. Dateinamen wie IMG_1234.jpg oder bild1.png sagen nichts über den Inhalt des Bildes aus. Besser sind kurze, beschreibende Dateinamen.
Das ist nicht nur für die interne Pflege hilfreicher, sondern kann auch Suchmaschinen zusätzliche Hinweise zum Bildinhalt geben. Google beschreibt Dateinamen als leichte Hinweise zum Bildthema.
Wichtige Informationen sollten nicht ausschließlich in Bildern enthalten sein. Text in Bildern kann von Suchmaschinen und Screenreadern schlechter oder gar nicht ausgewertet werden. Außerdem lässt sich Text in Bildern auf mobilen Geräten oft schlecht lesen.
Wenn ein Bild Text enthält, sollte die wichtige Information zusätzlich als normaler Text auf der Seite stehen. Das betrifft zum Beispiel Öffnungszeiten, Telefonnummern, Termine oder Hinweise.
Aufzählungen sollten als echte Listen gepflegt werden und nicht durch Bindestriche, Leerzeichen oder manuelle Zeilenumbrüche nachgebaut werden. Echte Listen haben eine technische Struktur, die von assistiven Technologien erkannt werden kann.
Listen eignen sich besonders für:
Eine Liste sollte nur verwendet werden, wenn die Inhalte wirklich zusammengehören. Für normalen Fließtext sind Absätze besser geeignet.
Texte sollten möglichst klar, direkt und verständlich formuliert sein. Lange Schachtelsätze, unnötige Fachbegriffe und interne Abkürzungen erschweren das Verständnis.
Fachbegriffe lassen sich nicht immer vermeiden. Wenn sie notwendig sind, sollten sie kurz erklärt werden. Das hilft nicht nur Menschen mit wenig Vorwissen, sondern auch Besucherinnen und Besuchern, die die Seite schnell überfliegen.
Tabellen sollten nur verwendet werden, wenn Inhalte wirklich in Zeilen und Spalten miteinander verglichen werden sollen. Sie sind nicht dafür gedacht, Inhalte optisch nebeneinander zu platzieren.
Für Layoutzwecke sollten Tabellen vermieden werden. Auf mobilen Geräten und für Screenreader können falsch verwendete Tabellen schwer verständlich sein. Wenn eine Tabelle notwendig ist, sollte sie einfach aufgebaut sein und klare Spaltenüberschriften haben.
Informationen dürfen nicht ausschließlich über Farbe erkennbar sein. Ein Hinweis wie „Alle rot markierten Felder sind Pflichtfelder“ ist problematisch, wenn die Farbe nicht wahrgenommen werden kann.
Besser ist eine zusätzliche textliche Kennzeichnung, zum Beispiel durch ein Sternchen mit Erklärung oder einen eindeutigen Hinweis direkt am Feld.
Texte müssen gut lesbar sein. Schwache Kontraste zwischen Text und Hintergrund können dazu führen, dass Inhalte schwer oder gar nicht gelesen werden können. Das betrifft besonders hellgraue Texte, farbige Hintergründe oder Text auf Bildern.
Wenn im TYPO3 verschiedene Darstellungsvarianten zur Auswahl stehen, sollten Redakteurinnen und Redakteure darauf achten, dass der Text gut lesbar bleibt. Besonders bei Bildern mit darüberliegendem Text sollte geprüft werden, ob der Text auf allen Bildschirmgrößen gut erkennbar ist. Die WCAG behandelt Kontrast und Unterscheidbarkeit als wichtige Kriterien für barrierefreie Inhalte.
PDF-Dateien sollten nur verwendet werden, wenn sie wirklich notwendig sind, zum Beispiel für Formulare, offizielle Dokumente oder Druckversionen. Inhalte, die direkt auf der Webseite gelesen werden sollen, sind als normale Webseiteninhalte meist besser geeignet.
Wenn ein PDF eingebunden wird, sollte der Link klar beschreiben, welches Dokument heruntergeladen wird. Zusätzlich ist es hilfreich, Dateityp und gegebenenfalls Dateigröße anzugeben.
Wenn Videos oder Audiodateien eingebunden werden, sollten die wichtigsten Informationen auch in Textform verfügbar sein. Bei Videos sind Untertitel hilfreich, bei Audioinhalten eine kurze Zusammenfassung oder ein Transkript.
Das ist besonders wichtig für Menschen, die nicht hören können, die Inhalte ohne Ton nutzen oder Informationen lieber nachlesen möchten. Das W3C nennt Untertitel und Transkripte als wichtige Punkte für barrierefreie Medieninhalte.
Veraltete Informationen wirken unseriös und können für Besucherinnen und Besucher verwirrend sein. Deshalb sollten Seiten regelmäßig geprüft werden.
Besonders wichtig ist das bei:
Wenn Inhalte nicht mehr gültig sind, sollten sie aktualisiert, archiviert oder entfernt werden.
Gleiche oder sehr ähnliche Inhalte sollten nicht mehrfach auf verschiedenen Seiten veröffentlicht werden. Das kann für Besucherinnen und Besucher verwirrend sein und erschwert die Pflege.
Besser ist es, zentrale Informationen nur an einer Stelle zu pflegen und von anderen Seiten dorthin zu verlinken. So ist sichergestellt, dass Änderungen nur einmal vorgenommen werden müssen.
Suchmaschinenoptimierte und barrierefreie Inhalte entstehen vor allem durch Klarheit, Struktur und Verständlichkeit. Eine gute TYPO3-Seite hat einen eindeutigen Titel, eine klare Einleitung, sinnvoll gegliederte Abschnitte, aussagekräftige Links und verständliche Bildbeschreibungen.
Redakteurinnen und Redakteure sollten Inhalte immer aus Sicht der Besucherinnen und Besucher prüfen: Ist sofort erkennbar, worum es geht? Sind die wichtigsten Informationen leicht zu finden? Können die Inhalte auch ohne Bilder, Farben oder besondere Darstellung verstanden werden?
Wenn diese Punkte beachtet werden, profitieren alle Nutzerinnen und Nutzer davon. Gleichzeitig werden die Inhalte für Suchmaschinen besser verständlich und können leichter gefunden werden.
Vor dem Veröffentlichen einer Seite sollte geprüft werden: