Tipps wie Sie einen Barrierefreien Blog-Beitrag erstellen 📰

Artikel aktualisiert am 11.06.2024

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.

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.

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

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!

Schreibe einen Kommentar