Barrierefreie Webinhalte - Tipps für Redakteure

Eine barrierefreie Website ermöglicht eine uneingeschränkte Benutzung für jeden — auch wenn die Nutzenden Einschränkungen beim Sehen, Hören, Bewegen oder beim Verarbeiten von Informationen haben. Die folgenden Tipps behandeln die Inhalte der Website, die Sie im Rahmen Ihrer eigenen Website-Pflege bearbeiten.

Bilder und Grafiken

Bilder sind für sehbehinderte Menschen ein Hindernis. Gehören Sie zum Inhalt, geben Sie eine Beschreibung des Bildes an. Technisch handelt es sich dabei um die alt-Auszeichnung.

Es gelten folgende Empfehlungen:

• Beschreiben Sie prägnant, was auf dem Bild zu sehen ist.
• Handelt es sich um ein reines Bild zur Dekoration, bleibt die Beschreibung leer, das alt-Attribut wird aber gesetzt (alt="").
• Ist das Bild gleichzeitig ein Link, beschreiben Sie nicht, was auf dem Bild zu sehen ist, sondern wohin der Link führt - oder eine Kombination, wenn sinnvoll.
  Beispiel: Logo Partnerunternehmen – zur Website XY GmbH

Komplexe Grafiken, zum Beispiel Diagramme, sollten separat beschrieben werden, da die Bildbeschreibung kurz gehalten wird.

Beispiel: Die Grafik zeigt die Entwicklung der Marktanteile der letzten fünf Jahre. X ist dabei gleichbleibend der Marktführer mit über 60 Prozent.

Wo hinterlegen Sie die Beschreibung?

Das Feld für die Beschreibung finden Sie bei Ihrem Content-Management-System direkt dort, wo Sie das Bild einbinden. Bei Joomla! sieht es zum Beispiel so aus:

Links

Setzen Sie Links am besten auf aussagestarke Linktexte, der jeweils angibt, wohin der Link führt. Ist das nicht der Fall („hier klicken“), sollte das Linkziel im Titel erwähnt werden oder im passenden Kontext stehen.

Empfohlen ist zudem, dass Sie angeben, wenn der Link sich in einem neuen Fenster öffnet oder es ein anderes Format ist.

Beispiele: Laden Sie unser Merkblatt für X herunter (nicht barrierefreie PDF-Datei).
Erfahren Sie mehr bei unserem Partner Y (Link öffnet in neuem Fenster).

Überschriftenstruktur

Für einen gut lesbaren Text ist es sinnvoll, ihn in Absätze zu teilen und mit aussagekräftigen Überschriften und Zwischenüberschriften zu versehen. Dabei ist die richtige Reihenfolge der Überschriften wichtig. Technisch gibt es in HTML Überschriften von Typ 1 bis Typ 6 (<h1>Überschrift 1</h1>, <h2>Überschrift 2</h2>,...) und es gilt:

• Jede Unterseite sollte eine - und nur eine - Überschrift vom Typ 1 haben.
• Weitere Überschriften folgen einer logischen Struktur.
• Es sollten keine Überschriften übersprungen werden.

Mit einem Tool lässt sich die Struktur leicht prüfen:

Wie zeichne ich eine Überschrift aus?

Ein fett markierter Absatz sieht mitunter aus wie eine Überschrift, es ist technisch aber keine. Der Editor bieten für die Auszeichnung entsprechende Werte an:

Lesbarkeit

Ein gut lesbarer Text hilft, die Inhalte schnell zu erfassen. Dazu gehören folgende Tipps:

• Erstellen Sie Absätze in überschaubarer Länge.
• Nutzen Sie Hervorhebungen (Fettdruck).
• Verwenden Sie kurze, klare Sätze mit wenig Verschachtelungen.
• Verwenden Sie Aktiv statt Passiv.
• Vermeiden Sie Abkürzungen und Fremdwörter. Nutzen Sie Abkürzungen oder Fremdwörter, erklären Sie diese beim ersten Vorkommen.

Eine Methode, die Lesbarkeit zu messen ist der Flesch-Index (Lesbarkeitsindex). In einer Skala von 0 bis 100 gibt er die Textschwierigkeit an. Für Website-Text ist ein Wert zwischen 50 und 70 empfohlen.

Leichte Sprache ist die Bezeichnung für eine bestimmte Sprachversion mit einem festgelegten Regelwerk. Das ist nicht das gleiche wie einfache Sprache. Für die meisten Websites ist ein einfacher, gut lesbarer Text ausreichend.

Video- und Audiodateien

Für Video- oder Audioinhalte ergänzen Sie zusätzlich den Inhalt in Textform (als Transkript oder Zusammenfassung des Inhalts).

Des Weiteren gilt, dass Medien nicht automatisch abgespielt werden sollen und bieten Sie immer auch die Möglichkeit zum Stoppen von bewegten Elementen.

Barrierefreie nicht-HTML-Inhalte

Bei der Erstellung der Medien selbst gibt es ebenfalls Empfehlungen für eine barrierefreie Umsetzung (zum Beispiel Untertitel in Videos).

Auch für PDFs, Präsentationen und andere Dokumente gibt es Vorgaben zur Barrierefreiheit. Verlinken Sie solche Dokumente auf der Website, befassen Sie sich für diese Formate mit dem Thema.

Diese Formate werden an dieser Stelle nicht weiter vertieft.

Weitere Tipps und Hintergründe

(Es handelt sich nicht um Affiliate-Links, sondern um eine persönliche Empfehlung.)

Nützliche Tools für Redakteure

Es gibt mehrere Tools, mit denen Sie Ihre Website testen können, um Ihre Arbeit zu überprüfen. Hier haben wir eine erste Auswahl für Sie zusammen gestellt:

• Chrome-Erweiterung SEO META in 1 CLICK (Link öffnet in neuem Fenster)
• Erweiterung für verschiedene Browser HeadingsMap
• WAVE Web Accessibility Evaluation Tool (Link öffnet in neuem Fenster)
• Joomla! Core Plugin Barriere-Check
• Yoast für Wordpress

Fragen Sie eine Analyse bei uns an, um einen Überblick zum Stand Ihrer Website zu erhalten. Für die inhaltlichen Baustellen machen wir gerne eine Schulung mit Ihnen.