Barrierefreie Website und Erklärung zur Barrierefreiheit

Barrierefreiheit im Web bedeutet, dass Websites für alle Menschen barrierefrei zugänglich sind. Unabhängig von körperlichen oder kognitiven Einschränkungen. Was für viele nett ist, ist für manche existenziell. Blinde Menschen brauchen Screenreader, Sehbehinderte vergrößerbare Schriften, motorisch Eingeschränkte Tastaturnavigation.

Als erfahrene Webdesign-Agentur in Erfurt entwickeln wir barrierefreie Websites nach WCAG 2.1 und BITV 2.0 Standards. Für öffentliche Auftraggeber in Erfurt, Thüringen und ganz Deutschland ist Barrierefreiheit Pflicht, für viele private Unternehmen seit Juni 2025 ebenfalls, sofern sie unter das Barrierefreiheitsstärkungsgesetz fallen.

Was ist Barrierefreiheit im Web?

Web-Barrierefreiheit (englisch: Web Accessibility, oft abgekürzt als A11y) ist ein Teilbereich der digitalen Barrierefreiheit. Das bedeutet, dass Websites, Tools und Technologien so gestaltet sind, dass Menschen mit Behinderungen sie nutzen können. Barrierefreie Websites ermöglichen allen Nutzern Zugang zu digitalen Inhalten, unabhängig von ihren Einschränkungen.

Wer profitiert von Barrierefreiheit?

• Blinde Menschen: Nutzen Screenreader, die Inhalte vorlesen. Brauchen sauberen HTML-Code und Alt-Texte für Bilder.
• Sehbehinderte: Brauchen vergrößerbare Schriften, hohe Kontraste, keine festen Pixelgrößen.
• Gehörlose: Für viele ist Gebärdensprache die Muttersprache. Brauchen Untertitel für Videos, Transkripte für Audio-Inhalte.
• Menschen mit motorischen Einschränkungen: Können keine Maus nutzen. Brauchen volle Tastaturnavigation, damit barrierefreie Websites bedienbar sind.
• Kognitiv Eingeschränkte: Brauchen einfache Sprache, klare Strukturen, keine komplexen Abläufe.
• Temporär Eingeschränkte: Gebrochener Arm? Schlechtes Licht? Barrierefreiheit hilft allen.

Gesetzliche Grundlagen: BITV 2.0, EU-Richtlinie und BFSG

Barrierefreiheit ist nicht nur ethisch richtig, sondern zunehmend gesetzlich verpflichtend. In Erfurt und Thüringen müssen öffentliche Stellen barrierefreie Websites bereitstellen.

BITV 2.0: Pflicht für öffentliche Stellen in Erfurt

• Was ist BITV? Barrierefreie-Informationstechnik-Verordnung. Setzt EU-Richtlinie in deutsches Recht um. Für öffentliche Stellen in Erfurt ist BITV 2.0 verbindlich.
• Für wen gilt BITV in Erfurt? Öffentliche Stellen: Behörden, Kommunen, Hochschulen, öffentliche Unternehmen in Erfurt und Thüringen.
• Seit wann? Neue Websites seit 2019, bestehende Websites seit 2020, mobile Apps seit 2021. Barrierefreie Websites sind für öffentliche Auftraggeber in Erfurt Pflicht.
• Standards: BITV 2.0 basiert auf WCAG 2.1 Level AA. Das ist der internationale Standard für barrierefreie Websites.

European Accessibility Act (EAA): seit Juni 2025 auch für Unternehmen

• Was ist der EAA? EU-Richtlinie, die Barrierefreiheit für private Unternehmen vorschreibt. In Deutschland durch das Barrierefreiheitsstärkungsgesetz (BFSG) umgesetzt. Es gilt seit dem 28. Juni 2025.
• Ausnahmen: Kleinstunternehmen, die Dienstleistungen anbieten, also weniger als zehn Beschäftigte und höchstens zwei Millionen Euro Jahresumsatz oder Bilanzsumme, sind ausgenommen. Für bestimmte Angebote, die schon vor dem Stichtag am Markt waren, gelten Übergangsfristen.
• Für wen? E-Commerce, Banken, Verkehrsunternehmen, Telekommunikation, bestimmte Dienstleistungen. Barrierefreiheit wird für viele Branchen Pflicht.
• Was droht? Bußgelder bei Nicht-Einhaltung. Rechtliche Konsequenzen für Unternehmen ohne barrierefreie Websites.

Rechtliche Konsequenzen bei Nichteinhaltung in Erfurt

Öffentliche Stellen in Erfurt müssen Barrierefreiheit nachweisen. Bei Nicht-Einhaltung drohen:

• Beschwerden: Nutzer können Beschwerde einreichen bei Thüringer Überwachungsstellen.
• Nachbesserungspflicht: Defizite bei barrierefreien Websites müssen behoben werden.
• Reputationsschäden: Negative Presse, Image-Verlust für Organisationen in Erfurt.

Unternehmen, die unter das BFSG fallen, riskieren seit Juni 2025 zusätzlich Bußgelder und Schadensersatzforderungen, wenn Websites nicht barrierefrei sind.

WCAG 2.1 Standards: Level A, AA, AAA für barrierefreie Websites

Die Web Content Accessibility Guidelines (WCAG) sind der internationale Standard für Web-Barrierefreiheit. Entwickelt vom W3C (World Wide Web Consortium). WCAG 2.1 definiert, wie barrierefreie Websites gestaltet werden müssen.

Die vier Prinzipien (POUR) für Barrierefreiheit

• Perceivable (Wahrnehmbar): Informationen müssen so präsentiert werden, dass Nutzer sie wahrnehmen können. Alt-Texte für Bilder, Untertitel für Videos.
• Operable (Bedienbar): UI-Komponenten müssen bedienbar sein. Tastaturnavigation, genügend Zeit für Interaktionen.
• Understandable (Verständlich): Informationen und Bedienung müssen verständlich sein. Klare Sprache, vorhersagbare Navigation.
• Robust: Inhalte müssen robust genug sein, um von verschiedenen User Agents interpretiert werden zu können. Sauberer, valider Code.

Konformitätslevel für barrierefreie Websites

• Level A: Basis-Level. Minimum-Anforderungen. Ohne diese ist die Website für einige Menschen mit Behinderungen komplett unzugänglich.
• Level AA: Standard-Level. BITV 2.0 fordert dieses Level. Die meisten barrierefreien Websites sollten AA anstreben.
• Level AAA: Höchstes Level. Nicht für alle Inhalte erreichbar. Oft nur für spezialisierte barrierefreie Websites sinnvoll.

Empfehlung für Erfurt: Level AA ist das Ziel für die meisten Websites. Es ist erreichbar und bietet gute Zugänglichkeit für Menschen mit Behinderungen.

Screenreader-Optimierung: ARIA-Labels & Landmarks

Screenreader lesen Websites vor. Blinde Menschen hören, was sehende Menschen sehen. Dafür muss die Website richtig strukturiert sein. Screenreader-optimierte, barrierefreie Websites nutzen semantisches HTML und ARIA-Labels.

Semantisches HTML für Screenreader nutzen

Semantisches HTML gibt Screenreadern Kontext. Eine <nav> ist Navigation, ein <main> ist Hauptinhalt. Das ermöglicht schnelles Navigieren auf barrierefreien Websites.

ARIA-Labels für zusätzlichen Kontext

• aria-label: Beschreibt Element. "Schließen-Button" statt nur Icon.
• aria-labelledby: Verweist auf ID eines anderen Elements für Beschriftung.
• aria-describedby: Zusätzliche Beschreibung für Element. Screenreader lesen diese vor.
• aria-live: Dynamische Inhalte werden vorgelesen, wenn sie sich ändern.

Landmarks für Navigation

Screenreader-Nutzer springen zwischen Landmarks (Orientierungspunkten) auf barrierefreien Websites:

• Banner (role="banner"): Seitenkopf, Logo, Hauptnavigation
• Navigation (role="navigation"): Navigationsbereiche
• Main (role="main"): Hauptinhalt der Seite
• Complementary (role="complementary"): Ergänzende Inhalte (Sidebar)
• Contentinfo (role="contentinfo"): Footer mit Impressum, Kontakt

Moderne HTML5-Elemente (<nav>, <main>, <aside>) haben diese Rollen bereits implizit. Barrierefreie Websites nutzen diese Elemente konsequent.

Tastaturnavigation: Keine Maus nötig

Viele Menschen können keine Maus nutzen. Motorische Einschränkungen, fehlende Feinmotorik, Tremor. Sie nutzen nur die Tastatur. Barrierefreie Websites müssen vollständig per Tastatur bedienbar sein.

Anforderungen an Tastaturnavigation

• Alle Funktionen erreichbar: Jeder Link, jeder Button, jedes Formularfeld muss mit Tab erreichbar sein.
• Sichtbarer Fokus: Man muss sehen, welches Element aktuell fokussiert ist. Deutlicher Outline oder Hintergrundfarbe.
• Logische Tab-Reihenfolge: Fokus springt in sinnvoller Reihenfolge. Von oben nach unten, von links nach rechts. Tastaturnavigation muss intuitiv sein.
• Skip-Links: "Zum Inhalt springen" Link am Anfang. Tastatur-Nutzer müssen nicht durch komplette Navigation tabben.

Tastatur-Shortcuts für barrierefreie Navigation

• Tab: Vorwärts zum nächsten Element. Standardmäßige Tastaturnavigation.
• Shift+Tab: Rückwärts zum vorherigen Element
• Enter/Space: Element aktivieren (Link folgen, Button klicken)
• Pfeiltasten: In Auswahlmenüs navigieren. Erweiterte Tastaturnavigation.

Kontraste & Schriftgrößen: WCAG-konform gestalten

Sehbehinderte Menschen brauchen hohe Kontraste und anpassbare Schriftgrößen.

Kontrast-Anforderungen (WCAG 2.1)

Level AA für barrierefreie Websites:
- Normaler Text: Mindestens 4.5:1 Kontrast
- Großer Text (18pt+): Mindestens 3:1 Kontrast
- UI-Komponenten: Mindestens 3:1 Kontrast

Level AAA:
- Normaler Text: Mindestens 7:1 Kontrast
- Großer Text: Mindestens 4.5:1 Kontrast

Tools zum Prüfen: WebAIM Contrast Checker, Chrome DevTools Accessibility Panel für barrierefreie Websites

Schriftgrößen für Barrierefreiheit

• Mindestgröße: 16px für Fließtext. Kleinere Schriften sind schwer lesbar für Menschen mit Sehbehinderung.
• Relative Einheiten: em, rem statt px. Nutzer können Browser-Schriftgröße ändern.
• Zoombarkeit: Text muss auf 200% zoombar sein ohne Layout-Bruch.

Mehr zu responsiver Typografie auf unserer Seite zu Responsive Webdesign.

Alt-Texte für Bilder: Bildinhalte für Screenreader beschreiben

Blinde Menschen sehen Bilder nicht. Screenreader lesen Alt-Texte vor. Ohne Alt-Text ist das Bild unsichtbar.

Gute Alt-Texte schreiben für Screenreader

• Beschreibend: Was zeigt das Bild? "Frau arbeitet am Laptop im Café" statt "Bild1.jpg". Screenreader lesen diese Beschreibung vor.
• Kontext-relevant: Warum ist das Bild da? Was soll es vermitteln?
• Kurz und prägnant: Maximal 125 Zeichen. Lange Beschreibungen in longdesc auslagern. Screenreader-optimierte Alt-Texte.
• Kein "Bild von": Screenreader sagen schon "Grafik" oder "Bild". Nicht redundant sein.

Wann kein Alt-Text?

• Dekorative Bilder: Keine inhaltliche Bedeutung? Alt-Text leer lassen: alt="". Screenreader überspringen dann.
• Icons mit Text: Wenn Icon direkt neben erklärendem Text steht, kein Alt-Text nötig. Screenreader lesen Text.

Untertitel & Transkripte für Videos

Gehörlose Menschen hören keine Videos. Schwer-Hörige verstehen schwer. Untertitel sind essentiell für barrierefreie Websites.

Untertitel (Captions)

• Closed Captions: Zuschaltbar. Nutzer kann aktivieren/deaktivieren. Ideal für YouTube, Vimeo. Barrierefreiheit für Gehörlose.
• Open Captions: Fest eingebrannt. Immer sichtbar. Gut für Social Media (Videos oft ohne Ton).

Was gehört in Untertitel?
- Gesprochener Text
- Sprecher-Identifikation bei mehreren Personen
- Relevante Geräusche: [Applaus], [Musik], [Tür schließt]

Transkripte für Barrierefreiheit

• Für Audio-Inhalte: Podcasts, Audio-Only-Content brauchen schriftliche Transkripte.
• Für Videos: Zusätzlich zu Untertiteln. Vollständiger Text zum Nachlesen für Menschen mit Behinderungen.

Formulare barrierefrei gestalten

Formulare sind oft Barrieren. Schlecht beschriftet, unklar, schwer bedienbar für Menschen mit Behinderungen.

Labels für alle Felder

• Explizite Labels: <label for="email">E-Mail-Adresse:</label> <input id="email"> - Screenreader lesen Labels vor.
• Sichtbare Labels: Nicht nur Platzhalter. Platzhalter verschwinden beim Tippen.
• Eindeutige Labels: "Name" ist unklar. "Vorname" und "Nachname" sind besser für Screenreader.

Fehlermeldungen für Screenreader

• Klar und hilfreich: "E-Mail-Adresse ungültig" statt nur "Fehler". Screenreader lesen Fehlermeldungen vor.
• Beim Feld: Fehlermeldung direkt beim fehlerhaften Feld. Nicht nur oben auf Seite.
• Screenreader-freundlich: aria-describedby verknüpft Fehler mit Feld.

Pflichtfelder kennzeichnen

• Visuell: Sternchen (*) oder "Pflichtfeld" Text
• Semantisch: required Attribut oder aria-required="true" für Screenreader
• Nicht nur Farbe: Rote Umrandung reicht nicht. Farbenblinde sehen das nicht.

Erstellung der Erklärung zur Barrierefreiheit

Öffentliche Stellen in Thüringen müssen für jede Website und jede App eine Erklärung zur Barrierefreiheit veröffentlichen. Grundlage ist das Thüringer Gesetz über den barrierefreien Zugang zu den Websites und mobilen Anwendungen öffentlicher Stellen, kurz ThürBarrWebG. Es setzt die Richtlinie (EU) 2016/2102 des Europäischen Parlaments und des Rates in Landesrecht um. Die technischen Anforderungen regelt die ThürBITVO. Sie verweist auf die europäische Norm EN 301 549 und damit auf die Web Content Accessibility Guidelines (WCAG).

Auch private Unternehmen sollten beim Thema Barrierefreiheit offen sagen, wo ihre Website steht. Wer unter das Barrierefreiheitsstärkungsgesetz fällt, muss seit dem 28. Juni 2025 ohnehin Informationen zur Barrierefreiheit seiner Dienstleistung bereitstellen.

Pflichtangaben in der Erklärung

• Stand der Vereinbarkeit mit den Anforderungen: Ist die Website vollständig, teilweise oder nicht mit den Barrierefreiheitsanforderungen vereinbar?
• Nicht barrierefreie Inhalte: Welche Bereiche sind noch nicht barrierefrei und warum? Häufig betrifft das ältere PDF-Dokumente, eingebettete Karten oder Videos ohne Untertitel.
• Erstellung der Erklärung: Wann wurde sie erstellt, und worauf beruht sie? Meist ist das eine Selbstbewertung oder ein Test durch Dritte.
• Feedback-Mechanismus: Ein Kontakt, über den Nutzer Barrieren melden und eine Rückmeldung bekommen.
• Durchsetzungsverfahren: Der Hinweis, an wen sich Nutzer wenden können, wenn ihr Anliegen nicht gelöst wird.

Muster: So klingt eine Erklärung in der Praxis

Die Formulierungen folgen einem EU-weit einheitlichen Aufbau. Ein verkürztes Beispiel für eine fiktive Gemeinde:

Wir erstellen diese Erklärung für öffentliche Stellen und Unternehmen und prüfen dafür die Website nach WCAG 2.1. Viele öffentliche Stellen ergänzen ihren Webauftritt zusätzlich um Inhalte in Leichter Sprache. Die Umsetzung der Barrierefreiheit endet nicht mit der Erklärung. Sie beschreibt den aktuellen Stand der Barrierefreiheit und wird aktualisiert, sobald sich die Website ändert. Vollständige Barrierefreiheit erreichen nur wenige Websites auf Anhieb. Wichtig ist, dass die Website Schritt für Schritt barrierefrei gestaltet wird.

Testing & Zertifizierung: BITV-Test und WAVE

Barrierefreiheit muss getestet werden. Automatische Tools und manuelle Tests ergänzen sich.

Automatische Testing-Tools für Barrierefreiheit

• WAVE (Web Accessibility Evaluation Tool): Browser-Extension. Zeigt Fehler direkt auf der Seite. Testet Barrierefreiheit.
• axe DevTools: Chrome/Firefox Extension. Detaillierte Reports über Barrierefreiheit.
• Lighthouse: In Chrome DevTools integriert. Accessibility-Score für barrierefreie Websites.
• Pa11y: Command-Line Tool für CI/CD Integration. Automatisiertes Testing der Barrierefreiheit.

Wichtig: Automatische Tools finden nur 30-40% der Probleme. Manuelle Tests sind zwingend für barrierefreie Websites.

Manuelle Tests für Barrierefreiheit

• Screenreader-Test: Mit NVDA (Windows, kostenlos) oder JAWS testen. Hören, wie blinde Menschen mit Behinderungen die Website erleben.
• Tastatur-Test: Maus abziehen. Nur mit Tastatur navigieren. Kommt man überall hin? Tastaturnavigation prüfen.
• Zoom-Test: Auf 200% zoomen. Bricht Layout? Ist Text lesbar für Menschen mit Sehbehinderung?
• Kontrast-Test: Alle Text-Hintergrund-Kombinationen prüfen.

BITV-Test & Zertifizierung in Erfurt

• BITV-Test: Standardisiertes Prüfverfahren des BIK-Verbunds, das Websites Schritt für Schritt gegen die Anforderungen der BITV 2.0 prüft.
• Kein amtliches Zertifikat: Ergebnis ist ein Prüfbericht. Bei gutem Ergebnis vergeben die Prüfstellen ein Prüfzeichen, eine staatliche Zertifizierung gibt es nicht.
• Unsere Rolle: Wir bereiten Websites auf den Test vor und arbeiten die Befunde ab. Den Test selbst führt eine unabhängige Prüfstelle durch.

WordPress Accessibility Plugins für barrierefreie Websites

Für WordPress-Websites gibt es hilfreiche Plugins für Barrierefreiheit.

Empfohlene Plugins für Barrierefreiheit

• WP Accessibility: Hilft bei grundlegenden Accessibility-Problemen. Skip-Links, Fokus-Styles, mehr.
• Accessibility Checker: Scannt Beiträge auf Accessibility-Fehler beim Schreiben. Prüft Barrierefreiheit.
• Overlay-Widgets wie UserWay: Nutzer können Kontrast und Schriftgröße anpassen. Ein solches Widget ersetzt aber keine barrierefreie Umsetzung im Code.

Wichtig: Plugins sind Hilfen, kein Ersatz für sauberen Code. Die Basis muss stimmen für barrierefreie Websites.

Häufige Fragen zur barrierefreien Website

Diese Fragen hören wir vor fast jedem Projekt.

Ihre barrierefreie Website aus Erfurt: Experten seit über 20 Jahren

Als Webdesign-Agentur in Erfurt entwickeln wir barrierefreie Websites nach WCAG 2.1 und BITV 2.0 Standards. Für öffentliche Auftraggeber in Erfurt, soziale Einrichtungen in Thüringen und zukunftsorientierte Unternehmen.

Persönliche Beratung in Erfurt, professionelle Testing und nachhaltige Lösungen zeichnen uns aus. Barrierefreiheit von Anfang an, nicht nachträglich aufgesetzt. Wir entwickeln barrierefreie Websites mit Fokus auf Screenreader-Optimierung und Tastaturnavigation.

Entdecken Sie weitere Services in Erfurt: Webdesign, WordPress Webdesign, UX/UI Design, Responsive Webdesign und Conversion-Optimierung.