Barrierefreiheit: Leitfaden für Redakteurinnen und Redakteure
Warum barrierefreie Webseiten?
Die Universität Hamburg ist gesetzlich verpflichtet, ihre Website barrierefrei zu gestalten, vgl. Seite Gesetzliche Grundlagen für die Barrierefreiheit. Das bedeutet, dass die Inhalte auch bei eingeschränkter Wahrnehmungsfähigkeit zugänglich sein müssen.
Wenn eine Website barrierefrei gestaltet ist, können mehr Menschen diese uneingeschränkt nutzen. Die Kontraste und Schriftgrößen auf der Website stellen eine gute Lesbarkeit sicher. Die Texte sind gut strukturiert und in HTML richtig formatiert, so dass beispielsweise Menschen mit eingeschränkter Sehfähigkeit sogenannte Screenreader nutzen können, um sich die Inhalte vorlesen zu lassen. Es gibt auch andere assistive Technologien wie Vergrößerungssysteme oder spezielle Bedienhilfen, mit denen eine Website harmonieren muss.
Die technischen Voraussetzungen für die Kompatibilität mit assistiven Technologien, kontrastreiche Farben und Schriftgröße stellt Abteilung 2 sicher. Darum müssen Sie sich nicht kümmern.
Aber auch die Redakteurinnen und Redakteure, die mit dem CMS arbeiten, können (und müssen) ihren Beitrag leisten für eine barrierefreie Website. Keine Sorge: Es ist weniger kompliziert, als Sie vielleicht denken. Wir haben hier die wichtigsten Prinzipien für Online-Redakteurinnen und -Redakteure zusammengestellt:
Fünf Tipps für Redakteurinnen und Redakteur zur Barrierefreiheit:
1. Überschriften mit Headlines auszeichnen
Überschriften strukturieren die Texte optisch und erleichtern auch Screenreadern die Navigation durch den Text. Daher sollten alle Überschriften entsprechend markiert werden: Die erste Überschrift muss Heading 1 sein. Dies entspricht in HTML <h1> und ist automatisch vorhanden, wenn Sie das Feld „Titel“ im CMS ausfüllen.
Abbildung 1: Die Headline 1 (<h1>) wird über die Seiteneigenschaften vergeben, konkret das Feld „Titel“.
Im Editor vergeben Sie dann weitere Überschriften: <h2>, <h3> bis <h4>. (<h5> und <h6> sind in unserem Webauftritt nicht definiert.)
Abbildung 2: Die Formatierung der Überschrift wird im Hauptinhalt über „Formats“ definiert.
2. Eindeutige Absätze verwenden
Um Hilfsprogramme wie beispielsweise einen Screenreader sinnvoll einsetzen zu können, muss der Text sauber ausgezeichnet sein, nicht nur mit Headlines, sondern auch mit „paragraphs“ (<p>):
Bitte achten Sie darauf, jeden Absatz zu kennzeichnen (<p>Hier steht ein Absatz. </p>) und keine leeren Absätze (<p></p>) einzufügen, um Abstände zu vergrößern. Verwenden Sie generell lieber kurze Absätze (mit weniger als 500 Zeichen).
Abbildung 3: Gut gegliederte Absätze machen einen Text besser lesbar.
3. Text mit Aufzählungen strukturieren
Lockern Sie den Text gern mit Listen oder Aufzählungspunkten auf. Verwenden Sie dafür immer die entsprechende Formatierung im Editor (wie z.B. „Bullet lists“) und arbeiten Sie nicht mit Bindestrichen o.Ä. So können Sie sichergehen, dass der HTML-Code gut erkennbar und die Darstellung einheitlich ist.
Abbildung 4: Aufzählungszeichen können über das entsprechende Menü im Editor sauber formatiert werden.
4. Aussagekräftige Linktexte formulieren
Der Linktext sollte immer das Ziel des Links beschreiben, damit gleich erkennbar ist, wohin der Link führt. Wenn auf ein Dateiformat verlinkt wird, das keine HTML-Seite ist, sollte im Linktext auch das Dateiformat genannt werden.
Also: Pressemitteilung als PDF
Wenig hilfreich sind allgemeine Formulierungen wie
- Mehr
- Weiterlesen
- Mehr Informationen finden Sie hier…
Abbildung 5: Aussagekräftige Linktexte sind elementar für das Verständnis der weiterführenden Inhalte
5. Bildern einen ALT-Text geben
Wenn ein Bild z.B. aus technischen Gründen nicht geladen werden kann, wird als Alternative der ALT-Text angezeigt. Auch ein Screenreader liest diese Information vor. Daher sollte das Bild sinnvoll beschrieben werden, und zwar so, dass ein Nicht-Sehender weiß, was auf dem Bild zu sehen ist.
Der Alternativtext sollte nicht zu lang und nicht zu kurz sein: Der Text sollte ausreichende Informationen geben, um das Bild korrekt zu beschreiben, ohne zu viele Details zu nennen. Der User sollte verstehen, warum das Bild eingebunden wurde.
Ausnahmen:
- Wenn Grafiken als Link dienen, dann sollte der Alternativtext das Linkziel wiedergeben: alt="Linkziel".
- Wenn Grafiken bei Klick eine Aktion auslösen, sollte der Alternativtext die Aktion wiedergeben: alt="Aktion".
Abbildung: Im ALT-Text wird beschrieben, was auf dem Bild zu sehen ist
Weitere Infos
Die Web Content Accessibility Guidelines (WCAG; englisch: „Richtlinien für barrierefreie Webinhalte“) formulieren den internationalen Standard zur barrierefreien Gestaltung von Internetangeboten. Die WCAG 2.1 Stufe AA ist in der EU für öffentliche Stellen ab 23. September 2019 für neue und ab 23. September 2020 für bestehende Websites und ab 23. Juni 2021 für mobile Anwendungen verbindlich.
Erläuterungen und Umsetzungsbeispiele zu jedem Prüfschritt finden Sie auf der Seite „Understanding WCAG 2.1“.