Ab dem 28.6.2025 müssen Websites* barrierefrei sein!
Accesibility in 5 Schritten – Ihre Roadmap zur digitalen Barrierefreiheit
Am 28.6.2025 tritt das “Barriererfreiheitsstärkungsgesetz” in Kraft! Wir gestalten Ihre Website barrierefrei!

Wieso ist digitale Barrierefreiheit so relevant?
Das Barrierefreiheitsstärkungsgesetz (BFSG) setzt eine EU-Richtlinie aus 2019 zur Barrierefreiheit von Produkten und Dienstleistungen (auch als EU Barrierefreiheitsrichtlinie bekannt) für Deutschland um. Es hat zum Ziel, die Barrierefreiheit von Produkten und Dienstleistungen zu erhöhen und so die Teilhabe von Menschen mit Behinderungen zu fördern.
Analyse Ihrer Website hinsichtlich Barrierefreiheits-Aspekten
Abstimmung/Beratung der wichtigsten Maßnahmen
Umsetzung von Maßnahmen zur Optimierung der Barrierefreiheit
Abstimmung/Beratung ggf. gewünschter weiterer Maßnahmen
Support bei der Erstellung einer Barrierefreiheits-Erklärung
Ist Ihre Website schon barrierefrei?
Typische Optimierungsbereiche für Barrierefreiheit
Bilder
Warum wichtig:
Bilder sind ein zentraler Bestandteil vieler Websites – doch für Menschen mit Sehbehinderungen oder Screenreader-Nutzer:innen bleiben sie ohne Kontext unzugänglich. Damit Bildinhalte dennoch verstanden werden, sind sogenannte Alternativtexte notwendig.
Typische Herausforderungen:
-
Bilder enthalten wichtige Informationen, aber der
alt
-Text fehlt ganz. -
Der Alternativtext ist zu allgemein („Bild“) oder zu technisch („img_12345.jpg“).
-
Rein dekorative Bilder haben trotzdem einen
alt
-Text – was Screenreader unnötig stört.
Empfohlene Lösung:
Verwende für inhaltlich relevante Bilder präzise beschreibende alt
-Texte. Beispiel:
Statt alt="Foto"
→ besser alt="Rollstuhlfahrer nutzt Aufzug in Bürogebäude"
.
Für rein dekorative Bilder: alt=""
verwenden und ggf. per aria-hidden="true"
ausblenden.
Links & Buttons
Warum wichtig:
Links und Schaltflächen (Buttons) sind essenziell für die Navigation. Für Nutzer:innen, die auf Tastatur oder Screenreader angewiesen sind, muss klar erkennbar sein, wohin ein Link führt – ohne erst den Kontext „erraten“ zu müssen.
Typische Herausforderungen:
-
Links mit unklarer Benennung wie „mehr“, „hier klicken“ oder nur ein Symbol.
-
Buttons ohne sichtbaren oder per Screenreader lesbaren Text.
-
Gleicher Linktext für unterschiedliche Ziele – z. B. mehrere „Mehr erfahren“-Links auf einer Seite.
Empfohlene Lösung:
Links und Buttons sollten selbsterklärend beschriftet sein. Beispiel:
Statt „mehr“ → besser „Mehr über unser Team erfahren“.
Buttons mit Icons zusätzlich mit aria-label
oder screenreader-text versehen.
Farbkontraste
Warum wichtig:
Ein zu geringer Farbkontrast erschwert das Lesen – vor allem für Menschen mit Sehschwäche, altersbedingten Einschränkungen oder Farbenblindheit. Auch mobile Nutzung bei Sonnenlicht profitiert von guten Kontrasten.
Typische Herausforderungen:
-
Hellgraue Texte auf weißem Hintergrund
-
Primäre Unterscheidung nur über Farbe (z. B. grün = aktiv, rot = inaktiv)
-
Farbige Buttons ohne ausreichenden Kontrast zu angrenzenden Flächen
Empfohlene Lösung:
Ein Mindestkontrastverhältnis von 4.5:1 für normalen Text und 3:1 für große Schrift einhalten (gemäß WCAG 2.1 AA).
Informationen niemals ausschließlich über Farbe kommunizieren – z. B. zusätzlich durch Symbole oder Textelemente.
Tastatur-Navigation
Warum wichtig:
Viele Nutzer:innen mit motorischen Einschränkungen, Screenreadern oder alternativen Eingabegeräten sind auf vollständige Tastaturbedienung angewiesen. Jede Funktion der Website muss ohne Maus erreichbar sein.
Typische Herausforderungen:
-
Navigationsmenüs oder Filterelemente sind mit der Tabulator-Taste nicht erreichbar.
-
Die Fokus-Reihenfolge ist unlogisch (z. B. springt vom Footer zurück nach oben).
-
Visuelle Fokusmarkierungen fehlen oder sind kaum sichtbar.
Empfohlene Lösung:
Sorge dafür, dass alle interaktiven Elemente per Tastatur erreichbar und in logischer Reihenfolge fokussierbar sind. Verwende sichtbare Fokusrahmen (:focus
-Stil) und teste die Bedienbarkeit regelmäßig ohne Maus.