Die Informationen über barrierefreie Blog-Beiträge in diesem Artikel beruhen auf Erfahrungen. Die Hinweise haben einen Mehrwert für Nutzerinnen und Nutzer von Content Management System in der Redaktion. Mit den wichtigsten Grundlagen verbesseren Sie gleichzeitig die Lesbarkeit für Suchmaschinen.
Inhaltsverzeichnis
Text-Inhalte
Achten Sie auf leicht verständliche Sprache. Ausführliche Informationen lesen Sie auf der Seite Barrierefreie Kommunikation. Sie können auch den Inhalt nach dem Schlagwort „Leichte Sprache“ in dem Blog filtern. Sollte der Text zum Beispiel auf einer deutschen Website in englisch eingefügt werden, verwenden Sie für den Absatz die Sprach-Einstellungen in dem Absatz. Vermeiden Sie im Beitrag PDF-Dokumente und achten Sie bei verlinkten PDF-Dokumenten auf die PDF-Barrierefreiheit. Verwenden Sie in dem Editor des Content Management Systems immer die richtigen HTML-Elemente! Dazu muss kein technisches Wissen vorhanden sein. Wichtig ist, dass die Funktionen innerhalb des Textes für das verwendet werden, was sie sein sollen. Die wichtigsten Elemente sind:
- Überschrift | <H1 , H2, H3, H4, H5 oder H6>
- Absatz | <p>
- Liste | <li>
- Zitat | <quote> und <blockquote>
Ein gutes Beispiel für eine richtig erstellte Liste:
- Dies ist Punkt 1 in der Liste
- Dies ist Punkt 2 in der Liste
- Dies ist Punkt 3 in der Liste
<ul><!-- wp:list-item -->
<li>Dies ist Punkt 1 in der Liste</li>
<!-- /wp:list-item -->
<!-- wp:list-item -->
<li>Dies ist Punkt 2 in der Liste</li>
<!-- /wp:list-item -->
<!-- wp:list-item -->
<li>Dies ist Punkt 3 in der Liste</li>
<!-- /wp:list-item --></ul>Ein schlechtes Beispiel einer falsch formatierten Liste zur Veranschaulichung:
-dies soll Punkt 1 in der Liste sein
-dies soll Punkt 2 in der Liste sein
-dies soll Punkt 3 in der Liste sein
Als HTML-Code sieht die falsch formatierte Liste dann so aus:
<p>-dies soll Punkt 1 in der Liste sein<br>-dies soll Punkt 2 in der Liste sein<br>-dies soll Punkt 3 in der Liste sein</p>Es sind Absätze mit Umbrüchen erstellt und zu Beginn mit einem Trennstrich dargestellt worden. Diese Darstellung ist für einen Screenreader nicht geeignet.
Titel, Meta-Daten und Permalink
Geben Sie dem Beitrag einen aussagekräftigen Titel.
Schreiben Sie einen Text in der kurzen Vorschau des Inhaltes. Die sogenannten Snippets sollten nicht länger als 160 Zeichen sein und ein Fokus-Keyword aus dem Artikel enthalten. Der beschreibende Text für diesen Beitrag als Beispiel lautet: „Erfahren Sie, wie Sie barrierefreie Blog-Beiträge erstellen und Ihre Reichweite und organischen Traffic steigern können.“
Der Permalink ist der Text, der in der Zeile vom Browser erscheint. Darin enthalten sollte der kurze, beschreibende Hinweis des Artikels enthalten sein.
Beispiel für einen Permalink mit Sinn: distriko.de/blog/beitrag/barrierefreien-blog-beitrag-erstellen
Beispiel für einen wertlosen Permalink: distriko.de/blog/beitrag/12345-0815-4711
Überschriften
Die Überschriften müssen in der richtigen, absteigenden Reihenfolge ähnlich wie in einer Projektarbeit mit einem Inhaltsverzeichnis erstellt werden. Ein positives Beispiel finden Sie in dem Inhaltsverzeichnis zu Beginn dieses Blog Beitrags. Außerdem sollte jeder Artikel und jede Seite genau eine Überschrift H1 haben.
Schriftart und Schriftgröße
Die Schriftart sollte den Kriterien der Barrierefreiheit entsprechen und gute Merkmale zur Unterscheidung der Buchstaben haben. Ausführliche Informationen lesen Sie unter dem Beitrag Barrierefreie Schriftart Atkinson Hyperlegible in diesem Blog und den weiterführenden Quellen.
Grafiken
Beschreiben Sie in einfacher Form den Inhalt der Grafik. Es gibt in diesem Blog auch einen ausführlichen Artikel über Bilder ALT-Text. Formatieren Sie die Grafiken möglichst so, dass die Auflösung nicht größer als notwendig ist. Weil viele Nutzerinnen und Nutzer heute auf mobilen Geräten ihren Inhalt konsumieren, sind oft viel geringere Bild-Qualitäten ausreichend. Das ist auch ein großer Hebel für die Geschwindigkeit der Ladezeiten ihrer Website. Moderne Formate wie AVIF oder WEBP und SVG bieten zusätzliche Möglichkeiten der Optimierung. Erfahrungsgemäß können auf älteren Geräten damit jedoch Fehler in der Darstellung passieren.
Tabellen
Auf Tabellen muss nicht verzichtet werden. Dennoch sollte im ersten Schritt überlegt werden, ob eine alternative Möglichkeit zur Darstellung des Inhalts verfügbar ist. Eine Liste ist zum Beispiel sehr gut wahrnehmbar für Screenreader.
- Bitte unbedingt das richtige HTML-Element verwenden
- Keine leeren Zeilen für den Abstand einfügen
- Möglichst kurze Daten-Inhalte und keine langen Texte
Videos
Für Videos müssen Alternativen zur Verfügung stehen. Über das Thema gibt es in diesem Blog auch den Beitrag Barrierefreie Verlinkungen zu Videos oder ein Video auf dem YouTube Kanal Barrierefreie Verlinkung zu Videos
Links
Die Verlinkungen sollten eine Beschreibung enthalten. „Weiterlesen“… oder „Mehr lesen…“ sollte vermieden werden. Die Ziele zu den Links können auch „unsichtbar“ mit Informationen angereichert werden. So kann eine universelle Wahrnehmbarkeit erzielt werden. Außerdem müssen Links in Texten mit mehr Informationen als der Textfarbe gekennzeichnet sein. Eine weit bekannte Information ist die Unterstreichung oder die Darstellung in fetter Schrift. Bei verlinkten Dateien sollte zusätzlich das Datei-Format und die Größe angegeben werden.
Die gesamten Erfahrungen auch zum Thema SEO passen nicht in diesen Artikel. Wenn Sie alle Tipps und Tricks lernen oder ihr Team auf bevorstehende Anforderungen trainieren möchten, senden Sie gerne ihre Anfrage auf der Seite Kontakt. Wir freuen uns auf die Zusammenarbeit!
Kommentare von Beiträgen
Das Kommentieren in diesem Blog ist gewünscht und möglich!
Bitte senden Sie das Kontakt-Formular ein. Schreiben Sie eine Nachricht, dass Sie ein Benutzerkonto haben möchten. Dann erhalten Sie schnellstmöglich eine Antwort. Vielen Dank für das Verständnis!