Checkliste: 10 Schritte zur barrierefreien Website

Einleitung

Die digitale Barrierefreiheit ist in den letzten Jahren immer stärker in den Fokus gerückt. Zum einen gibt es gesetzliche Vorgaben, die Unternehmen und öffentliche Stellen in die Pflicht nehmen. Zum anderen wächst das Bewusstsein, dass eine barrierefreie Website nicht nur Menschen mit Behinderungen zugutekommt, sondern allen Nutzern bessere Zugänglichkeit und Bedienbarkeit bietet. Wer sich heute mit digitaler Barrierefreiheit beschäftigt, stellt schnell fest, dass es sich um ein weites Feld mit zahlreichen technischen, gestalterischen und rechtlichen Aspekten handelt.

In der Europäischen Union und speziell in Deutschland haben sich mehrere Richtlinien und Gesetze etabliert, die den Rahmen für barrierefreie digitale Angebote setzen. Besonders das Barrierefreiheitsstärkungsgesetz (BFSG), das ab Juni 2025 unter anderem für viele privatwirtschaftliche Unternehmen verpflichtend wird, hat dieses Thema nochmals in den Vordergrund gerückt. Unternehmen, die Online-Shops, Buchungssysteme oder andere interaktive Dienste anbieten, stehen somit vor der Herausforderung, ihre digitalen Produkte nach den jeweiligen Standards auszurichten. Auch für öffentliche Einrichtungen gilt bereits seit längerem die BITV (Barrierefreie-Informationstechnik-Verordnung), die ihrerseits auf den WCAG (Web Content Accessibility Guidelines) basiert.

Was bedeutet dies konkret für dich und dein Unternehmen? Barrierefreiheit umfasst verschiedenste Bereiche: von der richtigen Auszeichnung von Überschriften (damit Screenreader effektiv navigieren können) über Alternativtexte für Bilder, Untertitel für Videos und klare Farbkontraste bis hin zur Tastaturbedienbarkeit sämtlicher interaktiver Elemente. Hinzu kommen Rechtsfragen, organisatorische Fragen (Wer trägt die Verantwortung?), menschliche Faktoren (Wie schule ich meine Mitarbeitenden?) und technische Fragen (Welche Tools nutze ich? Wie setze ich Testing und Monitoring auf?).

Damit du in diesem komplexen Feld nicht den Überblick verlierst, bietet dir der folgende Leitfaden eine 10-Schritte-Checkliste, die dem IFDB – Institut für digitale Barrierefreiheit auch in seiner Beratungspraxis anwendet. Jeder Schritt enthält praktische Erläuterungen, Beispiele, Checklisten und Tool-Tipps. Natürlich kannst du den Leitfaden an deine Bedürfnisse anpassen und die Reihenfolge der Maßnahmen verändern, falls dein Projekt dies erfordert. Die Grundidee ist jedoch, dass diese 10 Schritte eine logische Abfolge darstellen – vom ersten Bestands- und Statuscheck bis zur Kontinuität und Sicherung barrierefreier Standards in deinem Unternehmen.

Egal, ob du Agentur, Unternehmen oder öffentliche Einrichtung bist, eines ist sicher: Mit digitaler Barrierefreiheit verbesserst du nicht nur den Zugang für Menschen mit Behinderungen, sondern optimierst deine Website für alle Nutzer. Du machst sie benutzerfreundlicher, steigst im Ranking der Suchmaschinen (denn eine barrierefreie Seite erfüllt viele SEO-Kriterien) und baust Vertrauen sowie ein positives Markenimage auf. Auf lange Sicht lohnt sich Barrierefreiheit also in mehrfacher Hinsicht – rechtlich, wirtschaftlich und menschlich.

Die nachfolgenden Schritte sollen dir helfen, die ersten Hürden zu nehmen, die eine Website barrierefrei machen, und dir zugleich zeigen, wie du systematisch Fortschritte messen und langfristig sichern kannst. Dabei darfst du stets bedenken: Dem IFDB – Institut für digitale Barrierefreiheit kann dich auf diesem Weg begleiten, indem es Audits, Schulungen, Zertifizierungen und strategische Beratungen anbietet.

Lass uns jetzt einsteigen in die „Checkliste: 10 Schritte zur barrierefreien Website“, damit du mit klaren Anleitungen und konkreten To-dos direkt in die Umsetzung gehen kannst.

Schritt 1: Ausgangslage prüfen – Wo stehen wir aktuell?

1.1 Alle digitalen Angebote erfassen

Der erste Schritt auf dem Weg zur barrierefreien Website ist eine Bestandsaufnahme. Ohne zu wissen, was du eigentlich alles an digitalen Angeboten besitzt, kannst du weder Prioritäten setzen noch gezielt planen. Häufig unterschätzen Unternehmen, wie viele Unterseiten, Landingpages, Formulare, PDF-Dokumente, Downloads und interaktive Anwendungen sie tatsächlich haben.

• Umfassende Auflistung: Nimm dir Zeit, dein gesamtes digitales Ökosystem zu sichten. Dazu gehören Haupt- und Unterseiten, aber auch Subdomains, Microsites, Apps, Dokumente (wie Formulare, Broschüren, Whitepaper).

• Team-Workshop: Es empfiehlt sich, in einem Kick-off-Meeting gemeinsam mit den verantwortlichen Abteilungen (IT, Redaktion, Marketing, ggf. Rechtsabteilung) eine Liste zu erstellen. Gehe Bereich für Bereich durch, um nichts zu übersehen.

• Interne Systeme: Vergiss nicht, dass auch interne Webanwendungen – sofern sie von Mitarbeitenden mit Behinderungen genutzt werden – barrierefrei gestaltet sein sollten. Das Thema kann also auch deine Intranet- und HR-Systeme betreffen.

1.2 Erste technische Checks (automatisiert)

Sobald du eine grobe Liste deiner digitalen Angebote hast, empfiehlt sich ein erster automatisierter Check. Dieser ersetzt zwar nicht die manuelle Detailprüfung, gibt dir aber einen guten Überblick über offensichtliche Mängel.

• WAVE (Web Accessibility Evaluation Tool): Ein Online-Dienst, der dir direkt im Browser anzeigt, wo Alt-Texte fehlen, Überschriftenstrukturen fehlerhaft sind oder Kontrastmängel bestehen.

• axe DevTools: Ein Plugin für Chrome und Firefox, speziell für Entwickler, das den Quellcode prüft und anschauliche Fehlerlisten generiert.

• Google Lighthouse: Über die Chrome DevTools abrufbar, prüft u. a. Performance, SEO und Barrierefreiheit und gibt dir eine Punktzahl, an der du dich orientieren kannst.

1.3 Rechtliche Situation klären (BFSG, BITV, WCAG)

• BFSG: Das Barrierefreiheitsstärkungsgesetz betrifft ab 2025 sehr viele privatwirtschaftliche Unternehmen – insbesondere, wenn sie E-Commerce, Buchungen oder elektronische Kundendienste anbieten.

• BITV: Gilt in Deutschland bereits seit längerem für öffentliche Stellen, die ihre digitalen Angebote nach der WCAG 2.1 (Stufe AA) ausrichten müssen.

• WCAG: Die „Web Content Accessibility Guidelines“ stellen die internationalen Leitlinien dar, die auch in EU-Richtlinien und nationalen Gesetzen verankert sind. Sie definieren u. a., wie Seiteninhalte wahrnehmbar, bedienbar, verständlich und robust sein sollen.

1.4 Interne vs. externe Prüfung

• Interne Prüfung: Kann z. B. für kleinere Websites oder erste Analysen ausreichend sein. Du brauchst allerdings intern geschultes Personal oder zumindest engagierte Mitarbeitende, die sich gründlich ins Thema einarbeiten.

• Externer Audit: Besonders sinnvoll bei großen, komplexen Systemen oder wenn du eine verbindliche Aussage zu deinem Barrierefreiheitsstatus benötigst (z. B. um rechtliche Risiken zu minimieren). Dem IFDB – Institut für digitale Barrierefreiheit bietet dabei strukturierte Verfahren an, die eine manuelle und technische Prüfung kombinieren.

1.5 Dokumentation und Priorisierung

Zum Abschluss dieses Schritts solltest du alle Ergebnisse gut dokumentieren. Lege fest, welche Seiten oder Bereiche besonders dringend sind (z. B. der Online-Shop mit sensiblen Prozessen) und wo du evtl. mehr Zeit für eine umfassende Optimierung hast (z. B. ein Blogarchiv mit älteren Artikeln).

Checkliste Schritt 1

• Digitale Angebote (Websites, Apps, PDFs etc.) lückenlos erfasst?

• Erste automatisierte Tools genutzt und Fehler protokolliert?

• Gesetzliche Rahmenbedingungen geklärt (BFSG, BITV, WCAG)?

• Entscheidung getroffen: interne Prüfung vs. externer Audit?

• Dokumentation erstellt und Maßnahmen priorisiert?

Schritt 2: Klare Ziele festlegen und Meilensteine definieren

2.1 Was bedeutet „barrierefrei“ für dein Unternehmen?

„Barrierefreiheit“ ist ein weiter Begriff. Je nach Branche und Ausrichtung können die Kernanforderungen variieren. Während öffentliche Stellen häufig vorrangig die WCAG Stufe AA anpeilen, orientieren sich private Unternehmen oft daran, was gesetzlich notwendig ist und was strategisch sinnvoll ist.

• Leitfragen: Welche Nutzergruppen hast du im Fokus? B2C, B2B, interne Mitarbeitende mit Behinderung, externe Dienstleister? Werden bestimmte Assistenztechnologien (Screenreader, Braillezeilen) besonders häufig genutzt?

• Business-Kontext: Welche Teile deiner Website sind geschäftskritisch? (z. B. Buchungsstrecken, Checkout-Prozess, Kontaktformulare) – genau dort solltest du als erstes auf Barrierefreiheit achten.

2.2 SMARTE Zieldefinition

Um ein Projekt wirklich zu steuern, ist es sinnvoll, Ziele messbar zu formulieren. Ein Beispiel:

• Spezifisch: „Wir möchten alle Produktseiten im Online-Shop mit korrekten Alt-Texten und ausreichendem Farbkontrast ausstatten.“

• Messbar: „Dies soll anhand der WCAG-Richtlinien AA sowie automatisierten Tools (z. B. Lighthouse Score von mind. 95) überprüft werden.“

• Attraktiv: „Verbesserte Barrierefreiheit soll den Umsatz steigern und die Reklamationen senken, indem wir mehr Kunden ansprechen.“

• Realistisch: „Innerhalb von vier Monaten werden wir…“

• Terminiert: „… bis zum 30. Juni 2024 mindestens 80 % aller Produktseiten umgestellt haben.“

2.3 Einbinden der Stakeholder

Barrierefreiheit ist kein Thema, das allein im stillen Kämmerlein gelöst werden kann. Du solltest alle relevanten Abteilungen und Stakeholder einbinden:

• Management/Entscheider: Um Ressourcen und Budget sicherzustellen.

• Marketing/Redaktion: Verantwortlich für die Pflege von Texten, Bildern, Videos.

• IT/Frontend: Setzen die technischen Anpassungen um.

• Rechtsabteilung: Wacht darüber, ob gesetzliche Vorgaben eingehalten werden.

2.4 Meilensteine und Projektplan

Du hast nun Ziele definiert und weißt, welche Abteilungen einbezogen werden. Der nächste Schritt ist, Meilensteine zu formulieren – etwa:

1. Analyse-Phase (2–4 Wochen): Manuelle und automatisierte Tests, Workshops.

2. Konzept-Phase (1–2 Monate): Technische und redaktionelle Konzepte erarbeiten, Tools auswählen, Testkonzepte definieren.

3. Umsetzungs-Phase (2–6 Monate): Änderungen schrittweise ausrollen (z. B. Start mit den wichtigsten Seiten).

4. Abschluss-Audit (1–2 Wochen): Erneuter Test, Dokumentation, ggf. Zertifizierung.

2.5 Zeit- und Budgetplanung

Barrierefreiheit kostet Zeit und Geld. Gerade in umfangreichen Webprojekten können die Aufwände spürbar sein. Allerdings rentiert sich die Investition – langfristig vermeidet man rechtliche Risiken, gewinnt neue Nutzer, verbessert die SEO und stärkt das Markenimage. Wer es geschickt anstellt, integriert Barrierefreiheit in laufende Website-Relaunches oder Entwicklungsprojekte, um Doppelarbeit zu vermeiden.

Checkliste Schritt 2

• Ziele definiert (z. B. WCAG-Stufe, Lighthouse-Score)?

• Projektplan mit Meilensteinen erstellt?

• Stakeholder identifiziert und eingebunden?

• Budget und zeitliche Ressourcen kalkuliert?

• Business-Kontext klar: Welche Seiten und Funktionen sind geschäftskritisch?

Schritt 3: Verantwortlichkeiten klären und Team aufstellen

3.1 Rolle des Accessibility-Managers

Barrierefreiheit betrifft viele Fachbereiche. Doch wer hat das „letzte Wort“? In großen Organisationen hat sich der Accessibility-Manager (oder Beauftragte für digitale Barrierefreiheit) bewährt. Diese Person koordiniert:

• Aufgabenverteilung: Wer kümmert sich um Inhalte, wer um Technik, wer um Qualitätssicherung?

• Schulungen: Stelle sicher, dass alle Beteiligten wissen, wie barrierefrei zu arbeiten ist.

• Monitoring: Halte den Überblick über KPIs und Fortschritte.

3.2 Einbeziehen der Fachabteilungen

Je nach Unternehmensgröße sind unterschiedliche Fachabteilungen relevant:

• IT/Dev: Übernimmt den Code (HTML-Struktur, Kontrast-Design, WAI-ARIA, Tastaturnavigation).

• UX/Design: Plant die Nutzerführung, Farben, Kontraste, Layout.

• Redaktion: Achtet auf klare Sprache, Alternativtexte und sinnvolle Überschriften.

• Marketing: Übernimmt externe Kommunikation, stellt Whitepaper oder Broschüren barrierefrei bereit.

• Projektmanagement: Koordiniert Fristen, Budget, Kommunikation.

• Recht: Prüft Verträge, haftungsrelevante Fragen.

3.3 Schulungsbedarf und Sensibilisierung

Viele Mitarbeitende haben noch nie barrierefrei gearbeitet. Oft fehlt Basiswissen, etwa, wie ein Screenreader funktioniert oder warum Kontraste so wichtig sind. Deshalb solltest du frühzeitig Schulungen anbieten – entweder intern oder durch externe Partner wie dem IFDB:

• Workshops für Entwickler: WCAG-Basics, ARIA-Kennzeichnungen, Umgang mit Tools wie WAVE.

• Schulungen für Redakteure: Einfache Sprache, richtige Verwendung von Überschriften, Alternativtexte.

• Design-Guidelines: Definiere, welche Farben, Schriftgrößen, Kontraste verwendet werden dürfen.

3.4 Interne Kommunikation

Damit das Thema Barrierefreiheit nicht in Vergessenheit gerät, lohnt sich eine kontinuierliche Kommunikation:

• Regelmäßige Updates: z. B. über das Intranet, Newsletter, Team-Meetings.

• Erfolgsmeldungen: Zeige, wenn sich die Barrierefreiheitswerte verbessern oder das Feedback von Nutzern positiv ausfällt.

• Motivation: Unterstreiche den Nutzen für alle Beteiligten – weniger Support-Anfragen, höhere Reichweite, Imagegewinn.

3.5 Steuerungs- und Kontrollgremien

Große Unternehmen setzen oft auf Lenkungsgruppen oder Steering Committees, die regelmäßig den Fortschritt evaluieren. Hier können Kennzahlen besprochen werden, etwa:

• Anzahl behobener Barrierefreiheitsfehler

• Steigende Lighthouse-Scores

• Feedback von Kunden mit Behinderungen

Checkliste Schritt 3

• Accessibility-Manager (oder vergleichbare Rolle) benannt?

• Zuständigkeiten pro Fachabteilung geklärt?

• Schulungsbedarf ermittelt und erste Maßnahmen geplant?

• Interne Kommunikation (z. B. regelmäßige Meetings, Erfolgsberichte)?

• Evtl. Lenkungs- oder Steuerungsgruppe eingerichtet?

Schritt 4: Inhalte auf Barrierefreiheit prüfen und optimieren

4.1 Textinhalte und Sprache

• Einfache Sprache: Nicht jeder ist muttersprachlich sicher, und viele Nutzer bevorzugen verständliche, prägnante Texte. Lange Schachtelsätze erschweren das Verständnis.

• Überschriften-Hierarchien: H1, H2, H3 etc. müssen logisch geordnet sein. Screenreader-Nutzer navigieren häufig über Überschriften, weshalb eine klare Struktur essentiell ist.

• Listen und Tabellen: Verwende HTML-Listen (ul, ol) und semantische Tabellen. Vermeide stattdessen Layout-Tabellen.

4.2 Bilder, Grafiken und Alternativtexte

• Alt-Text: Jedes Bild sollte einen beschreibenden Alternativtext haben, sofern es wichtige Informationen enthält. „Schmuckbilder“ benötigen ggf. einen leeren Alt-Tag („“), damit Screenreader sie überspringen.

• Infografiken: Wenn die Grafik essenziellen Inhalt transportiert, muss dieser Inhalt im Text oder in einem ausführlichen Alt-Text vermittelt werden.

• Diagramme: Sie können komplex sein; ggf. braucht es eine längere, beschreibende Erläuterung (Longdesc oder eine Bildunterschrift).

4.3 Videos, Audio und Untertitel

• Untertitel: Damit gehörlose oder schwerhörige Nutzer die Videos verfolgen können.

• Transkript: Texte, in denen alle relevanten Informationen eines Videos oder Audios abrufbar sind.

• Audiodeskription: Für blinde Menschen hilfreich, da visuelle Elemente (z. B. eine Szene) beschrieben werden.

4.4 PDF-Dokumente barrierefrei machen

• PDF/UA-Standard: Der ISO-Standard für barrierefreie PDFs. Dokumente sollten getaggt werden, damit Screenreader die Struktur erkennen.

• Werkzeuge: Adobe Acrobat bietet Funktionen zum Tagging, Prüfen und Korrigieren von PDFs.

• Alternativen: Überlege, ob du stattdessen den Inhalt direkt als HTML-Seite anbietest, falls die PDF-Konvertierung zu aufwändig ist.

4.5 Kulturelle und sprachliche Aspekte

• Mehrsprachigkeit: Markiere im Code, welche Sprache der Inhalt hat (z. B. Lang-Attribute), damit Screenreader die richtige Aussprache wählen.

• Kultureller Kontext: Achte auf Symbole, Farben oder Wording, die in bestimmten Kulturen anders verstanden werden könnten.

Checkliste Schritt 4

• Texte in klarer, einfacher Sprache?

• Überschriftenstruktur gemäß WCAG-Empfehlungen (semantisch korrekt)?

• Bilder/Grafiken mit sinnvollen Alternativtexten versehen?

• Videos mit Untertiteln und ggf. Audiodeskription?

• PDFs nach PDF/UA-Standard oder Alternative als HTML-Seite?

Schritt 5: Technische Umsetzung – Alt-Texte, Farben und Kontraste

5.1 Bedeutung von ARIA und semantischem HTML

WAI-ARIA (Accessible Rich Internet Applications) ergänzt HTML um Attribute, die Screenreadern zusätzliche Informationen liefern. So kann etwa eine Navigation als „role=„navigation““ gekennzeichnet werden, oder interaktive Elemente erhalten spezielle Rollen.

• Semantisches HTML: Nutze HTML-Tags so, wie sie gedacht sind – etwa <header>, <main>, <section> oder <article> für inhaltliche Struktur.

• ARIA-Attribute: Ergänzen semantische Defizite, etwa aria-label, aria-labelledby, aria-live. Aber Vorsicht: Zu viel ARIA kann auch verwirren, wenn HTML ohnehin semantisch richtig genutzt wird.

5.2 Tastaturbedienbarkeit sicherstellen

Viele Nutzer können keine Maus verwenden und sind auf die Tastatur angewiesen.

• Focus Management: Achte darauf, dass ein sichtbarer Fokus erkennbar ist, wenn der Nutzer mit Tab springt.

• Reihenfolge: Die Tab-Reihenfolge sollte der inhaltlichen Logik folgen.

• Interaktive Elemente: Buttons, Links, Menüs müssen per Tastatur bedienbar sein. Komplexe Widgets benötigen ggf. ARIA-Attribute.

5.3 Farbkontraste und visuelle Lesbarkeit

• Kontrastwerte: WCAG fordert für Texte (Stufe AA) in der Regel ein Kontrastverhältnis von mindestens 4,5:1. Überschriften ab 18 px oder fette 14 px können 3:1 aufweisen.

• Online-Tools: Nutze Tools wie den „Contrast Checker“ von WebAIM, um Farben zu testen.

• Farbkodierungen: Verlasse dich nicht ausschließlich auf Farben, um Informationen zu vermitteln (z. B. „Rot = Fehler“). Füge Icons oder Beschriftungen hinzu.

5.4 Responsives Design

Barrierefreiheit geht oft Hand in Hand mit Responsiveness. Eine mobile Ansicht, die sich flexibel anpasst, ist für viele Nutzer (auch ohne Behinderung) hilfreich. Zudem können große Buttons und ausreichende Abstände die Bedienbarkeit per Touchscreen oder Hilfsmitteln verbessern.

5.5 Formulare und Fehlermeldungen

• Labels klar benennen: Jedes Eingabefeld benötigt ein <label>-Element oder ARIA-Attribute, damit Screenreader-Nutzer wissen, was sie eingeben sollen.

• Fehlermeldungen: Sollten deutlich sichtbar sein und per ARIA aria-live=“assertive” ansagen, dass ein Fehler aufgetreten ist.

• Schritt-für-Schritt-Prozesse: Gerade bei längeren Formularstrecken (z. B. Checkout) kann eine Progress-Anzeige oder ein Wizzard sinnvoll sein, sofern er barrierefrei ist.

Checkliste Schritt 5

• HTML-Struktur semantisch korrekt, ggf. unterstützt durch ARIA?

• Tastaturbedienbarkeit getestet (Focus Indikator, logische Reihenfolge)?

• Farbkontraste überprüft, Richtwert mind. 4,5:1?

• Responsives Design berücksichtigt (auch für Screenreader)?

• Formulare (Labels, Fehlermeldungen) barrierefrei gestaltet?

Schritt 6: Navigation und Bedienkonzepte optimieren

6.1 Klare, konsistente Menüführung

Eine Website sollte konsistent aufgebaut sein. Nutzer – egal ob mit oder ohne Behinderung – mögen es, wenn sich Menüs an bekannter Stelle befinden und immer gleich funktionieren.

• Hauptmenü: In der Regel ganz oben oder seitlich. Ein „Skip to main content“-Link ermöglicht Screenreader-Nutzern, die Navigation zu überspringen.

• Unternavigation: Bei komplexen Websites kann es sinnvoll sein, Unterpunkte ausklappbar zu machen, aber achte auf Tastaturbedienbarkeit und korrekte ARIA-Rollen (role="menu", aria-expanded="true" etc.).

6.2 Brotkrümelnavigation (Breadcrumbs)

Eine Breadcrumb-Navigation hilft Nutzern, den Weg zum aktuellen Content zurückzuverfolgen. Screenreader interpretieren sie oft als separate Linkliste. Stelle sicher, dass die Links sprechende Namen besitzen („Startseite > Kategorie > Unterkategorie“), statt nur Symbole zu verwenden.

6.3 Suchfunktion

Gerade Nutzer, die Schwierigkeiten mit der Navigation haben, greifen gern auf eine Suchfunktion zurück. Achte darauf, dass das Suchfeld klar beschriftet ist und sich Tastaturnutzern gut erschließt.

• Autocomplete: Ist praktisch, aber nicht immer barrierefrei. Eventuell brauchst du ARIA-Attribute oder eine Alternative, falls der Nutzer kein JavaScript nutzt.

• Ergebnisse: Einfache, gut strukturierte Ergebnisliste mit eindeutigen Titeln. So finden sich auch Screenreader-Nutzer schnell zurecht.

6.4 Megamenüs, Akkordeons und dynamische Inhalte

Moderne Websites setzen häufig auf Megamenüs oder Akkordeons, um viele Inhalte kompakt darzustellen. Das kann barrierefrei sein, erfordert aber saubere Implementierung:

• ARIA-Attribute wie aria-controls, aria-expanded signalisieren, ob ein Panel gerade offen ist.

• Keyboard-Traps vermeiden: Der Fokus darf nicht „eingesperrt“ sein. Man sollte immer wieder mit Esc oder Tab herausnavigieren können.

6.5 Interne Link-Struktur und Sitemaps

Eine logische interne Verlinkung unterstützt sowohl Suchmaschinen als auch User mit Behinderungen. Biete zudem eine HTML-Sitemap an, falls dein Projekt sehr umfangreich ist. So können Nutzer rasch die Seitenstruktur erfassen, ohne dutzende Menüs durchklicken zu müssen.

Checkliste Schritt 6

• Hauptnavigation klar positioniert, konsistent, tastaturbedienbar?

• Skiplinks vorhanden (z. B. „Zum Inhalt springen“)?

• Dynamische Navigationselemente (Akkordeons, Megamenüs) korrekt mit ARIA ausgezeichnet?

• Suchfunktion gut auffindbar, beschriftet, Ergebnisse leicht verständlich?

• Optionale HTML-Sitemap oder Breadcrumbs zur besseren Orientierung?

Schritt 7: Formulare und interaktive Elemente barrierefrei gestalten

7.1 Grundlagen barrierefreier Formulare

Formulare sind oft der wichtigste Interaktionspunkt (Kundenanfragen, Buchungen, Bestellungen). Eine fehlende Barrierefreiheit kann hier zu massiven Nutzungsproblemen führen – und dir entgehen potenzielle Kunden.

• Labeling: Jedes Feld braucht ein eindeutiges Label. Placeholder-Text allein reicht nicht aus, da er bei Screenreadern nicht immer ankommt.

• Gruppierung: Wenn ein Formular sehr lang ist, gruppiere Felder sinnvoll (z. B. mit <fieldset> und <legend>).

• Pflichtfelder: Kennzeichne sie deutlich, nicht nur durch Farbe, sondern z. B. durch „(Pflichtfeld)“ oder Sternchen mit ARIA-Beschreibung.

7.2 Fehlermeldungen und Validierung

Nichts ist frustrierender, als nach dem Absenden eines Formulars nur eine kryptische Fehlermeldung zu bekommen.

• Fehlerhinweise: So platzieren, dass Screenreader sie sofort ansagen (z. B. role="alert").

• Hilfetexte: Bei Eingabefeldern, die bestimmte Formate erfordern (z. B. Geburtsdatum), gib ein konkretes Beispiel an.

• Live-Validierung: Wenn du Eingaben schon während der Eingabe prüfst, achte darauf, dass das Ganze barrierefrei lesbar ist (z. B. Hilfestellung in ARIA-Live-Region).

7.3 Captcha und Sicherheitsabfragen

Viele Webseiten verwenden Captchas, um Bots auszusperren. Leider sind Captchas oft ein großes Hindernis für Barrierefreiheit.

• Alternative Captchas: Einige Tools bieten Audio-Captchas an – doch auch diese können problematisch sein.

• Rechenaufgaben oder Logikrätsel: Auch das kann für bestimmte Nutzer (kognitive Einschränkungen) schwierig sein.

• Empfehlung: Versuche, so weit wie möglich auf Captchas zu verzichten oder setze unsichtbare Honeypot-Felder ein, die Bots entlarven, echte Menschen jedoch nicht stören.

7.4 Dynamische und mehrstufige Formulare

Schritt-für-Schritt-Formulare minimieren die Komplexität. Achte jedoch auf:

• Klare Fortschrittsanzeige (z. B. Schritt 1 von 3).

• Barrierefreie Modals oder Overlays, falls du Zwischenschritte abfragst.

• Abbruchoption: Nutzer sollten den Vorgang jederzeit abbrechen können, ohne sich „festzufahren“.

7.5 Usability-Tests mit realen Nutzern

Um Formulare wirklich idiotensicher zu gestalten, hilft oft ein Test mit realen Nutzern. Dabei kannst du gezielt Menschen mit diversen Einschränkungen einladen, den Prozess durchzugehen. Aus solchen Tests lernst du in kurzer Zeit mehr als durch rein theoretische Analysen.

Checkliste Schritt 7

• Jedes Formularfeld hat ein eindeutiges Label?

• Fehlermeldungen erscheinen sichtbar und werden von Screenreadern erkannt?

• Pflichtfelder auch ohne Farbe erkennbar?

• Captchas möglichst barrierearm oder alternative Methoden?

• Komplexe Formulare in sinnvolle Schritte geteilt, mit klarer Fortschrittsanzeige?

Schritt 8: Testszenarien, Monitoring und kontinuierliche Verbesserung

8.1 Manuelle Tests mit Screenreadern und Hilfsmitteln

Automatisierte Tools sind hilfreich, können aber nur etwa 30–50 % der Barrieren aufdecken. Deshalb sind manuelle Tests unverzichtbar:

• Screenreader: NVDA (Windows, kostenlos), VoiceOver (macOS/iOS), JAWS (kommerziell).

• Spracherkennung: Dragon NaturallySpeaking, Windows-Spracherkennung. Teste, ob deine Website korrekt bedienbar ist.

• Vergrößerungssoftware: Prüfe, ob Layout und Kontraste bei starker Vergrößerung erhalten bleiben.

8.2 Einbindung betroffener Nutzer

Der beste Test ist die Einbindung echter Nutzer mit Behinderungen, die als Experten in eigener Sache gelten. Sie zeigen dir, welche Hürden in der Praxis auftreten. Viele Unternehmen führen User Labs durch oder arbeiten mit Verbänden zusammen, um gezielt Feedback zu erhalten.

8.3 Kontinuierliches Monitoring

Barrierefreiheit ist kein „Einmal-Projekt“. Schon kleine Änderungen im CMS oder neue Plugins können wieder Fehler einschleichen. Setze deshalb regelmäßige Überprüfungen auf:

• Automatisierte Monitoring-Tools: Laufen periodisch und melden neu auftretende Probleme.

• CI/CD-Integration: Prüfe Accessibility z. B. in jedem Release, sodass Fehler gar nicht erst in die Live-Version gelangen.

8.4 Reporting und KPIs

Definiere Kennzahlen, um den Fortschritt zu messen:

• Lighthouse-Score für Accessibility.

• Anzahl erkannter Barrierefreiheitsfehler in Tools wie axe.

• Feedback von Nutzern (Anzahl Support-Anfragen, Beschwerden, Lob).

• Erfolge: z. B. Steigerung der Conversion-Rate, weniger Abbrüche in Formularen.

8.5 Regelmäßige Audits (intern/extern)

Auch wenn du intern deine Website pflegst, kann ein externer Audit alle ein bis zwei Jahre sinnvoll sein, um eine objektive Bestandsaufnahme zu bekommen. Dem IFDB bietet Audits an, die du ggf. mit einem Zertifikat abschließen kannst, was insbesondere rechtlich und für Marketingzwecke interessant ist.

Checkliste Schritt 8

• Manuelle Tests mit verschiedenen Screenreadern?

• Nutzertests mit Personen mit unterschiedlichen Behinderungen?

• Regelmäßiges Monitoring etabliert (z. B. automatisierte Prüfungen)?

• KPIs definiert (Lighthouse-Score, Support-Anfragen)?

• Planung für wiederkehrende Audits?

Schritt 9: Dokumentation und Kommunikation der Barrierefreiheit

9.1 Erstellen einer Barrierefreiheits-Erklärung

Gerade öffentliche Einrichtungen sind gesetzlich verpflichtet, eine Barrierefreiheits-Erklärung bereitzustellen. Aber auch viele private Unternehmen nutzen solche Erklärungen, um transparent zu machen, wie barrierefrei ihre Website ist und an welchen Stellen noch gearbeitet wird.

• Inhalt: Erläuterung, welche Teile barrierefrei sind, welche Standards erfüllt werden, wo es evtl. noch Defizite gibt.

• Kontakt: Eine Stelle, an die man sich wenden kann, wenn man Probleme mit der Bedienung hat.

• Aktualität: Halte die Erklärung auf dem neuesten Stand. Nach größeren Relaunches oder Audits sollte sie aktualisiert werden.

9.2 Interne Dokumentation

Ein Wiki oder ein zentraler Speicherort (z. B. in Confluence, SharePoint) hilft, das erworbene Wissen zu festigen. Dort können Guidelines, Code-Beispiele, Best Practices und Erkenntnisse aus Nutzer-Feedback gesammelt werden.

• Versionierung: Halte fest, wann welche Komponente barrierefrei überarbeitet wurde.

• Lessons Learned: Jede Fehlerquelle, die behoben wurde, kann als Erfahrungswert archiviert werden, damit sie nicht erneut auftaucht.

9.3 Externe Kommunikation: Marketing und CSR

Barrierefreiheit kann Teil deiner CSR-Strategie (Corporate Social Responsibility) sein. Eine Website, die inklusiv gestaltet ist, kann im Marketing positiv hervorgehoben werden:

• Pressemitteilungen über den erfolgreichen Abschluss eines Audits.

• Zertifikate oder Gütesiegel auf der Website platzieren.

• Case Studies: Zeigen, wie dein Unternehmen Barrieren abgebaut hat und welchen Vorteil Nutzer und das Unternehmen selbst davon haben.

9.4 Austausch mit der Community

Im Feld Accessibility gibt es eine sehr aktive Community. Der Global Accessibility Awareness Day (GAAD), Foren, LinkedIn-Gruppen oder Barcamps bieten Gelegenheit, sich auszutauschen, Feedback einzuholen und immer auf dem neuesten Stand zu bleiben – sowohl technisch als auch hinsichtlich Gesetzesänderungen.

9.5 Reporting für Führungskräfte und Stakeholder

Wer das Projekt Barrierefreiheit verantwortet, sollte regelmäßig Reportings an die Geschäftsführung oder Stakeholder liefern:

• Fortschritt in Zahlen (KPIs)

• Erfolgsgeschichten (z. B. Dankesschreiben von Kunden)

• Ggf. Budgetbedarf oder Schulungsbedarf für die nächsten Schritte

Checkliste Schritt 9

• Barrierefreiheits-Erklärung veröffentlicht oder geplant?

• Zentrales Dokumentationssystem (Wiki, Confluence etc.) angelegt?

• Öffentlichkeitsarbeit, z. B. Pressemitteilungen, CSR-Berichte?

• Community-Kanäle (GAAD, Foren etc.) eingebunden?

• Interne Reports (Management, Stakeholder) etabliert?

Schritt 10: Nachhaltigkeit und Zukunftssicherheit

10.1 Barrierefreiheit als Teil der Unternehmenskultur

Eine einmalig barrierefreie Website ist gut – doch wenn das Thema nicht im Alltag verankert ist, schleichen sich schnell wieder Fehler ein. Barrierefreiheit sollte idealerweise ein Bestandteil der Unternehmenskultur werden:

• Onboarding: Neue Mitarbeitende erhalten Infos über barrierefreie Standards.

• Regelmäßige Schulungen: Mindestens 1–2 Mal pro Jahr, um auf neue Tools oder Updates (z. B. WCAG 2.2) zu reagieren.

• Zielvereinbarungen: Accessibility kann in Jahresziele oder KPI-Vorgaben einzelner Abteilungen einfließen.

10.2 Technologische Weiterentwicklung

Die digitale Landschaft verändert sich ständig. Neue Frameworks, Tools, Plugins oder Devices kommen auf den Markt. Barrierefreiheit muss da mithalten:

• Progressive Enhancement: Entwickle Websites so, dass Grundfunktionen ohne JavaScript oder CSS funktionieren, und füge fortgeschrittene Features obenauf.

• Neue Standards: WCAG 2.2, WCAG 3.0, EN 301 549 – halte dich auf dem Laufenden, welche Anforderungen sich ändern und welche neuen Verfahren empfohlen werden.

• KI-Tools: KI-basierte Accessibility-Checker oder Tools, die automatisch Alt-Texte generieren, können unterstützen, sind aber kein Allheilmittel.

10.3 Skalierung auf andere Produkte und Plattformen

Wer eine Website barrierefrei gemacht hat, könnte als nächstes andere Kanäle in den Blick nehmen:

• Apps (iOS/Android), Smart-TV-Anwendungen, Kiosksysteme, Intranet-Portale etc.

• Social Media: Auch dort sollten Beiträge z. B. Alt-Texte für Bilder enthalten, Hashtags #barrierefrei, Transkripte für Videos, etc.

• Dokumente: Wenn du Whitepaper oder Broschüren verteilst, kannst du sie nach PDF/UA gestalten oder als reines HTML anbieten.

10.4 Budget und Ressourcen langfristig sichern

Barrierefreiheit braucht kontinuierliche Kapazitäten – sei es in Form von Zeit, Geld oder Kompetenz. Stelle im Jahresbudget Mittel bereit, um Audits, Schulungen und technische Weiterentwicklungen zu finanzieren. Nur so bleibt die Qualität erhalten.

10.5 Ausblick: Zukunft der Barrierefreiheit

Mit dem BFSG und dem wachsenden Bewusstsein für Inklusion wird Barrierefreiheit in den nächsten Jahren weiter an Bedeutung gewinnen. Auch Suchmaschinen wie Google legen Wert auf barrierefreie Standards (Stichwort Page Experience). Zugleich ist die Gesellschaft im Wandel: Ein immer größerer Teil der Bevölkerung ist älter oder weist Einschränkungen auf – barrierefreie digitale Angebote werden also einen wachsenden Markt bedienen.

Checkliste Schritt 10

• Barrierefreiheit im Unternehmen fest verankert (Kultur, Onboarding, Zielvereinbarungen)?

• Technische Entwicklungen (WCAG-Updates, neue Tools) im Blick behalten?

• Skalierung der Maßnahmen auf weitere digitale Produkte?

• Langfristige Budgetplanung für Audits und Schulungen?

• Bewusstsein für neue Trends und wachsende Bedeutung von Inklusion?

Zusammenfassung und Fazit

Barrierefreiheit ist kein einmaliges Projekt, sondern ein kontinuierlicher Prozess. Wer glaubt, nach einem Audit oder einer Zertifizierung „fertig“ zu sein, unterschätzt die Dynamik der digitalen Welt. Änderungen im Content-Management-System, neue Releases, hinzukommende Formulare oder gar ein kompletter Website-Relaunch können schnell neue Barrieren aufwerfen.

Die 10 Schritte in dieser Checkliste geben dir eine umfassende Roadmap an die Hand: von der Ausgangsanalyse (welche Angebote habe ich überhaupt?) über die Zielsetzung, das Teamsetup, die inhaltlich-technische Umsetzung bis hin zum Monitoring, der internen und externen Kommunikation sowie der langfristigen Integration in die Unternehmenskultur. Jeder Schritt wurde vertieft, mit Praxisbeispielen und Handlungsanweisungen versehen, sodass du direkt damit arbeiten kannst.

Denke daran, dass barrierefreie Gestaltung allen Nutzern zugutekommt, nicht nur Menschen mit Behinderungen. Eine saubere Semantik, gute Farbkontraste, verständliche Texte und übersichtliche Strukturen erhöhen die Benutzerfreundlichkeit und die Zufriedenheit. Gleichzeitig positionierst du dich als verantwortungsbewusstes Unternehmen, das gesellschaftliche Inklusion fördert und rechtliche Anforderungen proaktiv umsetzt.

Dem IFDB – Institut für digitale Barrierefreiheit steht dir bei jedem Schritt zur Seite – sei es durch eine Erstberatung, Audits, Zertifizierungen oder Schulungen deiner Mitarbeitenden. Die praxisnahe Erfahrung und das umfassende Know-how sorgen dafür, dass du nicht nur abstrakte Theorie erhältst, sondern auch ganz konkrete Umsetzungshilfen, die sich auf deine spezifische Unternehmenssituation maßschneidern lassen.

Zum Abschluss lohnt es sich, noch einmal hervorzuheben, dass Barrierefreiheit kein „Hygienefaktor“ sein sollte, den man nur aus Angst vor rechtlichen Konsequenzen abdeckt, sondern ein echter Mehrwert. Wer barrierefrei entwickelt und gestaltet, produziert bessere Software und bessere Inhalte, die (fast) allen Menschen eine höhere Usability und Zugänglichkeit bieten. Gerade in einer älter werdenden Gesellschaft, in der wir alle irgendwann von bestimmten Einschränkungen betroffen sein können, wird Barrierefreiheit zu einem zentralen Qualitätsmerkmal.

Nutze also diesen Leitfaden als deinen Kompass:

1. Prüfe deine Ausgangslage,

2. Definiere klare Ziele,

3. Stelle ein kompetentes Team auf,

4. Optimiere Inhalte,

5. Implementiere barrierefreie Techniken,

6. Sorge für eine konsistente Navigation,

7. Gestalte Formulare barrierefrei,

8. Führe regelmäßige Tests und Monitoring durch,

9. Dokumentiere und kommuniziere die Ergebnisse,

10. Und sorge für Nachhaltigkeit und Zukunftssicherheit.

Damit schaffst du eine digitale Präsenz, die den wachsenden Anforderungen genügt – in rechtlicher, sozialer und ökonomischer Hinsicht. Und ganz nebenbei machst du deine Website zukunftsfähig und für alle angenehm benutzbar.

Viel Erfolg bei der Umsetzung deiner barrierefreien Website!