Inhalte erfolgreich barrierefrei gestalten

Digital ohne Barrieren: Es zählen CMS und Inhalt

Digitale Barrierefreiheit ist nicht nur eine Frage der technischen Umsetzung einer Website. Vor allem das Content-Management-System und die Aufbereitung des Inhalts sind entscheidend, um Websites und mobile Anwendungen ohne Barrieren nutzbar zu machen. Hier finden Sie alles, worauf Sie bei der barrierefreien Gestaltung von Inhalten achten müssen - vom Alt-Text bis zu barrierefreien Bildern und Medien.

Inhalte für alle Sinne

Der wichtigste Grundsatz für Barrierefreiheit lautet: Alle Inhalte müssen immer für alle Sinne erfassbar sein. Nur dann können alle Menschen trotz unterschiedlichen Einschränkungen alle Inhalte umfassend erfassen.

• Wer schlecht sieht, braucht gute Farbkontraste und große Schriften.
• Blinde Menschen brauchen jeden Text auch in hörbarer Variante, jedes Bild oder Video akustisch beschrieben.
• Für Gehörlose müssen Audio- und Videodateien mit oder durch Text ersetzt werden.
• Besonders für Menschen mit Lernschwierigkeiten sind verständliche Texte ohne Fremdwörter und kurze Zusammenfassungen wichtig.

Barrierefreie Inhalte: Worauf Redakteure achten sollen

Je nach Art der Inhalte und der jeweiligen Aufbereitung sind in Sachen digitale Barrierefreiheit andere Gesichtspunkte zu beachten. Die wichtigsten haben wir hier zusammengefasst:

• Überschriften strukturieren
  • Die richtige Reihenfolge von Überschriften ist wichtig. Sie macht Zusammenhänge und Relevanz erkennbar.
  • Jede Seite darf eine H1 haben, diese steht am Beginn stehen beinhaltet den Titel der Seite
  • Nach der H1 können nur H2 Überschriften folgen. Folgt auf eine H2 eine weitere H2 ist daran zu erkennen, das hier ein gleich wichtiger Abschnitt beginnt.
  • Auf eine H2 kann eine H3 folgen. Sie markiert eine Untergliederung zur vorangegangen H2.
• Richtige Beschriftung von Bildern und Medien
  • Blinde bekommen den Text vorgelesen, entsprechend wichtig ist der Alternativ-Text (ALT-Text). Dieser soll den Inhalt des Bilders beschreiben.
  • Bei Filmen oder Audio gibt der ALT Text ebenfalls den Inhalt wieder.
  • Rein dekorative Bildern, die zum Inhalt nichts beitragen (die man also auch weglassen könnte) können mit“alt=”” gekennzeichnet werden. ALT Texte sollten immer klare Informationen enthalten, Texte wie “...” oder “Bild” sind kontraproduktiv, da diese vorgelesen werden aber keine Information enthalten.
• Tabellen richtig codieren
  • Damit Tabellen auch für blinde oder sehbehinderte Menschen verständlich sind, brauchen sie neben der rein optischen auch eine programmatische Zuordnung der Daten zu ihren Metadaten - und umgekehrt.
  • Für barrierefreie Tabellen muss deren Quelltext aus Elementen und Attributen bestehen, die es erlauben, die notwendigen Verknüpfungen herzustellen, um die Daten dem Nutzer entsprechend zu präsentieren.
• Downloads erkennbar machen
  • Führt ein Link zu einem Download, sollte das klar zu erkennen sein.
  • Hilfreich sind auch Angaben, wie groß die Download-Datei ist.
• Listen strukturieren
  • Für blinde ist es hilfreich, wenn Aufzählungen und Listen als HTML- Listen strukturiert sind
  • Das ermöglicht Screenreader-Anwendungen, die einzelnen Elemente richtig vorzulesen und den Unterschied zu Fließtext zu erkennen.
• Links kennzeichnen und präzise benennen
  • Es muss visuell wahrnehmbar sein, dass es sich bei einem Link um einen Link handelt.
  • Es muss visuell wahrnehmbar sein, wenn sich die Maus über dem Link befindet oder der Fokus auf dem Link liegt.
  • Ausreichender Kontrast bei allen Linkzuständen (auch besucht, HOVER- oder Fokuseffekt) ist wichtig.
  • Der Text des Links soll möglichst kurz und präzise den Inhalt der Zielseite enthalten.Problematisch sind Link-Beschriftungen wie “mehr” oder “hier”, wie sie manchmal bei kontextuellen Links vorkommen.
  • Es ist für Nutzer von Screenreadern hilfreich, wenn der Text des Links nicht mit einem Sonderzeichen oder Artikel beginnt, sondern direkt mit dem jeweiligen Begriff, der den Inhalt beschreibt. (“Kontakt” statt “Zum Kontakt”)
• Farbkontraste und Bedeutungen bedenken
  • Hintergründe müssen einen ausreichenden Kontrast zum Text aufweisen. Am besten lesbar ist schwarzer Text auf weißem Hintergrund oder umgekehrt.
  • Laut WCAG 2.2 gilt das Kontrastverhältnis von 4,5:1 als Untergrenze.
  • Rot-Grün-Kombinationen sind zu vermeiden, da sie von Menschen mit Rot-Grün-Blindheit nicht erkannt werden.
  • Manche Farben haben inhaltliche Bedeutung (Rot für Gefahr, Grün für Fluchtwegen, etc.) Auf diese semantische Konventionen ist zu achten.
• Abkürzungen vermeiden oder kennzeichnen
  • Wir verwenden im Alltag oft Abkürzungen: “z.B” oder usw. sind besonders häufig im Sprachgebrauch.
  • Damit Screenreader die verständliche Langversion vorlesen anstatt lediglich die Buchstabenkombinationen, ist es wichtig, diese Abkürzungen als solche zu kennzeichnen.
• Formatierung des Datums 
  • Damit ein Screenreader ein Datum verständlich vorlesen kann, muss es als Datum erkennbar sein.
  • Die Formatierung kann in HTML hinterlegt werden.
  • Schreibt man einfach “04.03.2020”, bekommt man “Null-vier-punkt-Null-drei-punkt-...” vorgelesen.
• Jeweilige Sprache angeben
  • Sind Teile einer Seite in einer anderen Sprache verfasst, muss das markiert werden.
  • Wird das nicht gemacht, werden englische Wörter “deutsch” ausgesprochen - womit man sie kaum verstehen kann.

Barrierefreiheit überprüfen

Um zu prüfen, ob die Inhalte barrierefrei gestaltet sind, gibt es zahlreiche Werkzeuge.

Im Bereich Testen haben wir einen Überblick über die Möglichkeiten erstellt.
Im Bereich Werkzeuge stellen wir einige der Hilfsmittel für die Überprüfung von Barrierefreiheit vor.

Die besten Tipps für barrierefreie Inhalte

Nicht nur technisch, auch inhaltlich muss auf die Vermeidung von Barrieren geachtet werden. Die wichtigsten Grundsätze dabei sind:

• Gestalten Sie alle Inhalte so, dass sie jeweils für alle Sinne zu erfassen sind.
• Beschriften Sie Bilder und Medien.
• Achten Sie bei Tabellen, Listen und Abkürzungen auf die entsprechende Codierung, damit sie auch Screenreader richtig erfassen können.
• Kennzeichnen und benennen Sie Links und Downloads, sodass sie klar als solche ersichtlich sind.
• Verwenden Sie gute Kontraste und Farben gemäß ihrer Bedeutung.
• Strukturieren Sie die Überschriften für einen nachvollziehbaren Seitenaufbau.