Wie man eine barrierefreie Website erstellt (+ Checkliste)

Barrierefreie Webseiten: Der Countdown läuft! 

Bis spätestens 28. Juni 2025 müssen in der EU alle Webseiten barrierefrei sein. Das soll sicherstellen, dass sie für alle Nutzer zugänglich sind - auch wenn sie Einschränkungen und Behinderungen haben. 

Mit den praktischen Tipps und Tools in diesem Artikel kannst du deine Website rechtzeitig an die EU-Standards anpassen und eine inklusive digitale Umgebung schaffen.

Am Ende des Artikels gibt es eine Checkliste, die du herunterladen kannst. Darin sind alle wichtigen Punkte enthalten, die deine Website erfüllen muss. 

Wusstest du das?

Was sagen uns diese Zahlen?

Sie verdeutlichen die Dringlichkeit, barrierefreie Websites zu gestalten, um eine breite Nutzergruppe zu erreichen und niemanden auszuschließen.

Das sagte Tim Berners-Lee, Erfinder des WWW, und brachte es auf den Punkt: Das Internet sollte für alle zugänglich sein. Egal, welche Einschränkungen jemand hat.

Diese Aussage trifft mitten ins ithelps-Herz. Und das hat einen guten Grund.

Warum uns bei ithelps digitale Barrierefreiheit so wichtig ist

Einer unserer Unternehmenswerte ist Akzeptanz.

Deshalb ist Barrierefreiheit für uns ein besonderes Anliegen. Und deshalb gibt es bei uns ...

2 interne Barrierefreiheitsexperten für Websites

Joachim (Webentwicklung) und Joe (SEO) - studieren das Thema bereits seit Langem aus diversen Blickwinkeln.

In internen Schulungen geben sie ihr Wissen über barrierefreie Websites an das gesamte ithelps-Team weiter. So wollen wir erreichen, dass wir mit unseren Web-Angeboten Menschen mit Behinderung noch mehr ansprechen und einbeziehen als bisher.

Joachim hat ein Webinar über barrierefreie Websites erstellt, das wir euch nicht vorenthalten wollen. Darin gibt er wertvolle Einblicke und Anleitungen, die für jeden, der eine barrierefreie Website gestalten möchte, unerlässlich sind.

Video: Hohe Strafen ab 2025: Experte erklärt WCAG 2.1 (Mit Anleitung ✅)

Im weiteren Verlauf unseres Leitfadens beleuchten wir die Informationen und Erkenntnissen aus Joachims Webinar.

Wir behandeln:

• die Grundlagen und wichtigsten Prinzipien der Barrierefreiheit
• konkrete Maßnahmen und Beispiele
• nützliche Tools und Ressourcen

Beginnen wir mit den Grundlagen.

Was bedeutet Barrierefreiheit im Kontext von Websites?

Barrierefreiheit bedeutet, dass Menschen mit Behinderungen im Internet navigieren und interagieren können wie alle anderen auch. Eine Webseite ist barrierefrei, wenn alle Zugang zu deren Inhalten und Funktionen haben. Niemand darf aufgrund einer Behinderung benachteiligt werden.

Wer ist betroffen?

Barrierefreiheit im Web betrifft Menschen mit unterschiedlichen Bedürfnissen. Hier sind die Hauptzielgruppen:

• Menschen mit Sehbehinderung und Blindheit
• Menschen mit Hörbehinderung und Gehörlosigkeit
• Menschen mit Körperbehinderungen
• Menschen mit kognitiven und Lernbehinderungen
• Menschen mit psychischen Beeinträchtigungen
• Menschen mit temporären Behinderungen
• Ältere Menschen
• Menschen mit Migrationshintergrund

Aber warte.

Nicht nur die genannten Zielgruppen profitieren von digitaler Barrierefreiheit, sondern auch du als Webseitenbetreiber.

OK, ich weiß, was du jetzt denkst:

Warum ist Barrierefreiheit auch für Webseitenbetreiber wichtig?

Hier sind die Gründe:

• Mehr Benutzer: Neue Nutzergruppen, die sonst ausgeschlossen wären.
• Höherer Qualität: Eine barrierefreie Website ist besser strukturiert und nutzerfreundlicher.
• Bessere Platzierung in Suchmaschinen: Suchmaschinen mögen Websites, die leicht zu verstehen und einfach zu benutzen sind.
• Rechtssicherheit: Wer sich an die Gesetze hält, muss keine rechtlichen Konsequenzen befürchten.
• Gutes Gewissen: Wer alle Menschen einbezieht und gleich behandelt, schläft nachts besser.

Und hier sind noch 3 Gründe, die die Europäische Kommission angibt:

• Einsparungen durch gemeinsame Vorschriften für die Barrierefreiheit in allen EU-Ländern
• vereinfachter grenzübergreifender Handel
• mehr Marktchancen für barrierefreie Produkte und Dienstleistungen

Überzeugt?

Dann besprechen wir die gesetzlichen Grundlagen für barrierefreie Websites und die anstehenden Fristen im Detail.

Gesetzliche Grundlagen - EU-Richtlinien

European Accessibility Act (EAA)

Der European Accessibility Act (EAA) ist ein Gesetz der Europäischen Union. Es soll sicherstellen, dass bestimmte Produkte und Dienstleistungen für Menschen mit Behinderungen zugänglich sind. Alle EU-Mitgliedstaaten müssen diese neuen Standards bis spätestens 28. Juni 2025 umsetzen.

Web Accessibility Directive 2016/2102

Die Web Accessibility Directive 2016/2102 ist die Grundlage für die Barrierefreiheit von Websites in der EU. Diese Richtlinie schreibt vor, dass Websites und mobile Anwendungen öffentlicher Stellen für behinderte Menschen zugänglich sein müssen.

EN 301 549

Die Norm EN 301 549 legt die technischen Anforderungen für die Barrierefreiheit fest. Sie beschreibt, wie Produkte und Dienstleistungen gestaltet sein müssen und dient als Leitfaden für die Umsetzung.

Zusammengefasst:

• EAA: Gesetz, das Barrierefreiheit für bestimmte Produkte und Dienstleistungen in der EU vorschreibt.
• Web Accessibility Directive 2016/2102: Richtlinie, die Barrierefreiheit für Websites und mobile Anwendungen öffentlicher Stellen verlangt.
• EN 301 549: Technische Norm, die die Anforderungen für die Barrierefreiheit festlegt.

Die WCAG (Web Content Accessibility Guidelines)

Die WCAG bieten Webseitenbetreibern klare und umsetzbare Richtlinien zur Gestaltung barrierefreier Webinhalte. Herausgegeben vom World Wide Web Consortium (W3C) bilden sie den internationalen Standard für barrierefreies Webdesign.

Die 4 Prinzipien der Barrierefreiheit nach WCAG

Diese vier Prinzipien sind die Grundlage der WCAG und bilden den Rahmen für die Erstellung barrierefreier Websites. Zusätzlich gibt es noch drei Konformitätsstufen. Sie zeigen auf, wie sehr eine Website barrierefrei ist.

Konformitätsstufen der WCAG

Die Web Content Accessibility Guidelines sind in drei Konformitätsstufen unterteilt: A, AA und AAA. AA ist die Mindestanforderung für viele gesetzliche Vorgaben.

Weitere Informationen zu den WCAG findest du auf der offiziellen Website der Web Accessibility Initiative (WAI).

Erste Schritte zur Barrierefreiheit in der DACH-Region

Deutschland: Barrierefreiheitsstärkungsgesetz (BFSG):

Das Barrierefreiheitsstärkungsgesetz (BFSG) wurde am 15.06.2022 verabschiedet und wird ab dem 28. Juni 2025 wirksam. Es zielt darauf ab, die Anforderungen der Europäischen Barrierefreiheitsakte (EAA) umzusetzen und betrifft Dienste wie Telefonie, Messenger sowie private Web-Angebote und kleine Unternehmen, die bestimmte Kriterien erfüllen. Das Gesetz geht in einigen Aspekten über die EU-Richtlinien hinaus, um Inklusion weiter zu fördern.

Für private Unternehmen und Organisationen gilt: Ab dem 28. Juni 2025 dürfen neue digitale Produkte und Dienstleistungen nur dann angeboten werden, wenn sie von Anfang an barrierefrei sind. Für bereits vorhandene digitale Angebote gilt eine Übergangsfrist, die am 27. Juli 2030 endet. Diese Regelungen betreffen vor allem digitale Dienste im elektronischen Geschäftsverkehr, wie beispielsweise Online-Shops, Webseiten und mobile Apps.

Die Barrierefreie-Informationstechnik-Verordnung (BITV 2.0) ist die deutsche Umsetzung der EN 301 549 und schreibt vor, dass ein Online-Auftritt bestimmte Kriterien für Barrierefreiheit erfüllen muss, einschließlich spezieller Anforderungen für Deutsch in Gebärdensprache und leichter Sprache. Zur Barrierefreie-Informationstechnik-Verordnung

Ausnahmen und Übergangsregelungen

• Übergangsfrist von 15 Jahren (bis 2040) für Selbstbedienungsterminals.
• Kleinstunternehmen mit weniger als 10 Beschäftigten und einem Jahresumsatz von unter 2 Millionen Euro sind von den Barrierefreiheitsvorgaben ausgenommen.
• Öffentlich-rechtliche Rundfunkanstalten sowie bestimmte Inhalte wie aufgezeichnete zeitbasierte Medien, die vor dem 23. September 2020 veröffentlicht wurden, sind ebenfalls ausgenommen.
• Falls die Umsetzung eine unverhältnismäßige Belastung darstellt, können Ausnahmen gemacht werden.

Barrierefreie Web-Angebote in Österreich

In Österreich wurden die EU-Vorgaben durch das Web-Zugänglichkeits-Gesetz (WZG) und das Barrierefreiheitsgesetz (BaFG) umgesetzt.

Das WZG, das auf der EU-Richtlinie 2016/2102 basiert, fordert, dass Websites und Apps öffentlicher Stellen barrierefrei sein müssen.

Das BaFG wurde im Juli 2023 beschlossen und gilt für alle Unternehmen, die Güter oder Dienstleistungen anbieten, die der Öffentlichkeit zur Verfügung stehen. Es wird am 28. Juni 2025 in Kraft treten. Verstöße gegen die Barrierefreiheitsvorgaben können mit Strafen von bis zu 80.000 Euro belegt werden.

Ausnahmen von den Barrierefreiheitsvorgaben:

• Kleinstunternehmen mit weniger als 10 Beschäftigten und einem Jahresumsatz von unter 2 Millionen Euro.
• Öffentlich-rechtliche Rundfunkanstalten sind von den Vorgaben ausgenommen.
• Bestimmte Inhalte wie aufgezeichnete zeitbasierte Medien, die vor dem 23. September 2020 veröffentlicht wurden, sowie bestimmte Dateiformate und live übertragene zeitbasierte Medien.
• Falls die Umsetzung eine unverhältnismäßige Belastung darstellt, können Ausnahmen gemacht werden.

Übergangsfristen (§ 37 BaFG)

Vor dem 28. Juni 2025 vereinbarte Dienstleistungsverträge bis zu ihrem Ablauf, allerdings nicht länger als fünf Jahre ab diesem Datum, dürfen unverändert fortbestehen (§ 37 Abs. 2 BaFG). Bis dahin müssen die Vertragsparteien ihre bestehenden Verträge entweder durch Änderungen an die Barrierefreiheitsanforderungen des BaFG anpassen oder sie beenden.

Diese Übergangsfrist gilt auch für digitale Inhalte wie Websites und Webshops.

Schweiz: Behindertengleichstellungsgesetz (BehiG)

Da die Schweiz nicht zur Europäischen Union gehört, gelten deren Vorgaben nicht. Dennoch hat sich die Schweiz zur Barrierefreiheit bekannt.

Das Behindertengleichstellungsgesetz (BehiG), auch bekannt als Disability Discrimination Act (DDA), regelt auch die Barrierefreiheit digitaler Inhalte. Das Gesetz trat am 1. Januar 2004 in Kraft und wurde mehrfach angepasst.

Es verpflichtet sowohl öffentliche als auch private Organisationen, Diskriminierung aufgrund von Behinderungen zu verhindern. Für digitale Inhalte müssen öffentliche Stellen die WCAG 2.1 Konformitätsstufe AA einhalten. Bei Nicht-Einhaltung können Betroffene eine Entschädigung von bis zu 5.000 Schweizer Franken verlangen.

So. Jetzt haben wir hoffentlich ein Bewusstsein für die Grundlagen geschaffen.

Doch wie setzen wir das konkret um?

Dafür haben wir dir einige praktische Tipps zusammengestellt.

Praktische Tipps zur Umsetzung der Barrierefreiheit für Websites

Um deine Website barrierefrei zu machen und die gesetzlichen Anforderungen zu erfüllen, folge diesen Schritten:

1. Wähle eine Konformitätsstufe

Nicht jede Website muss AAA-konform sein. Wähle die passende Stufe anhand der gesetzlichen Anforderungen und deiner Ziele.

• Stufe A: Grundlegende Barrierefreiheit.
• Stufe AA: Erweiterte Anforderungen an die Barrierefreiheit (empfohlen für die meisten Websites).
• Stufe AAA: Höchste Zugänglichkeitsstandards (nicht immer praktikabel).

2. Wähle repräsentative Seiten aus

Überlege dir, welche Webseiten und Funktionen du in die anfängliche Analyse einbeziehst. Die Auswahl sollte Seiten mit diversen Inhalten und Designs umfassen.

• Schlüsselseiten: Seiten, die häufig besucht werden und für die Besucher eine zentrale Rolle spielen.
• Schlüsselfunktionen: Wichtige Funktionen wie Navigation, Formulare und Interaktionen.
• Inhaltstypen: Texte, Bilder, Videos, Formulare, Tabellen.
• Designs: Unterschiedliche Layouts und Navigationsstrukturen.

3. Überprüfe diese repräsentativen Seiten

Untersuche diese Seiten auf Barrieren. Achte dabei auf die vier Prinzipien der Barrierefreiheit: Wahrnehmbarkeit, Bedienbarkeit, Verständlichkeit und Robustheit. Führe manuelle und automatisierte Tests durch.

• Manuelle Tests: Überprüfe, ob du die Seiten ohne Maus bedienen kannst. Teste die Navigation mit der Tastatur und führe Screenreader-Tests durch.
• Automatisierte Tests: Nutze Tools wie WAVE, axe DevTools oder den Colour Contrast Analyzer, um technische Barrieren zu finden.

4. Erstelle einen Report

Der Report dient als Grundlage für die notwendigen Anpassungen. Er sollte alle Barrieren sowie Empfehlungen zur Behebung enthalten.

• Fehlerprotokoll: Liste alle gefundenen Barrieren auf.
• Empfehlungen: Gib klare Anweisungen zur Behebung der Probleme.
• Prioritäten setzen: Markiere die wichtigsten Änderungen, die sofort umgesetzt werden sollten.

5. Mach deine gesamte Website barrierefrei

Nimm den Report zur Hand und arbeite ihn Schritt für Schritt ab. Beginne mit den wichtigsten Maßnahmen und weite die Anpassungen dann auf die gesamte Website aus.

• Priorität 1: Änderungen, die du als sofort umzusetzen markiert hast.
• Priorität 2: Schlüsselseiten und Schlüsselfunktionen.
• Priorität 3: Alle weiteren Texte, Bilder, Videos, Formulare, Tabellen etc.

Nützliche Tools und Ressourcen

Hier sind einige nützliche Tools und Ressourcen, die dir bei der Überprüfung und Verbesserung helfen:

• WAVE - Web Accessibility Evaluation Tool
• axe DevTools - Web Accessibility Testing
• Colour Contrast Analyzer

Im nächsten Abschnitt zeige ich dir einfache Schnelltests, die du selbst durchführen kannst.

Einfache Schnelltests zur Überprüfung der Barrierefreiheit

Die folgenden Tests identifizieren offensichtliche Barrieren schnell und effizient.

1. Alternativtexte für Bilder prüfen

Bilder müssen einen Alternativtext (Alt-Text) haben, der den Inhalt oder die Funktion des Bildes beschreibt. Dies ist besonders wichtig für Screenreader-Nutzer.

Prüfung: Überprüfe, ob alle Bilder auf deiner Website einen beschreibenden Alternativtext haben. Schmuckbilder sollten ein leeres „alt“-Attribut haben, um Screenreader-Nutzer nicht zu verwirren.

Tool: Verwende das WAVE Web Accessibility Evaluation Tool oder die Entwicklertools deines Browsers, um Alt-Texte zu überprüfen.

2. Tastaturnavigation

Alle Funktionen deiner Website müssen mit der Tastatur bedienbar sein. Dies ist wichtig für Nutzer mit motorischen Einschränkungen.

• Prüfung: Navigiere mit der Tab-Taste durch die Website und prüfe, ob der Fokus überall sichtbar ist. Alle interaktiven Elemente (Links, Buttons, Formulare) müssen erreichbar und bedienbar sein.
• Tool: Keine speziellen Tools erforderlich. Die Tastaturnavigation kann direkt im Browser getestet werden.

3. Richtige Verwendung von HTML-Elementen

Die korrekte Verwendung von HTML-Elementen wie Überschriften, Listen und Tabellen ist entscheidend für die Zugänglichkeit.

• Prüfung: Überprüfe, ob Überschriften hierarchisch korrekt verwendet werden. H1 für Hauptüberschriften, H2 für Unterüberschriften usw. Listen sollten mit den entsprechenden HTML-Elementen (ul, ol) strukturiert sein. Tabellen müssen korrekt aufgebaut sein.
• Tool: Die Entwicklertools deines Browsers sind nützlich, um die HTML-Struktur zu überprüfen.

4. Formulare mit korrekten Beschriftungen

Formulare müssen korrekt beschriftet sein, damit Screenreader-Nutzer die Eingabefelder verstehen und ausfüllen können.

• Prüfung: Überprüfe, ob alle Eingabefelder eine sichtbare und verknüpfte Beschriftung (Label) haben.
• Tool: Verwende Tools wie axe DevTools zur Überprüfung von Formularen.

5. Linktexte

Linktexte sollten aussagekräftig sein und das Ziel des Links beschreiben. Vermeide generische Texte wie „hier“, „weiterlesen“ oder „mehr Infos“.

• Prüfung: Überprüfe alle Linktexte auf der Website und stelle sicher, dass sie das Ziel des Links klar beschreiben.
• Tool: Manuelle Überprüfung oder Tools wie WAVE.

6. Farbkontraste

Die Farbkontraste auf deiner Website müssen ausreichend sein, damit Sehbehinderte deine Inhalte lesen können.

• Prüfung: Verwende Tools wie den Colour Contrast Analyzer oder WAVE, um die Kontrastverhältnisse zu überprüfen.
• Anforderungen: Der Kontrast zwischen Text und Hintergrund sollte mindestens 4,5:1 für normalen Text und 3:1 für großen Text betragen.

7. 200% Zoom

Bei einem 200% Zoom sollten alle Inhalte der Website weiterhin sichtbar und bedienbar sein.

• Prüfung: Vergrößere die Ansicht deiner Website im Browser auf 200%. Prüfe, ob alle Inhalte noch korrekt angezeigt werden und keine Elemente verdeckt sind.
• Tool: Keine speziellen Tools erforderlich, die Zoom-Funktion des Browsers kann verwendet werden.

Zusätzliche Tipps für barrierefreie Websites

1. Sensibilisierung und Schulung:

Sorge dafür, dass alle Beteiligten im Unternehmen über die Bedeutung der Barrierefreiheit informiert sind und regelmäßige Schulungen erhalten. Dies fördert ein gemeinsames Verständnis und Engagement für inklusive Webdesign-Praktiken.

2. Nutzerfeedback einholen:

Hole regelmäßig Feedback von Nutzern, insbesondere von Personen mit Behinderungen. Dies hilft, reale Barrieren zu identifizieren und praxisnahe Lösungen zu entwickeln.

3. Barrierefreiheit in den Entwicklungsprozess integrieren:

Berücksichtige Barrierefreiheit von Anfang an im Design- und Entwicklungsprozess. Dies spart Zeit und Kosten im Vergleich zu nachträglichen Anpassungen.

4. Kontinuierliche Überprüfung und Verbesserung:

Barrierefreiheit ist ein fortlaufender Prozess. Überprüfe regelmäßig deine Website und halte dich über aktuelle Standards und Best Practices auf dem Laufenden.

Checkliste zum Überprüfen der Barrierefreiheit von Websites

Wir wären nicht ithelps, wenn wir dir zu den Tipps und zum Schnelltest nicht auch noch eine praktische Checkliste für barrierefreie Websites geben würden. 

Lade die Checkliste herunter, druck sie aus und überprüfe Punkt für Punkt, ob du eine barrierefreie Website hast.

Checkliste herunterladen

Barrierefreiheit in Joomla

Das folgende Video von Viviana Menzel behandelt die Barrierefreiheit in Joomla und wie dieses Content-Management-System (CMS) dabei hilft, barrierefreie Websites zu erstellen. Es wird erklärt, welche Funktionen und Tools Joomla bietet, um sicherzustellen, dass Websites für alle Benutzer zugänglich sind, einschließlich Menschen mit Behinderungen. Viviana Menzel zeigt praktische Beispiele und gibt Tipps zur Umsetzung in Joomla.

Fazit

Barrierefreiheit im Web ist entscheidend, um sicherzustellen, dass alle Menschen uneingeschränkten Zugang zu Informationen und Dienstleistungen haben. Die Umsetzung barrierefreier Websites bringt zahlreiche Vorteile, darunter eine größere Reichweite, verbesserte Benutzerfreundlichkeit und die Einhaltung gesetzlicher Anforderungen.

Mit den praktischen Tipps und Tools in diesem Artikel kannst du deine Website rechtzeitig an die EU-Standards anpassen und eine inklusive digitale Umgebung schaffen.

Nutze die verbleibende Zeit bis 2025, um die Barrierefreiheit deiner Website zu überprüfen und anzupassen. Beginne mit den einfachen Schnelltests und setze dann gezielte Maßnahmen um, um alle gesetzlichen Anforderungen zu erfüllen.