Checkliste: in 8 Schritten zur barrierefreien Website

Eine barrierefreie Website ist nicht nur eine rechtliche Verpflichtung, sondern auch ein Zeichen von Respekt und Inklusion gegenüber allen Nutzern. Mit dieser Checkliste kannst du sicherstellen, dass deine Webseite für alle Menschen zugänglich ist.

Autorin: Lisa Augustin Zuletzt aktualisiert: 20. Juni 2024
Checkliste Icon

Mit dem Barrierefreiheitsstärkungsgesetz (BFSG), das 2025 in Kraft tritt, wird die Barrierefreiheit im digitalen Raum in Deutschland verbindlich geregelt. Das Gesetz verpflichtet viele Unternehmen und öffentliche Einrichtungen dazu, ihre digitalen Angebote so zu gestalten, dass sie von allen Menschen, unabhängig von ihren individuellen Einschränkungen, genutzt werden können. Konkret heißt das die Verpflichtung zur Einhaltung der WCAG 2.1 Richtlinien der Stufe AA. Doch nicht nur aus rechtlichen Gründen ist es wichtig, barrierefreie Websites zu erstellen – es verbessert auch die Nutzerfreundlichkeit und das Nutzererlebnis für alle.

Diese Checkliste hilft dir dabei, die wichtigsten Aspekte der Barrierefreiheit zu berücksichtigen und umzusetzen.

Disclaimer: Diese Checkliste wurde nicht von einem Anwalt überprüft und stellt keine rechtliche Beratung dar. Für spezifische rechtliche Fragen oder Anforderungen sollten Sie einen Rechtsanwalt konsultieren.

Verpflichtende Maßnahmen laut BFSG

  • Regelmäßige Überprüfung: Unternehmen und öffentliche Einrichtungen sind verpflichtet, ihre digitalen Angebote regelmäßig auf Barrierefreiheit zu überprüfen und entsprechend anzupassen. Die folgende Checkliste kann dabei helfen.
  • Dokumentation und Nachweis: Es muss dokumentiert werden, welche Maßnahmen zur Barrierefreiheit ergriffen wurden und wie die Barrierefreiheit gewährleistet wird.
  • Bereitstellung von Erklärungen: Es müssen Erklärungen zur Barrierefreiheit bereitgestellt werden, die für die Nutzer leicht zugänglich und verständlich sind.
  • Feedbackmechanismen: Es müssen Mechanismen bereitgestellt werden, über die Nutzer Barrieren melden und Feedback geben können.

Nutze automatisierte und manuelle Tests zur Überprüfung der Barrierefreiheit deiner Website. Du kannst zum Beispiel einen Screenreader nutzen und verschiedene körperliche Einschränkungen simulieren, um die Website ausgiebig zu testen.

Schritt 1: Wahrnehmbarkeit verbessern

Textalternativen für Nicht-Text-Inhalte

  • Alt-Texte für Bilder: Beschreibe Bilder, Grafiken und Icons mit aussagekräftigen Alternativtexten. Das Alt-Attribut darf nicht missbraucht werden, um Keywords in den Text einfließen zu lassen, sondern muss das Bild beschreiben. Der Alternativtext soll den Lesern helfen, das Bild oder die Grafik zu verstehen, sofern man es nicht sehen kann. Egal, ob aus technischen oder gesundheitlichen Gründen.
  • Untertitel und Transkripte für Videos: Biete Untertitel für Videos an und stelle Transkripte zur Verfügung.
  • Beschreibungen für Audioinhalte: Erstelle schriftliche Beschreibungen für Audioinhalte.

Dokumente

  • PDFs und andere Dateien: Stelle sicher, dass alle herunterladbaren Dokumente ebenfalls barrierefrei sind.
  • Alternative Formate: Biete alternative Formate wie HTML-Versionen von PDF-Dokumenten an.

Anpassbare Inhalte

  • Vergrößern und verkleinern: Die Website muss uneingeschränkt responsive funktionieren, wenn Inhalte über den Browser verkleinert oder vergrößert werden.
  • Farbanpassungen: Erlaube Anpassungen der Farben, z. B. für Nutzer mit Farbsehschwächen oder Sehbehinderungen. Hier könnte auch ein sogenannter Dark-Modus hilfreich sein.
  • Anpassbarer Kontrast: Ermögliche Nutzern, den Kontrast zwischen Text und Hintergrund anzupassen.
  • Anpassbare Benutzereinstellungen: Ermögliche Nutzern, ihre eigenen Barrierefreiheitseinstellungen zu speichern und wiederzuverwenden.

Schritt 2: Inhalte strukturieren

  • Listen und Absätze: Nutze Listen und Absätze zur besseren Lesbarkeit und Strukturierung.
  • Semantische HTML-Elemente: Setze semantische HTML-Elemente wie <header>, <nav>, <main>, und <footer> ein.
  • Überschriften-Hierarchie: Verwende eine logische Struktur der Überschriften mit H1, H2, H3 usw. für eine klare Gliederung.
H Überschriftenstruktur für saubere Websites
Laptop mit Glühbirne
Lisa’s Tool Tipp
Mit dem kostenlosen Chrome-Plug-in „SEO Meta in 1 Click“ kannst du dir mit einem Klick die Überschriftenhierarchie einer Webseite anzeigen lassen.

Schritt 3: Verständlichkeit prüfen

  • Textkontrast: Stelle sicher, dass der Text genügend Kontrast zum Hintergrund aufweist (mindestens 4.5:1 für normalen Text).
  • Schriftgröße und -art: Verwende gut lesbare Schriftarten und -größen. Die Mindestschriftgröße sollte 16px betragen.
  • Zeilenabstand und Absatzlänge: Achte auf ausreichenden Zeilenabstand und vermeide zu lange Absätze.
  • Lesbarkeit der Inhalte: Texte müssen klar und verständlich geschrieben sein. Technische oder spezifische Fachbegriffe sollten erklärt werden.
  • Einfache Sprache: Verwende kurze und prägnante Sätze, um die Lesbarkeit zu verbessern.
  • Bekannte Wörter: Nutze einfache und gebräuchliche Wörter und vermeide Fachjargon und komplizierte Ausdrücke.

Tipp: Lasse die Texte von Personen außerhalb der Zielgruppe auf Verständlichkeit prüfen und hole Feedback ein, um die Inhalte noch besser zu machen. Ich schicke meine Texte gerne an Freunde und Familienmitglieder, die sich nicht mit dem Thema auskennen.

Schritt 4: Bedienbarkeit optimieren

  • Tastaturzugänglichkeit: Alle Funktionen der Website müssen über eine Tastatur bedienbar sein, ohne dass zeitabhängige Auslöser benötigt werden.
  • Navigationshilfen: Die Navigation auf der Website muss verständlich und übersichtlich gestaltet sein, z. B. durch konsistente Navigationselemente und klare Struktur.
  • Breadcrumbs oder Inhaltsverzeichnisse: Können für eine bessere Orientierung sorgen.
  • Genügend Zeit: Nutzer müssen genügend Zeit haben, um Inhalte zu lesen und zu verwenden. Automatisch ablaufende Inhalte sollten pausiert oder gestoppt werden können.
Nutzerfreundlichkeit sollte immer höher als das Design priorisiert werden.

Schritt 5: Formulare und interaktive Elemente anpassen

  • Beschriftungen und Anweisungen: Alle Formularelemente sollten klar beschriftet und mit verständlichen Anweisungen, sowie Hilfestellungen versehen sein.
  • Vorhersehbare Bedienung: Websites müssen so gestaltet sein, dass ihre Bedienung vorhersehbar ist, z. B. sollten Navigationselemente immer an der gleichen Stelle bleiben.
  • Fehlermeldungen: Gebe klare und hilfreiche Fehlermeldungen aus, wenn Nutzereingaben nicht korrekt sind.
  • Tab-Reihenfolge: Achte darauf, dass die Tab-Reihenfolge logisch und intuitiv ist.
  • Eingabehilfen und alternative Eingabemethoden: Unterstütze verschiedene Eingabemethoden wie Spracheingabe, Touchscreens und alternative Tastaturen.

Schritt 6: Multimediale Inhalte optimieren

  • Audiodeskriptionen: Biete für Videos Audiodeskriptionen an, die visuelle Informationen verbalisieren.
  • Stopp- und Pausentasten: Multimediale Inhalte sollten immer Stopp- und Pausentasten enthalten.
  • Anpassbare Benachrichtigungen: Biete sowohl visuelle als auch auditive Benachrichtigungen an, damit Nutzer unabhängig von ihrer bevorzugten Wahrnehmungsmethode informiert werden.

Schritt 7: Mobile Barrierefreiheit testen

  • Responsive Design: Deine Website sollte auf allen Geräten und Bildschirmgrößen zuverlässig funktionieren.
  • Touch-Bedienung: Achte darauf, dass alle interaktiven Elemente auch mit Touch-Gesten bedienbar sind.

Schritt 8: Robustheit der Inhalte prüfen

  • Kompatibilität mit verschiedenen Technologien: Inhalte müssen so robust gestaltet sein, dass sie zuverlässig von einer Vielzahl an Benutzeragenten, einschließlich assistiver Technologien, interpretiert werden können.
  • Vermeidung von Fehlern: Websites sollten so gestaltet sein, dass Benutzer möglichst keine Fehler machen, und wenn Fehler auftreten, müssen diese leicht korrigiert werden können.

Sind diese Maßnahmen neu für Websitebetreiber?

Nein, solche Maßnahmen sollten Webseitenbetreibern nicht neu sein. Die Web Content Accessibility Guidelines (WCAG) sind internationale Richtlinien, die von der Web Accessibility Initiative (WAI) des World Wide Web Consortiums (W3C) bereits 1999 veröffentlicht wurden, um die Barrierefreiheit von Webinhalten zu verbessern. Diese Richtlinien sind von zentraler Bedeutung für das Barrierefreiheitsstärkungsgesetz (BFSG) und die Barrierefreie-Informationstechnik-Verordnung (BITV 2.0) in Deutschland, da sie die Basis für die technischen Anforderungen an barrierefreie digitale Inhalte bilden.

Das BFSG erweitert die Anforderungen an Barrierefreiheit, die bisher hauptsächlich durch die BITV 2.0 in Deutschland geregelt wurden. Während die BITV 2.0 sich primär auf öffentliche Stellen konzentriert, dehnt das BFSG diese Verpflichtungen auch auf private Unternehmen aus, die digitale Produkte und Dienstleistungen anbieten. Grundsätzlich sind viele der Maßnahmen also nicht neu – sondern nur neu verpflichtend für eine breitere Masse an Websites.

All diese Maßnahmen und Richtlinien dienen nicht nur zur Barrierefreiheit, sondern auch zur Nutzerfreundlichkeit. Denn kein Mensch ist perfekt – jeder bringt irgendeine Einschränkung mit sich. Das muss nicht immer eine körperliche Behinderung sein. Auch schon der Lärm am Bahnhof kann eine Barriere darstellen, wenn das Video nur Ton und keine Untertitel hat.

Es gibt nicht DIE barrierefreie Website. Barrierearm wäre ein besserer Begriff.
Lisa

Lisa Augustin, Autorin, Bloggerin, Softwareentwicklerin und SEO Expertin.

Lisa Augustin

Software-Entwicklerin, SEO-Expertin, Bloggerin, Genussbikerin

Lisa Augustin (geb. Lisa Rudolf) hatte schon immer eine Vorliebe für Algorithmen und technische Probleme. Nach ihrem Informatikstudium hat sie über 5 Jahre lang Berufserfahrung als Softwareentwicklerin gesammelt, während sie nebenher einen Blog über gesunde Ernährung und Radsport geschrieben hat. In dieser Zeit hat sich auch eine Leidenschaft für Suchmaschinenoptimierung (SEO) entwickelt. Und dieser Leidenschaft geht Lisa jetzt hauptberuflich nach. Ihre Mission ist es, SEO verständlich zu erklären und andere Selbstständige, Blogger und kleine Unternehmen dabei zu unterstützen.

Ähnliche Beiträge

Schreibe einen Kommentar

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert