Direkt zum Seiteninhalt

Barrierefreie Internetseiten. Unser Leitfaden.

Barrierefreiheit im Web ist nicht nur gesetzlich verpflichtend. Sie ist ein Zeichen von Respekt und Teilhabe. Wir unterstützen Sie dabei, Ihre Website für alle zugänglich zu gestalten.

~ 1 Mio.
Internetnutzer sind sehbehindert, blind oder gehörlos
46%
aller Behinderten bemängeln die Nutzbarkeit von Websites
55
Kriterien die erfüllt werden müssen
80%
aller behinderten Menschen nutzen das Internet

Warum überhaupt Barrierefreiheit?

Inklusion ist ein Leitprinzip in unserer Gesellschaft. Eine gesetzliche Verpflichtung, die allen Menschen – nicht nur Personen mit Behinderungen – zugutekommt: Neben Menschen mit Behinderungen profitieren von barrierefrei zugänglichen Internetseiten auch Menschen mit Lernschwierigkeiten, eingeschränkten Sprachkenntnissen, ältere oder weniger technikaffine Menschen und viele mehr. Nicht ohne Grund ist Barrierefreiheit auch ein Ranking-Kriterium für Suchmaschinen.

Mit der EU-Richtlinie 2016/2102 sind öffentliche Stellen, darunter auch Städte und Gemeinden, verpflichtet, ihre Webangebote so zu gestalten, dass Menschen mit Einschränkungen oder Behinderungen diese vollständig nutzen und verstehen können.

Welche Zielgruppen profitieren von einem barrierefreien Angebot?

Ein barrierefreies Webangebot ist kein „Nice-to-have“ – es ist ein echter Mehrwert für viele Menschen. Verschiedene Zielgruppen profitieren unmittelbar von einer barrierefreien Gestaltung.

  • Menschen mit Seh- oder Hörbehinderung

    Klare Strukturen, Alternativtexte, Untertitel und Vorlesefunktionen sorgen dafür, dass Inhalte für alle zugänglich sind.

  • Menschen mit motorischen Einschränkungen

    Eine einfache Navigation per Tastatur oder assistiven Technologien ermöglicht eine selbstbestimmte Nutzung der Website.

  • Menschen mit kognitiven Einschränkungen

    Klare Texte, logischer Aufbau und visuelle Unterstützung machen Informationen leichter erfassbar.

  • Menschen mit wenig Interneterfahrung

    Intuitive Bedienung, selbsterklärende Icons und übersichtliches Design helfen auch ungeübten Nutzerinnen und Nutzern weiter.

  • Nutzer mobiler Endgeräte

    Barrierefreiheit geht Hand in Hand mit einem responsiven Design – Inhalte passen sich automatisch verschiedenen Bildschirmgrößen an.

  • Menschen mit geringen Deutschkenntnissen

    Verständliche Sprache und klare Formulierungen erleichtern das Verstehen von Inhalten - unabhängig vom Sprachniveau.

  • Suchmaschinen & KI

    Barrierefreie Seiten sind strukturierter aufgebaut – das verbessert auch die Auffindbarkeit in Suchmaschinen und KI-gestützten Anwendungen.

Standards und Anforderungen für Ihren barrierefreien Internetauftritt

Beachten Sie:

Welche konkreten Anforderungen für Städte und Gemeinden gelten und bis wann sie umzusetzen sind, ist in den jeweiligen Landesgesetzen oder -verordnungen geregelt.

Wann gilt Ihre Website als barrierefrei?

Damit eine Website den Anforderungen der Barrierefreiheit entspricht, müssen sowohl die technischen Voraussetzungen als auch die Inhalte folgende Kriterien erfüllen. Diese basieren auf den Standards der BITV 2.0 und der WCAG-Richtlinien.

  • Konformitätsstufen A und AA

    Es gibt gemäß der BITV 2.0 drei verschiedene Konformitätsstufen (‘A’, ‘AA’ und ‘AAA’), mit denen dokumentiert wird, wie “gut” eine Seite barrierefrei ist. Um einen barrierefreien Internetauftritt anzubieten, müssen mindestens die beiden Konformitätsstufen ‘A’ und ‘AA’ erfüllt sein.

  • Vollständige Erfüllung pro Seite

    Jede (einzelne) Seite muss die Kriterien ganz erfüllen, man kann nicht erklären, dass nur ein Teil einer Seite konform ist. Seiten, die einen Prozess darstellen (z.B. ein online beantragter Verwaltungsvorgang), müssen durchgängig konform sein.
    Auch PDF-Dokumente, die auf der Website bereitgestellt werden, müssen barrierefrei gestaltet sein.

  • Erläuterungen auf der Startseite

    Auf der Startseite der Website sind Erläuterungen über die Inhalte sowie Hinweise zur Bedienung und zu den weiteren Angeboten in leichter sowie in deutscher Gebärdensprache bereitzustellen (Anlage 2 der BITV 2.0).

  • Kommunale Einrichtungen

    Einrichtungen wie Kindertagesstätten, Schulen oder Feuerwehren sind ebenso verpflichtet, die Vorgaben der BITV 2.0 vollständig umzusetzen.

Unzumutbar?

Gerade in Zeiten knapper Kassen stellt sich im Zusammenhang mit den notwendigen Maßnahmen für die barrierefreie Bereitstellung von Inhalten oft die Frage der Zumutbarkeit. Und tatsächlich haben alle Bundesländer die Unzumutbarkeitsklausel durch die Umsetzung der EU Richtlinie übernommen. Theoretisch zumindest. An diese Klausel sind aber sehr strenge Bedingungen geknüpft. Die konkrete Handhabung regeln die Bundesländer zwar unterschiedlich, aber in allen Fällen sind die Hürden sehr hoch, die Begründung muss detailliert und nachvollziehbar sein.

Grundsätzlich kann eine Unzumutbarkeit nur in Einzelfällen begründet werden:

  • Inhalte, die nicht barrierefrei umsetzbar sind (z.B. komplexe interaktive Karte, veraltetes Fachsystem)
  • Kosten‑/Aufwandsanalyse: Konkrete Kostenschätzungen (Neuentwicklung, Schnittstellen, externe Dienstleister) übersteigen den Nutzen für Menschen mit Behinderungen bei Weitem
  • Technische Gründe: Nachweis, dass aktuell keine barrierefreie Standardlösung existiert oder Integration mit bestehender IT nicht möglich ist
  • Es existieren alternative Angebote: z.B. PDF‑Download, Telefon‑/E‑Mail‑Kontakt, persönliche Beratung, die den gleichen Inhalt zugänglich macht

In jedem Fall ist ein Eintrag in der Erklärung zur Barrierefreiheit mit Begründung und Hinweis auf die Alternative erforderlich. Ungeachtet dessen können Betroffene fordern, dass die Inhalte barrierefrei zur Verfügung gestellt werden – auch wenn die Kommune sich auf „Unzumutbarkeit“ beruft.

Checkliste für Ihre Redaktion

Barrierefreiheit betrifft nicht nur den technischen Aufbau durch die Agentur, sondern auch die inhaltliche Gestaltung durch Sie als Kommune:

  • Navigation und Aufbau

    Eine logische, übersichtliche und leicht verständliche Struktur ist entscheidend für die Barrierefreiheit. Wir beraten Sie bei der Optimierung von Menüführung, Seitenaufbau und Benutzerführung.

  • WCAG-Anforderungen umsetzen

    Barrierefreiheit betrifft nicht nur die Technik, sondern vor allem die Inhalte. Texte, Bilder, Farben und Interaktionen müssen entsprechend gestaltet sein. Unser CMS für Kommunen unterstützt Sie dabei, Inhalte barrierefrei zu erfassen und zu überarbeiten.

  • Videos in Gebärdensprache

    Inhalte sollten zusätzlich in deutscher Gebärdensprache bereitgestellt werden. Wir unterstützen Kommunen dabei und bieten die Erstellung solcher Gebärdensprach-Videos als Teil unserer Dienstleistungen an.

  • Konformitätserklärung

    Auf die Internetseite gehört eine gut sichtbare Eigenerklärung zur Konformität. In der Erklärung muss der Hinweis auf eine Kontaktmöglichkeit aufgeführt werden. Ebenfalls veröffentlicht werden muss ein Hinweis auf das Schlichtungs- bzw. Durchsetzungsverfahren sowie die Verlinkung der zuständigen Stelle. Diese Erklärung muss mindestens einmal jährlich überprüft werden.

  • Prüfung und Nachweis der Barrierefreiheit

    Nach der Umsetzung testen wir jede Website sorgfältig auf Barrierefreiheit und stellen sicher, dass alle Anforderungen der BITV 2.0 erfüllt sind. Auch nach dem Go-live behalten wir die Barrierefreiheit im Blick und rüsten in unseren Kommunen-Updates regelmäßig nach.

    Wenn Sie Ihre bestehende Website unabhängig prüfen lassen möchten, bieten wir Ihnen unseren Website-Check an, mit dem Sie Ihre Website gezielt auf vollständige Barrierefreiheit und rechtliche Anforderungen prüfen lassen können.

Website Check

Wir überprüfen Ihre Website auf vollständige Barrierefreiheit und rechtliche Anforderungen.

Jetzt Prüfung anfragen

Wann ist eine Website barrierefrei?

Um einen barrierefreien Internetauftritt anzubieten, müssen die Erfolgskriterien und Konformitätsbedingungen der Web Content Accessibility Guidelines (WCAG) 2.2 erfüllt werden. Wir wollen an dieser Stelle versuchen, die sperrig klingenden Anforderungen für Sie etwas verständlicher aufzubereiten (Anforderungen der Konformitätsstufen ‘A’ und ‘AA’.):

1. Prinzip: Wahrnehmbar

Bilder und Grafiken beschreiben

Jedes Bild, das etwas Bedeutsames aussagt (z.B. Diagramm, Produktfoto), braucht eine kurze Beschreibung, die erklärt, was darauf zu sehen ist. Beispiel: Ein Foto zeigt ein Büro mit vielen Menschen. Der notwendige Alt‑Text könnte lauten: „Mitarbeiter sitzen in einem modernen Großraumbüro zusammen und arbeiten am Computer.“ Auch Layout-Elemente (rein dekorative Bilder ohne Informationsgehalt) müssen entsprechend gekennzeichnet werden, damit Screenreader diese Inhalte überspringen können.

Videos und Audiodateien erklären

Videos, in denen gesprochen wird, müssen Untertitel enthalten, damit auch Menschen mit Hörbehinderung den Inhalt verstehen. Audio‑Dateien (z.B. Podcasts, Erklärvideos ohne Bild) müssen eine schriftliche Fassung (Transkript) haben.

Logische Strukturierung von Inhalten

Wird Text bzw. der Zeilenabstand vergrößert oder der Inhalt auf einem hoch- statt einem querformatigen Display ausgegeben, muss sichergestellt werden, dass der Text weiterhin so dargestellt wird, dass dieser logisch korrekt zusammenhängend lesbar bleibt. Das muss auch noch sichergestellt sein, wenn css abgeschaltet wird, wenn bspw. unterstützende Software wie ein Screenreader die Inhalte ausgibt. Wichtig ist, dass Inhalte eine klare Überschriftenhierarchie aufweisen und Elemente wie Listen oder Tabellen mit den richtigen HTML-Tags gekennzeichnet werden.

Farbe nicht allein als Signal

Wichtige Hinweise dürfen nicht ausschließlich durch Farbe, Töne oder durch eine bestimmte Position dargestellt werden. Beispiele: Nur ein rotes Icon, um einen Fehler zu markieren. Besser: Roter Text “Bitte geben Sie eine gültige E‑Mail‑Adresse ein“ auf weißem Hintergrund und zusätzlich ein Symbol (Ausrufezeichen)

Gute Lesbarkeit und Kontrast

Die eingesetzte Schrift sollte sich deutlich vom Hintergrund abheben (z.B. dunkel auf hell, nicht hellgrau auf weiß). Auch das Menü oder andere Bedienelemente müssen einen ausreichend großen Kontrast aufweisen. Zudem müssen Bedienelemente auch ausreichend kontrastierend zu benachbartem Text / benachbarten Elementen gestaltet sein, damit sie klar als fokussierbares oder aktives Element erkennbar bleiben.

2. Prinzip: Bedienbar

Die gesamte Website muss mit der Tastatur bedienbar sein

Und zwar komplett ohne Maus oder Stift. Das betrifft sowohl Menüs, Buttons, Links als auch Formulare. So kann ein Besucher mit der Tabulator-Taste durch die Menüpunkte bzw. Buttons „springen“ und diese mit der Enter-Taste auswählen. Wenn ein Element mit der Tastatur ausgewählt wird, muss das aktive Element deutlich zu sehen sein (das kann durch einen Rahmen oder Farbwechsel geschehen). Für Menschen mit motorischen Einschränkungen ist das unbedingt erforderlich. Wichtig ist es, Skip-Links (z. B. "Zum Hauptinhalt" oder "Menü überspringen") anzubieten, damit die betroffenen Nutzer mit der Tastatur Navigationen überspringen und direkt zu Inhalten gelangen können.

Benutzer sollen ausreichend Zeit haben, die Inhalte zu lesen und zu benutzen

Gerade bei Video- oder Audioinhalten muss daher die Option eingebaut werden, den Ablauf anzuhalten und ggf. erneut zu starten (Stop / Pause Button).

Kein störendes oder schnelles Blinken

Animationen oder blinkende Inhalte sollten nicht schneller als etwa 3‑mal pro Sekunde blinken, sonst können sie Menschen mit Epilepsie oder Migräne schaden.

Verständliche Navigation

Menüs, Buttons und Links sollten so benannt sein, dass direkt klar ist, wohin sie führen, sie sollten auch für benutzer erreichbar sein, die sehr kleine Linkflächen motorisch schlecht erreichen können. Bei Verlinkungen zu PDFs oder anderen Dateien muss das jeweilige Dateiformat erwähnt werden, damit Nutzer wissen, was sie erwartet. Negatives Link-Beispiel: “Die Bedienungsanleitung finden Sie hier ”. Besser: “Infos finden Sie in der Bedienungsanleitung (PDF) ”. Zudem sollte es mehrere Wege geben, Inhalte zu finden, z.B. Hauptmenü, Suche oder Inhaltsverzeichnis.

3. Prinzip: Verständlich

Einfache und richtige Sprache

Die verwendete Sprache (Deutsch / Englisch…) für die gesamte Internetseite muss voreingestellt sein, sodass Ausgabegeräte die richtige Aussprache verwenden können. Wenn Sätze in einer abweichenden Sprache vorkommen, muss dies entsprechend kenntlich gemacht werden. Texte sollten möglichst einfach und klar formuliert sein, damit auch Menschen mit Lernschwierigkeiten oder wenig Fachkenntnissen sie verstehen. Fachbegriffe oder Abkürzungen sollten erklärt werden.

Konsistente Navigation

Menüs, Buttons und Layout sollten sich auf allen Seiten ähnlich verhalten, damit Nutzer sich auf nachfolgenden Seiten schnell zurechtfinden. So sollen Menüpunkte oder Links in der Fußzeile möglichst immer an derselben Stelle platziert werden. Zudem sollte der Nutzer jederzeit wissen, wo er sich in der Struktur befindet (Brotkrumen). Das unterstützt (nicht nur) Menschen mit kognitiven Einschränkungen.

Vorhersehbare Abläufe

Funktionen sollten sich auf der Website immer gleich verhalten. Wenn per Tab-Taste (oder Umschalt+Tab) ein Inhalt durchwandert wird, darf es nicht einfach ohne Rückmeldung an den Nutzer zu einer Änderung des Inhaltes oder des Kontextes kommen. Die Reihenfolge von Links sollte immer gleich sein, weil der Benutzer dies erwartet, ebenso sollten identisch eingesetzte Buttons und Icons immer dieselbe Bedeutung haben bzw. Funktion auslösen.

Formulare klar beschriften und vor dem Absenden überprüfen

Jedes Eingabefeld (Name, E‑Mail, Adresse) braucht eine klare Bezeichnung, nicht nur Platzhaltertext im Feld. Pflichtfelder sollten als solche gekennzeichnet werden. Sofern der Nutzer mit dem Absenden eine rechtliche Verpflichtung eingeht, sollten die Inhalte des Formulars vorab zur Überprüfung bereitgestellt werden.

Gute Fehlermeldungen

Wenn ein Formular fehlerhaft ausgefüllt wird, muss klar sein, was falsch ist und wie es korrigiert werden kann. Mit der Meldung „Es ist ein Fehler aufgetreten“ kann der Nutzer erheblich weniger anfangen als: „Bitte geben Sie eine gültige E‑Mail‑Adresse ein (z.B. max@beispiel.de).“ Technisch gesehen müssen Fehlermeldungen mit korrekter Syntax ausgezeichnet sein, so dass sie von Screenreadern erkannt und vorgelesen werden können.

Logins und einfache Bestätigungen, dass es sich nicht um einen Bot handelt

Das Absenden von Formularen darf nicht nur mit komplizierten Rätseln, Gedächtnisaufgaben oder reinen Bild‑CAPTCHAs erfolgen; es muss auch eine alternative, barrierefreie Methode geben. So könnte man statt nur „Klicken Sie auf alle Bilder mit einem Auto“ zusätzlich eine Text‑CAPTCHA‑Variante oder ein Sprach‑CAPTCHA anbieten.

4. Prinzip: Robust

Korrekte Struktur des Aufbaus der Seite

Dazu gehören Überschriften, Listen und Formulare, damit Screenreader und andere Hilfsmittel sie verstehen. Seiten sollten mit gängigen Screenreadern (z.B. NVDA, VoiceOver) und anderen Assistenztechnologien nutzbar sein.

Status- und Erfolgsmeldungen

Informationen über den Erfolg oder die Ergebnisse einer Aktion, über den Wartezustand einer Anwendung, über den Fortschritt eines Prozesses oder über das Vorhandensein von Fehlern müssen verständlich hinterlegt sein.

Klare Bezeichnungen für komplexe Elemente

Wenn Buttons oder Menüs sehr komplex sind, sollten sie klar benannt sein, damit Screenreader‑Nutzer sie verstehen.
Ein Button mit einem kleinen Symbol bekommt den Text „Menü öffnen“ oder „Untermenü schließen“, damit der Screenreader das vorliest. Neben der Aktionsbeschreibung muss auch über den Zustand der Elemente informiert werden (offen / geschlossen).