SEO
Wichtige Informationen für die Suchmaschinenoptimierung (SEO).
SEOBarrierefreiheit
Barrierefreiheit spielt für Websites eine zentrale Rolle, da sie allen Menschen einen gleichberechtigten Zugang zu Informationen ermöglicht. Damit Inhalte für möglichst viele Nutzer*innen verständlich und nutzbar sind, müssen bereits bei der redaktionellen Pflege bestimmte Aspekte berücksichtigt werden. Grundsätzlich müssen alle Inhalte wahrnehmbar, verständlich, bedienbar und robust sein – das sind die vier WCAG-Grundprinzipien.
Auf dieser Seite finden Sie:
Alt-Texte
Barrierefreiheit spielt in der redaktionellen Pflege vor allem dann eine Rolle, wenn es um Bilder geht. Menschen mit einer Sehschwäche nutzen häufig Screenreader, um sich die Inhalte einer Website vorlesen zu lassen. Screenreader erfassen dabei nicht nur die sichtbaren Texte auf der Website – sie können auch hinterlegte Bildinformationen wiedergeben. Über sogenannte „Alt-Texte“ machen wir diese Bildinformationen für alle Menschen zugänglich. Aber nur dann, wenn sie über rein dekorative Zwecke hinausgehen.
Umfang
Ein Alternativtext sollte so kurz wie möglich, aber so ausführlich wie nötig sein: zwischen 80 und 100 Zeichen.
Kontext / Mehrwert
Bilder sollten nur dann einen Alt-Text beinhalten, wenn es einen inhaltlichen Bezug oder Mehrwert zum Thema der jeweiligen Seite oder des jeweiligen Absatzes gibt. Wenn es nicht eindeutig ist, sollte immer eine kurze, identifizierende Beschreibung hinzugefügt werden.
Informative Bilder
Das Bild muss für den Nutzer aus dem Kontext beschrieben werden. Es gibt Inhalt und Funktion des Bildes wieder. Beim Alt-Text sind folgende Fragen hilfreich:
- „Was ist das Thema meines Beitrages?“
- „Was ist das Ziel meines Bildes?“
- „Welche Informationen ergeben sich aus dem Text oder der Bildunterschrift?“
- „Was ist bei dem Bild für meine Aussage wichtig?“
Weitere Anhaltspunkte können das Gesehene (z.B. Personen, Gegenstände), die Emotionen der Personen, Handlungen oder Farben sein.
Hinweis 1: Hier darf nicht zu viel in das Bild hineininterpretiert werden. Es geht um das, was man sieht.
Hinweis 2: Der Alt-Text darf nicht beginnen mit „Das Bild zeigt …“. Das wird vom Screenreader schon erfasst.
Beispiel 1:
Das Bild zum Bürgerportal Amt Hüttener Berge transportiert auf jeden Fall Informationen zum Portal, die man aufgreifen muss.
Falsch:
„Drei Personen sitzen an einem Tisch und schauen auf ein Tablet.“
oder
„Bürgerportal Amt Hüttener Berge auf einem Tablet.“
Richtig:
„Drei Personen sitzen an einem Tisch. Sie nutzen das Bürgerportal Amt Hüttener Berge auf einem Tablet.“
Beispiel 2:
Das Bild zur Digitalen Daseinsvorsorge kann auch anhand der Handlungen und Emotionen beschrieben werden.
Falsch:
„Ein älteres Ehepaar in ihrer Küche, die Frau sieht auf ihren Laptop.“
Richtig:
„Ein älteres Ehepaar in der Küche. Die Frau sitzt lächelnd an ihrem Laptop. Der Mann bereitet das Essen zu und schaut ihr interessiert über die Schulter.“
Teaser-Bilder
Rein technisch gesehen sollten die Alt-Texte der Bilder, die in Seiten-Teasern enthalten sind, nicht von Screenreadern erfasst werden. Wenn aber darüber hinaus ein Bild verlinkt wird, z.B. in einem einfachen Medien-Text-Element, muss direkt beim Bild ein Alt-Text hinterlegt werden.
Siehe dazu auch „Verlinkte Bilder“.
Verlinkte Bilder
Werden Bilder manuell verlinkt, sollten Sie Ziel und Zweck im Alt-Text beinhalten.
Beispiel-Text für ein verlinktes Teaser-Bild:
„Fördermittelberatung: Alle Infos rund um unseren Beratungsservice“ (linkt zur Seite „Fördermittelberatung“)
Bilder von Ansprechpartnern oder bei Kundenzitaten
Bei Porträtfotos sollten stets Vorname und Nachname genannt werden. Falls weitere Details wichtig sind, dann auch im Alternativtext erwähnen (ergibt sich meist aus dem Kontext).
Infografiken
Infografiken bedürfen grundsätzlich einer Erläuterung. Wenn die Zeichenzahl der Alt-Texte ausreichen, sollte der Alt-Text genutzt werden, um die Infografik kurz zu beschreiben.
Beispiel:
„In der Grafik wird gezeigt, dass Dataport länderübergreifend arbeitet und dataport.kommunal sich ausschließlich auf die Kommunen konzentriert.“
Ist eine Erläuterung erklärungsbedürftiger kann der Alt-Text in Infografiken entfallen. Stattdessen sollten die wesentlichen Aussagen im Website-Text (BU oder Copy) enthalten sein.
Icons
Da Icons nie ohne Titel oder Beschreibung verwendet werden dürfen, kann bei Icons der Alt-Text entfallen.
Logos
Logos beinhalten stets den Alt-Text „Logo [Firmenname]“. Falls sie auf die Startseite der Firma verlinken, muss das auch deutlich werden.
Beispiel:
„Logo Dataport verlinkt auf die Startseite von Dataport.de.“
Falls das Logo an mehreren Stellen verwendet, aber nicht immer verlinkt wird, sollte der alt-Text nur “Logo Firma XY” enthalten. Und der Link Titel das Ziel beschreiben. Zum Beispiel “Zur Webseite von Firma XY”.
Screenshots
Wir verwenden an einigen Stellen Screenshots. Screenshots beinhalten stets eine Bildunterschriften. Dennoch sollten Screenshots auch immer einen beschreibenden Alt-Text beinhalten.
Beispiel:
Alt-Text: „Screenshot der Startseite von BOB-SH“
Zugehörige BU: „Auf der Startseite erhalten Bürger alle Informationen, um sich schnell und unkompliziert zu beteiligen.“
Klare und strukturierte Inhalte
Eine klare Struktur hilft allen Nutzer*innen dabei, Inhalte schnell zu erfassen. Besonders für Menschen, die Screenreader nutzen oder sich über die Tastatur auf einer Website bewegen, ist eine saubere Gliederung unverzichtbar.
Überschriften logisch und hierarchisch verwenden
Nutzen Sie Überschriften ausschließlich zur inhaltlichen Gliederung von Texten. Die Überschriftenebenen müssen dabei logisch aufeinander aufbauen (H1 → H2 → H3). Überspringen Sie keine Ebenen und verwenden Sie Überschriften nicht aus rein optischen Gründen. Eine klare Überschriftenstruktur erleichtert Screenreadern die Orientierung und verbessert die Verständlichkeit der Inhalte.
Kurze Absätze und einfache Sätze formulieren
Halten Sie Absätze möglichst kurz und beschränken Sie sich auf einen Gedanken pro Absatz. Verwenden Sie einfache, verständliche Satzkonstruktionen und vermeiden Sie unnötig verschachtelte Formulierungen. So bleiben Texte übersichtlich und leichter zugänglich – für alle.
Aufzählungen korrekt als Listen anlegen
Verwenden Sie für Aufzählungen immer die dafür vorgesehene Aufzählungsliste des TYPO3-Systems. Verzichten Sie auf selbst erstellte Listen mit Bindestrichen oder Sonderzeichen. Echte Listen werden von Screenreadern korrekt erkannt und ermöglichen Nutzer*innen eine bessere Orientierung innerhalb des Inhalts.
Links sinnvoll gestalten
Links sind zentrale Orientierungspunkte auf einer Website. Damit alle Nutzer*innen – insbesondere Menschen mit Screenreadern – Links problemlos verstehen und nutzen können, müssen sie eindeutig und aussagekräftig formuliert sein.
Aussagekräftige Linktexte verwenden
Gestalten Sie Linktexte so, dass sie das Ziel des Links klar benennen. Vermeiden Sie nach Möglichkeit allgemeine Formulierungen wie „Hier“ oder „Mehr“. Stattdessen sollte der Linktext beschreiben, was Nutzer*innen nach dem Anklicken erwartet, zum Beispiel „Anmeldeformular herunterladen“.
Links auch ohne Kontext verständlich machen
Viele Screenreader lesen Links unabhängig vom umgebenden Text aus. Achten Sie daher darauf, dass der Linktext auch für sich allein verständlich ist und das Ziel eindeutig beschreibt.
Mehrfach verwendete Linktexte vermeiden
Verwenden Sie nicht mehrfach denselben Linktext für unterschiedliche Ziele (z. B. mehrfach „Weitere Informationen“). Für Screenreader-Nutzer*innen ist sonst nicht ersichtlich, wohin die einzelnen Links führen.
Eigene verlinkte Inhalte barrierefrei halten
Achten Sie darauf, dass verlinkte Inhalte selbst barrierefrei sind. Das gilt insbesondere für PDFs, die selbst wiederum barrierefrei umgesetzt sein müssen.