Redaktionelle Maßnahmen für eine barrierefreie Website
Warum Barrierefreiheit in der Webredaktion wichtig ist
Sie möchten Ihre Website barrierefrei gestalten, wissen aber nicht, wo Sie anfangen sollen? Diese Tipps & Tricks bieten Ihnen praktische Vorschläge und Lösungen für die barrierefreie Gestaltung Ihrer redaktionellen Inhalte. Von der Auswahl der richtigen Schriftart bis zur Erstellung aussagekräftiger Alternativtexte – hier finden Sie hier alles, was Sie brauchen.
Durch die Optimierung für Menschen mit Beeinträchtigung verbessern Sie außerdem automatisch auch das Nutzererlebnis für alle Besucher. Denken Sie daran, dass jeder von uns in die Situation kommen kann, kurzfristig beeinträchtigt zu sein, zB durch eine Verletzung oder starke Sonneneinstrahlung. Die Optimierungen der Barrierefreiheit geht auch Hand in Hand mit Maßnahmen zur Suchmaschinenoptimierung.
Wir haben diese Tipps & Tricks Beitrag für Sie wie folgt gegliedert:
Barrierefreiheit bedeutet, dass Inhalte von allen Menschen, unabhängig von ihren Fähigkeiten oder Einschränkungen genutzt werden können. Das schließt Menschen mit Seh-, Hör-, motorischen oder kognitiven Einschränkungen ein. Im Bereich der redaktionellen Arbeit bedeutet das, dass Ihre Texte, Bilder und Medien so gestaltet werden, dass sie auch mit Hilfe von Assistenztechnologien wie Screenreadern oder Braillezeilen korrekt erfasst und verstanden werden können.
Die WCAG als Leitfaden
Die WCAG (Web Content Accessibility Guidelines) sind eine internationale Richtlinie für die Barrierefreiheit von Web-Inhalten. Sie liefern konkrete Kriterien und Erfolgsindikatoren, die bei der Gestaltung barrierefreier Inhalte helfen. Auch wenn es nicht notwendig ist, alle technischen Details der WCAG zu kennen, ist es hilfreich, die grundlegenden Prinzipien zu verstehen:
- Wahrnehmbarkeit: Inhalte müssen in einer Form präsentiert werden, die von den Nutzern wahrgenommen werden können.
- Bedienbarkeit: Bedienelemente müssen verständlich und bedienbar sein.
- Verständlichkeit: Informationen müssen leicht verständlich sein.
- Robustheit: Inhalte müssen robust genug sein, um von einer Vielzahl von Geräten und Technologien verarbeitet werden zu können.
Diesen Prinzipien werden mit Richtlinien und anschließend mit Erfolgskriterien verknüpft. Die Erfolgskriterien werden in drei verschiedene Konformitätsstufen A (minimale Stufe), AA (mittlere Stufe), AAA (höchste Stufe) eingeteilt. Sie geben an, wie gut die Barrierefreiheit einer Website umgesetzt ist.
Strukturierung der Inhalte
- Meta-Titel: Ihre Website sollte über einen aussagekräftigen Meta-Titel verfügen, der das Thema oder den Zweck beschreibt.
- Überschriften: Verwenden Sie klare und aussagekräftige Überschriften (H1, H2, H3, H4), um die Struktur Ihres Textes zu verdeutlichen. Screenreader verwenden diese Überschriften, um durch den Inhalt zu navigieren.
- Absätze: Gliedern Sie Ihren Text in kurze Absätze, um die Lesbarkeit zu erhöhen. Lange, zusammenhängende Textblöcke können ermüdend wirken.
- Listen: Verwenden Sie Aufzählungen und nummerierte Listen, um Informationen übersichtlich darzustellen.
- Formulare: Eine einleitende Prozessbeschreibung vor Formularen kann darüber informieren, was nach dem Absenden passiert. Dies bewirkt ein rascheres Verständnis bei den User:innen.
Sprache und Stil
- Einfache Sprache: Vermeiden Sie Fachjargon und komplizierte Satzstrukturen. Verwenden Sie stattdessen eine klare und einfache Sprache, die auch für Menschen mit geringen Sprachkenntnissen verständlich ist.
- Aktive Sätze: Formulieren Sie Sätze aktiv statt passiv. Aktive Sätze sind in der Regel kürzer und leichter zu verstehen.
- Kurze Sätze: Lange, verschachtelte Sätze können verwirren. Unterteilen Sie lange Sätze in kürzere auf.
Lesbarkeit
- Schriftart: Wählen Sie eine gut lesbare Schriftart in ausreichender Größe. Serifenlose Schriften wie Arial oder Verdana sind in der Regel besser geeignet als Schriften mit Serifen. Serifen sind kleine, dekorative Striche oder Linien (manchmal auch "Füßchen" genannt) an den Enden der Hauptstriche von Buchstaben.
- Zeilenabstand: Ein großzügiger Zeilenabstand verbessert die Lesbarkeit.
- Kontrast: Achten Sie auf einen guten Kontrast zwischen Text und Hintergrund. Dunkle Schrift auf hellem Hintergrund ist in der Regel am besten geeignet.
- URLs: Gut lesbare URLs sind vor allem für Screenreader-Nutzer:innen und deren Orientierung wichtig. Lesbare und sprechende URLs sind nicht nur gut für die Barrierefreiheit, sondern auch ein wichtiger Baustein für die Suchmaschinenoptimierung.
Beispiel für barrierefreie Sprache:
-
Nicht barrierefrei: "Wir sind eine tolle NGO, die sich für Menschen mit Beeinträchtigung einsetzt."
- Barrierefrei: "Wir sind eine gemeinnützige Organisation, die sich für die Rechte und Teilhabe von Menschen mit Beeinträchtigung einsetzt. Wir bieten Beratung und Unterstützung und setzen uns für eine inklusive Gesellschaft ein."
- Erklärung: Der barrierefreie Text ist konkreter und benennt die Ziele und Aktivitäten der Organisation.
Bilder und Medien sind wichtige Bestandteile moderner Websites. Damit sie für alle zugänglich sind, müssen einige wichtige Aspekte beachtet werden.
Alternativtexte
Alternativtexte sind kurze Beschreibungen von Bildern, die von Screenreadern vorgelesen werden. Sie sind unverzichtbar für sehbehinderte Nutzer:innen und verbessern auch die Auffindbarkeit von Bildern in Suchmaschinen. Sie werden außerdem auch angezeigt, wenn die Bilder nicht geladen werden können.
- Aussagekräftig: Der Alternativtext sollte den Inhalt des Bildes präzise beschreiben und keine Wiederholung des umgebenden Textes darstellen.
- Kontextbezogen: Der Text sollte den Kontext des Bildes im gesamten Dokument berücksichtigen.
- Kurz und prägnant: Alternativtexte sollten kurz und prägnant sein, um den Nutzer nicht zu überfordern. In unserem CMS REDX wird der Alt-Text mit maximal 255 Zeichen ausgegeben.
Videos und Audio
Video- und Audiodateien sind wichtige Medienformate. Um sie allen zugänglich zu machen, sind folgende Maßnahmen erforderlich:
- Untertitel: Untertitel ermöglichen gehörlosen und schwerhörigen Menschen den Inhalt von Videos zu verstehen.
- Transkriptionen: Eine vollständige schriftliche Version des Audioinhalts ermöglicht es den Nutzern den Inhalt in ihrem eigenen Tempo zu lesen.
- Audiobeschreibungen: Audiobeschreibungen sind zusätzliche Kommentare, die visuelle Elemente in Videos für blinde und sehbehinderte Nutzer beschreiben.
Beispiel für einen barrierefreien Alternativtext:
-
Nicht barrierefrei: "Maus und Mauspad"
- Barrierefrei: "Eine schwarze Mausmatte mit dem Firmenlogo von XORTEX, die die Dienstleistungen 'Websites', 'Webshops', 'Apps' und 'Hosting' anbietet. Auf dem Mauspad liegt eine graue, ergonomisch geformte Computermaus."
- Erklärung: Der barrierefreie Text ist konkreter und beschreibt die Details des Bildes.
Links sind ein wesentlicher Bestandteil jeder Website, da sie den Nutzern einen schnellen und einfachen Zugang zu weiteren Informationen ermöglichen. Um sicherzustellen, dass Links für alle zugänglich und verständlich sind, sollten die folgenden Aspekte berücksichtigt werden:
Aussagekräfte Linktexte
Der Linktext, oft auch Ankertext genannt, sollte immer aussagekräftig und informativ sein:
- Vermeidung generischer Linktexte: Statt "Klicken Sie hier" oder "Mehr erfahren" sollten konkrete Begriffe verwendet werden, die den Inhalt der Zielseite beschreiben.
- Relevanz: Der Linktext sollte zum Kontext passen und den Nutzer darauf vorbereiten, was ihn auf der verlinkten Seite erwartet.
- Keywords: Die Integration relevanter Keywords kann die Suchmaschinenoptimierung (SEO) unterstützen.
Interne und externe Links
- Interne Links: Verlinkungen innerhalb einer Website dienen der Strukturierung und verbessern die Benutzerfreundlichkeit.
- Externe Links: Links auf externe Websites können zusätzliche Informationen bieten oder auf relevante Quellen verweisen.
- In neuem Tab öffnen: Bei externen Links ist es oft sinnvoll, diese in einem neuen Tab zu öffnen, um den Benutzer nicht von der aktuellen Seite wegzuführen.
- nofollow-Attribut: Bei externen Links kann das nofollow-Attribut verwendet werden, um Suchmaschinen mitzuteilen, dass der Link nicht als Empfehlung gewertet werden soll.
Visuelle Gestaltung von Links
- Achten Sie auf die richtige Gestaltung von Links und Buttons. Links verweisen auf andere Seiten oder zu einem Anker auf derselben Seite. Buttons lösen Aktionen wie „Jetzt kaufen“ oder „Formular absenden“ aus.
- Verwenden Sie title-Attribute für nicht sprechenden Links. Den User:innen wird diese Information ergänzend als Tooltip angezeigt. Das title-Attribut kann zB verwendet werden, wenn bei Klick ein neues Fenster geöffnet wird. Dabei wird der Hinweis auf das Öffnen in einem neuen Fenster gegeben, damit den User:innen klar ist, dass sich ein neuer Tab im Browser öffnet.
Ein Beispiel für eine barrierefreien Link:
-
Nicht barrierefrei: Klicken Sie hier, um mehr zu erfahren.
-
Barrierefrei: Erfahren Sie mehr über unsere Datenschutzrichtlinie.
- Erklärung: Der barrierefreie Link ist konkreter und nennt das Ziel des Links.
Das neue Barrierefreiheitsgesetz 2025
Möchten Sie noch tiefer in die rechtlichen Aspekte der Barrierefreiheit eintauchen? In unserem Blogbeitrag zum Barrierefreiheitsgesetz 2025 finden Sie alle wichtigen Informationen.
Web-Redaktion von XORTEX
Die Barrierefreiheit Ihrer Website liegt uns am Herzen. Gerne übernehmen wir die redaktionelle Umsetzung und sorgen dafür, dass Ihre Inhalte für alle Nutzer:innen zugänglich sind.
Barrierefreie Websites? XORTEX macht's möglich!
Sie möchten Ihre Website barrierefrei gestalten und die gesetzlichen Anforderungen erfüllen? Unser Expertenteam unterstützt Sie gerne bei der Umsetzung Ihrer Barrierefreiheitsziele. Wir bieten Ihnen umfassende Dienstleistungen rund um die barrierefreie Gestaltung Ihres digitalen Auftritts.