Häufige Fragen (FAQ)

Digitale Barrierefreiheit ist mehr als nur ein rechtliches Muss – sie ist ein Qualitätsmerkmal moderner Websites.

Im FAQ erkläre ich kurz und knapp zentrale Begriffe, gesetzliche Grundlagen und praktische Maßnahmen für barrierefreies Webdesign, Entwicklung und redaktionelle Arbeit.

Das Ziel: digitale Angebote, die für alle Menschen zugänglich und nutzbar sind.

Grundbegriffe & Grundlagen

Digitale Barrierefreiheit oder Barrierefreiheit im Internet bedeutet, dass Websites, Apps und digitale Dokumente für alle Menschen nutzbar sind – auch für Personen mit Behinderungen. Sie sorgt dafür, dass Informationen unabhängig von Fähigkeiten, Geräten oder Hilfsmitteln zugänglich sind.

Barrierefreiheit ermöglicht Teilhabe und schließt niemanden aus. Sie verbessert die Nutzerfreundlichkeit für alle, stärkt die SEO und ist in vielen Fällen gesetzlich vorgeschrieben.

Barrierefreiheit betrifft alle: Menschen mit Seh-, Hör- oder Mobilitätseinschränkungen, ältere Personen, aber auch Nutzer*innen mit temporären Einschränkungen – z. B. bei Blendung, Lärmstörungen oder langsamer Internetverbindung.

Barrierefreiheit beschreibt die technische und gestalterische Umsetzung, die Zugänglichkeit ermöglicht. Inklusion ist das übergeordnete Ziel: die gleichberechtigte Teilhabe aller Menschen – auch im digitalen Raum.

Barrieren im Web sind Hindernisse, die Menschen daran hindern, Inhalte wahrzunehmen oder zu bedienen – etwa zu geringer Farbkontrast, fehlende Alternativtexte oder nicht erreichbare Navigationselemente.

Eine barrierefreie Website kann mit Tastatur, Screenreader oder anderen Hilfsmitteln genutzt werden, bietet verständliche Inhalte und hält technische Standards wie die WCAG ein.

„Accessibility“ ist der englische Begriff für Barrierefreiheit. Die Kurzform „A11y“ steht für „A + 11 Buchstaben + y“. Sie wird oft in der Webentwicklung genutzt und meist „Ally“ ausgesprochen.

Assistive Technologien sind Hilfsmittel, die Menschen mit Behinderungen bei der Nutzung digitaler Angebote unterstützen. Dazu zählen unter anderem Screenreader, Braillezeilen oder Sprachsteuerungssysteme.

Ein Screenreader ist eine Software, die Texte und Bedienelemente einer Website vorliest oder für andere assistive Technologien vorbereitet. Er ermöglicht blinden und sehbehinderten Menschen den Zugang zu digitalen Inhalten. Er nutzt dabei sowohl den sichtbaren Inhalt einer Website als auch den Code um zu verstehen, welche Bedeutung verschiedene Erlemente auf der Website besitzen.

Mehr über Screenreader im Blog: Was ist ein Screenreader?

Tastaturnutzer*innen bedienen Websites ausschließlich mit der Tastatur statt mit der Maus. Eine barrierefreie Website ist unter anderem vollständig mit der Tabulator-Taste navigierbar und zeigt sichtbare Fokusmarkierungen für Nutzer der Tastatur.

Usability bezeichnet die allgemeine Benutzerfreundlichkeit einer Website, während Accessibility sicherstellt, dass diese Benutzerfreundlichkeit für alle Menschen gilt – auch mit Einschränkungen oder Hilfsmitteln.

Gestaltung & Design

Beim Kontrast im Webdesign bezieht man sich vor allem auf den Kontrast zwischen Vordergrund (Icons oder Text) und dem Hintergrund. Ist dieser zu gering, werden Inhalte schwer lesbar – besonders für Menschen mit Sehschwäche. Relevant ist dabei vor allem die Helligkeit der beiden Farben, weniger der Farbwert.

Mehr zum Thema Farben und Kontraste im Blog:

Barrierefreies Webdesign stellt sicher, dass Websites für alle Menschen nutzbar sind – unabhängig von Sehvermögen, Motorik oder Technik. Es verbindet gutes Design mit klarer Struktur, ausreichend Kontrasten und verständlicher Bedienung.

Farbkontraste sorgen dafür, dass Texte und Bedienelemente gut lesbar sind. Nach WCAG 2.2 sollte der Kontrast zwischen Text und Hintergrund mindestens 4,5:1 betragen (bzw. 3:1 bei großer Schrift).

Mehr zum Thema Farben und Kontraste im Blog:

Buttons und Links müssen klar erkennbar und eindeutig beschriftet sein. Wichtige Kriterien sind ausreichender Farbkontrast, sichtbarer Fokuszustand und ein aussagekräftiger Text.

Mehr Informationen über Buttons und Links:

Gut lesbare Schriftarten sind kontrastreich, klar und ohne übermäßige Verzierungen. Serifenlose Schriften (z. B. Arial, Source Sans, Inter) funktionieren meist am besten. Auch Zeilenabstand und Schriftgröße tragen zur Barrierefreiheit bei.

Ausführliche Infos über lesbare Schriften im Blog:

Responsive Design sorgt dafür, dass sich Inhalte an verschiedene Bildschirmgrößen anpassen. Für Barrierefreiheit bedeutet das: keine horizontalen Scrollbalken, flexible Layouts und skalierbare Schriftgrößen.

Wie sich responsive Layouts mit den passenden Einheiten umsetzen lassen, gab es bereits im Blog: Relative Einheiten in CSS nutzen.

Der Fokus zeigt, welches Element aktuell per Tastatur ausgewählt ist. Ohne sichtbaren Fokus verlieren Tastaturnutzer*innen schnell die Orientierung. Ein klarer Rahmen oder eine deutliche Hervorhebung ist daher Pflicht.

Und so gestaltet man ihn gut sichtbar: Fokus auf CSS – focus, focus-within und focus-visible

Weißraum – also der freie Raum zwischen Text und Elementen – verbessert die Lesbarkeit und Orientierung. Klare Abstände helfen besonders Menschen mit kognitiven Einschränkungen oder Leseschwierigkeiten.

Eine barrierefreie Navigation ist logisch aufgebaut, mit Tastatur und Screenreader nutzbar und enthält aussagekräftige Linktexte. Skip-Links und klare Hierarchien erleichtern die Orientierung auf der Seite.

Mehr Infos zur barrierefreien Navigation im Blog:

Skip-Links („Zum Inhalt springen“) ermöglichen es Nutzern und Nutzerinnen, per Tastatur direkt zum Hauptinhalt zu springen, ohne die Navigation mehrfach durchlaufen zu müssen. Sie sind ein einfaches, aber wichtiges Accessibility-Feature. Sie erhalten als erstes Element einer Seite den Tastaturfokus und werden dann sichtbar.

Icons sollten immer eine eindeutige Bedeutung haben und durch Text ergänzt werden. Wenn ein Icon allein steht, braucht es eine Alternativbeschreibung, z. B. über aria-label oder title.

Mehr über die Barrierefreiheit von Icons im Blog: Icon-Buttons richtig beschriften – so werden sie mit aria-label und co. barrierefrei

Entwicklung & Technik

Semantisches HTML nutzt Elemente entsprechend ihrer Bedeutung – zum Beispiel <header>, <nav>, <ul> oder <main>. So verstehen Screenreader und Suchmaschinen die Struktur einer Seite besser als bei der Verwendung von Elementen wie <div> und <span>.

ARIA-Attribute (Accessible Rich Internet Applications) ergänzen HTML, um Screenreadern zusätzliche Informationen zu liefern. Sie beschreiben Rollen, Zustände oder Namen der Elemente.

Spannende uns lehrreiche Artikel über ARIA im Blog:

ARIA ist hilfreich, wenn native HTML-Elemente nicht ausreichen. Wo HTML bereits die nötige Funktion bietet, sollte kein ARIA eingesetzt werden – „Don’t use ARIA“ („verwende kein ARIA“) lautet die erste und wichtigste Regel.

Spannende uns lehrreiche Artikel über ARIA im Blog:

Die Tab-Reihenfolge bestimmt, in welcher Reihenfolge fokussierbare Elemente per Tastatur erreichbar sind. Eine logische Tab-Reihenfolge sorgt dafür, dass Inhalte verständlich und navigierbar bleiben.

Mit tabindex lässt sich diese Reienfolge verändern. Wieso das nicht immer sinnvoll ist, gibt es im Artikel Den HTML tabindex richtig einsetzen zu lesen.

Ein Label beschreibt das Eingabefeld eines Formulars und wird von Screenreadern vorgelesen. Ohne Label wissen Nutzer*innen nicht, was ein Feld bedeutet und was von ihnen erwartet wird.

Mehr Informationen über barrierefreie Formulare:

Barrierefreie PDFs haben eine logische Lesereihenfolge, Alternativtexte für Bilder und korrekt ausgezeichnete Elemente. Sie werden am besten direkt aus barrierefreien Quell-Dokumenten erzeugt.

Eine Anleitung zur Erstellung barrierefreier PDF gab es bereits in einer kleinen Blog-Reihe:

Ein Alternativtext, oder auch Alt-Text beschreibt den Inhalt eines Bildes für Menschen, die es nicht sehen können. Er wird von Screenreadern vorgelesen und erscheint, wenn Bilder nicht geladen werden. Er sollte deshalb die wichtigsten Aspekte des Bildes beschreiben.

Weiterlesen über gute Alternativtexte:

Der Alternativtextext ersetzt das Bild inhaltlich und wird von Screenreadern genutzt. Das Title-Attribut ist optional und zeigt zusätzliche Hinweise per Tooltip. Es darf den Alternativtext nicht einfach wiederholen.

Weiterlesen über gute Alternativtexte:

WAI-ARIA ist eine Spezifikation des W3C, die beschreibt, wie Webanwendungen für Screenreader zugänglich gemacht werden können. Sie ergänzt semantisches HTML durch Rollen und Zustände für interaktive Elemente.

Mehr über ARIA erfahren:

Progressive Enhancement bedeutet, Websites zunächst mit einfacher, robuster HTML-Basis zu entwickeln und danach schrittweise um CSS, JavaScript oder Animationen zu erweitern. So bleibt die Seite auch ohne Zusatzfunktionen nutzbar.

Redaktion & Inhalte

Sprechende Überschriften fassen den folgenden Inhalt klar zusammen – auch wenn man den Text darunter nicht liest. Sie helfen beim schnellen Erfassen von Inhalten und verbessern gleichzeitig SEO und Screenreader-Navigation.

Aber: Nicht jeder große Text ist auch eine Überschrift! Mehr dazu im Artikel Gliederung von Texten – großer Text macht noch keine Überschrift.

Leicht verständliche Sprache bedeutet, Texte klar, strukturiert und ohne Fachjargon zu schreiben. Kurze Sätze, aktive Formulierungen und bekannte Wörter erleichtern das Lesen für alle.

In der Barrierefreiheit unterscheiden wir zwischen Leichter und Einfacher Sprache. Hier gibt es mehr darüber zu erfahren:

Leichte Sprache folgt festen Regeln und richtet sich an Menschen mit Lernschwierigkeiten. Einfache Sprache ist weniger streng geregelt, aber allgemein gut verständlich. Beide erhöhen die digitale Zugänglichkeit.

Mehr Informationen zu beiden Sprachvarianten.

Links sollten ihr Ziel klar beschreiben. „Mehr zu barrierefreiem Design“ hilft mehr als „Hier klicken“. So verstehen Screenreader-Nutzer*innen den Zusammenhang, ohne den Kontext lesen zu müssen.

Weitere Tipps über barrierefreie Linktexte: Einen barrierefreien Linktext verfassen – von „Hier klicken“ zu Klartext

Barrierefreie Videos haben Untertitel, Audiodeskriptionen und ggf. Transkripte. So werden Inhalte für Menschen mit Hör- oder Sehbehinderungen zugänglich.

Und so werden Untertitel barrierefrei erstellt und eingebunden: Wie nutze ich Untertitel für mein Video richtig?

Untertitel geben den gesprochenen Text und wichtige Geräusche eines Videos wieder. Sie sind nötig, wenn Toninhalte für alle Nutzer*innen verständlich sein sollen.

Sie wollen mehr über barrierefreie Untertitel in Videos wissen? Dann lesen Sie im Blog: Wie nutze ich Untertitel für mein Video richtig?.

Eine Audiodeskription ist eine zusätzliche Tonspur, die visuelle Inhalte eines Videos beschreibt. Sie macht Filme, Tutorials oder Präsentationen auch für blinde Menschen verständlich. Sie ist damit praktisch das Gegenstück zum Untertitel.

Barrierefreie Social-Media-Beiträge nutzen Alternativtexte für Bilder, Untertitel für Videos und klare Sprache. Emojis und Hashtags sollten sparsam und sinnvoll eingesetzt werden.

Wieso das so ist und wieso fetter Text in Social Media zum Problem werden kann: Barrierefreiheit in den sozialen Netzwerken – eine Checkliste für barrierefreie Social Media Posts

Gesetze & Standards

Das Barrierefreiheitsstärkungsgesetz verpflichtet seit Juni 2025 auch private Unternehmen, digitale Produkte und Dienstleistungen barrierefrei anzubieten. Ziel ist ein einheitlicher europäischer Standard für digitale Zugänglichkeit.

Alle wichtigen Infos rund um das BFSG finden Sie in meinem Artikel mit Rechtsanwältin Sabine Brumme.

Die BITV 2.0 (Barrierefreie-Informationstechnik-Verordnung) regelt, wie Websites und mobile Anwendungen öffentlicher Stellen in Deutschland barrierefrei gestaltet werden müssen. Sie basiert auf den internationalen WCAG-Richtlinien.

Die EU-Webrichtlinie 2016/2102 legt europaweit fest, dass öffentliche Stellen ihre Websites und Apps barrierefrei gestalten müssen. Sie ist die rechtliche Grundlage für die deutsche BITV 2.0.

Die WCAG sind internationale Richtlinien des W3C für barrierefreie Webinhalte. Sie definieren vier Prinzipien – wahrnehmbar, bedienbar, verständlich und robust – und konkrete Erfolgskriterien für unterschiedliche Konformitätsstufen (A, AA, AAA).

Mehr über diese Kriterien und die Zukunft der WCAG:

Die WCAG 2.2 ist die aktuelle Version der Web Content Accessibility Guidelines. Sie erweitert WCAG 2.1 um neue Anforderungen, z. B. zu Tastaturbedienung, Fokusanzeige und einfacher Navigation. An den WCAG 3.0 wird aktuell gearbeitet, eine finale Veröffentlichung wird aber frühetstens in ein paar Jahren erwartet.

Mehr über die Geschichte und Zukunft der WCAG erfahren:

Seit Juni 2025 müssen viele digitale Produkte – etwa Online-Shops, Apps und E-Books – barrierefrei nutzbar sein. Betroffen sind Unternehmen, die Waren oder Dienstleistungen an Verbraucher*innen (B2C-Geschäft) anbieten. Ausnahmen gibt es für kleine Unternehmen.

Hier gibt es alle Infos zur rechtlichen Einordnung und den teschnischen Anforderungen: Barrierefreie Websites werden Pflicht – Die wichtigsten Infos zum BFSG.

Die EN 301 549 ist eine europäische Norm, die technische Anforderungen an die Barrierefreiheit von Informations- und Kommunikationstechnologien beschreibt. Sie dient als Grundlage für Gesetze wie die BITV 2.0 und das BFSG.

Die WCAG sind ein Standard und kein Gesetz. Öffentliche Stellen in Deutschland sind aber durch die BITV 2.0 verpflichtet, ihre digitalen Angebote barrierefrei zu gestalten. Ab 2025 gilt mit dem BFSG eine Pflicht auch für viele private Anbieter.

Die Erklärung zur Barrierefreiheit informiert Nutzer*innen über den Barrierefreiheitsstatus einer Website oder App. Sie ist gesetzlich vorgeschrieben und muss Angaben zu erfüllten Standards und Kontaktmöglichkeiten enthalten.

Mehr Details gefälligst? Hier gibt es die wichtigsten Informationen rund um den Inhalt und die Erstellung der Erklärung: Wie erstelle ich eine Barrierefreiheitserklärung?.

Tools, Tests & Praxis

Eine Website lässt sich nicht vollständig mit automatischen Tools testen. Manuelle Tests durch Profis und oft auch Betroffene sind unerlässlich um Barrierefreiheit zu garantieren.

Accessibility-Checker prüfen Websites auf typische Barrierefreiheitsfehler, etwa fehlende Alternativtexte oder schlechte Kontraste. Bekannte Tools sind WAVE, axe DevTools oder Lighthouse. Diese testen aber nur auf 30-60% der Kriterien und können deshalb keine vollumfängliche Barrierefreiheit garantieren.

Beliebte Screenreader sind JAWS und NVDA für Windows, VoiceOver für macOS und iOS sowie TalkBack für Android. Sie lesen Inhalte vor und machen Websites für blinde Nutzer*innen zugänglich.

Mehr Details zu Screenreadern: Was ist ein Screenreader?.

Die Chrome DevTools bieten eingebaute Funktionen zur Barrierefreiheitsprüfung. Beim Untersuchen eines Elements werden Informationen wie Name, Rolle und Kontrast direkt angezeigt. Im Reiter „Zugänglichkeit“ findest du eine detaillierte Übersicht zu allen Accessibility-Eigenschaften, zum Beispiel semantische Struktur, ARIA-Attribute, Tastaturfokus und Kontrastverhältnisse. So lassen sich Barrierefreiheitsprobleme gezielt analysieren – ganz ohne zusätzliche Tools.

Typische Fehler sind fehlende Alternativtexte, unzureichende Kontraste, unbeschriftete Formulare und nicht sichtbare Fokusmarkierungen. Viele lassen sich mit einfachen Anpassungen beheben.

Sie wollen schnell die ersten großen Stolpersteine beheben? Barrierefreie Website selbst umsetzen – ein Leitfaden

Ein Accessibility Audit ist eine systematische Überprüfung der Barrierefreiheit. Er kombiniert automatische Prüfungen mit manuellen Tests und bewertet, ob eine Website den WCAG-Standards entspricht. Je nach Ziel und Budget werden dabei auch Menschen mit verschiedenen Einschränkungen einbezogen um gezielt die nicht nur theoretische, sondern tatsächliche Barrierefreiheit zu überprüfen und Fehler zu finden, die nicht in den WCAG abgefragt werden.

Strategie & Organisation

Zuerst sollten Maßnahmen umgesetzt werden, die die Nutzung stark beeinträchtigen – etwa fehlende Alternativtexte oder nicht erreichbare Navigation. Tipp: Konzentrieren Sie sich zuerst auf die Dinge, die die Website im Ganzen betreffen. Danach folgen Verbesserungen in Design, Struktur und Sprache und die Optimierung gezielter Unterseiten.

Barrierefreiheit verbessert die Nutzererfahrung, erreicht mehr Menschen und stärkt die Markenwahrnehmung. Sie senkt Supportaufwand, erhöht die Reichweite und kann auch für Ausschreibungen oder Förderungen relevant sein.

Dazu verbessert sie die Auffindbarkeit der Seite bei Suchmaschinen und sorgt so für mehr Nutzer und Nutzerinnen.

Mehr Informationen über den Zusammenhang zwischen Barrierefreiheit und SEO gibt es im Blog: Barrierefreiheit und SEO – Freund oder Feind?

Barrierefreiheit sollte von Anfang an Teil des Designprozesses sein. Das bedeutet: Kontraste, Struktur und Bedienbarkeit werden schon in Wireframes und Prototypen berücksichtigt, nicht erst am Ende der Entwicklung. Das spart langfristig Zeit, Geld und Nerven.

Accessibility by Design beschreibt den Ansatz, Barrierefreiheit von Beginn an mitzudenken. Anstatt Barrieren nachträglich zu beheben, wird sie als fester Bestandteil von Konzept, Design und Entwicklung verstanden.

Redakteure und Redakteurinnen sollten lernen, wie sie verständliche Texte schreiben, Alternativtexte formulieren und Überschriften richtig einsetzen. Kurze Schulungen und klare Redaktionsrichtlinien helfen, Barrierefreiheit dauerhaft umzusetzen. Denn die Barrierefreiheit einer Website ist mit der Freischaltung nicht getan, sie muss laufend aufrecht erhalten werden.

Eine Accessibility-Policy ist eine interne Richtlinie, die Ziele, Verantwortlichkeiten und Standards zur Barrierefreiheit festlegt. Sie dient als Grundlage für einheitliche Qualität und kontinuierliche Verbesserung.