--- title: "Barrierefreiheit" url: "https://www.insideuxdesign.com/de/glossar/barrierefreiheit" language: "de" description: "Was bedeutet Barrierefreiheit im Web? Einfach erklärt mit Beispiel, Gesetzeslage und Praxistipps. Lies, wie du Barrieren auf deiner Website findest." published: "2026-10-14T09:50:31+02:00" updated: "2026-10-14T13:02:42+02:00" --- # Barrierefreiheit Barrierefreiheit bedeutet, dass Websites, Apps und digitale Dokumente so gestaltet sind, dass alle Menschen sie nutzen können, auch mit einer Seh-, Hör-, motorischen oder kognitiven Behinderung. - **Buchstabe:** B - **Englischer Begriff:** Accessibility UX-Glossar · engl. Accessibility # Barrierefreiheit Barrierefreiheit bedeutet, dass Websites, Apps und digitale Dokumente so gestaltet sind, dass alle Menschen sie nutzen können, auch mit einer Seh-, Hör-, motorischen oder kognitiven Behinderung. Stell dir vor, du willst abends noch schnell ein Bahnticket buchen. Der Button „Weiter“ ist hellgrau auf weißem Grund, das Datumsfeld lässt sich nur mit der Maus bedienen, und eine Fehlermeldung erscheint als kleiner roter Rahmen ohne Text. Nervig, aber machbar. Jetzt stell dir dieselbe Seite für jemanden vor, der blind ist und mit Tastatur und Sprachausgabe arbeitet. Für diese Person endet die Buchung genau an diesen Stellen. Barrierefreiheit sorgt dafür, dass das nicht passiert. ## Einfach erklärt Barrierefreiheit bedeutet, dass digitale Angebote wie Websites, Apps oder PDFs so gestaltet sind, dass alle Menschen sie wahrnehmen, verstehen und bedienen können, auch mit einer Behinderung. Im Englischen heißt das *Accessibility*, oft abgekürzt als „a11y“: Zwischen dem a und dem y stehen elf Buchstaben. Ein Vergleich aus dem Alltag: Eine Rampe neben der Treppe hilft Menschen im Rollstuhl. Sie hilft aber auch allen mit Kinderwagen oder Rollkoffer. Digitale Barrierefreiheit funktioniert genauso. Die Web Accessibility Initiative des W3C nennt ausdrücklich auch Menschen ohne Behinderung, die davon profitieren: ältere Menschen, Menschen mit gebrochenem Arm und alle, die ihr Smartphone in grellem Sonnenlicht oder ohne Ton benutzen. ## Welche Barrieren es gibt Laut Weltgesundheitsorganisation (WHO) leben weltweit rund 1,3 Milliarden Menschen mit einer erheblichen Behinderung, etwa jeder sechste Mensch. Ihre Hürden im Netz sind sehr unterschiedlich: - **Sehen:** Blinde Menschen nutzen einen [Screenreader](https://www.insideuxdesign.com/de/glossar/screenreader), der Inhalte vorliest. Menschen mit Sehbehinderung vergrößern den Bildschirm oder brauchen starke Kontraste. - **Hören:** Videos ohne Untertitel bleiben für gehörlose Menschen stumm. - **Motorik:** Wer die Hände kaum bewegen kann, bedient Geräte per Tastatur, Sprachsteuerung oder Schalter. Winzige Klickflächen werden dann zum Hindernis. - **Kognition:** Verschachtelte Sätze, unklare Abläufe und knappe Zeitlimits überfordern Menschen mit Lernschwierigkeiten oder Konzentrationsproblemen. ## Regeln und Gesetze Der wichtigste Maßstab sind die [WCAG](https://www.insideuxdesign.com/de/glossar/wcag), die Web Content Accessibility Guidelines des W3C. Sie beschreiben prüfbare Kriterien, zum Beispiel ein Kontrastverhältnis von mindestens 4,5:1 für normalen Text. In Deutschland gilt seit dem 28. Juni 2025 das Barrierefreiheitsstärkungsgesetz (BFSG). Es setzt den European Accessibility Act (EU-Richtlinie 2019/882) um und verpflichtet auch viele Unternehmen, etwa Onlineshops, Banken und Buchungsportale, die sich an private Kundschaft richten. Kleinstunternehmen, die Dienstleistungen anbieten, sind ausgenommen. Mehr dazu im Artikel [BFSG in der Praxis: Was das Barrierefreiheitsstärkungsgesetz für Websites und Apps bedeutet](https://www.insideuxdesign.com/de/blog/bfsg-in-der-praxis-barrierefreiheitsstaerkungsgesetz-websites-apps). ## Ein Beispiel Ein Beispiel: Ein kleiner Lieferdienst hat ein Bestellformular, dessen Felder nur per Platzhaltertext beschriftet sind. Sobald jemand tippt, verschwindet der Hinweis. Der Screenreader sagt nur „Eingabefeld“, und der Bestellbutton ist ein Bild ohne Alternativtext. Nach der Überarbeitung hat jedes Feld ein sichtbares Label, Fehlermeldungen sagen in Worten, was fehlt, und der Button ist ein echter Button mit Text. Für Menschen mit Screenreader wird die Bestellung damit überhaupt erst möglich. Und alle anderen füllen es schneller aus, weil sie nicht mehr raten müssen. ## Häufige Missverständnisse Barrierefreiheit ist kein Extra für eine kleine Gruppe und kein Häkchen, das ein Plugin setzt. Overlay-Werkzeuge, die eine Barrierefreiheits-Toolbar einblenden, beheben fehlende Labels oder Tastaturfallen nicht. Und barrierefrei heißt nicht langweilig: Es geht um Struktur, Kontrast und klare Bedienung, nicht um den Verzicht auf Gestaltung. Warum das Thema weit über Farben hinausgeht, zeigt der Artikel [Warum Barrierefreiheit mehr als Kontrast und Größe ist](https://www.insideuxdesign.com/de/blog/warum-barrierefreiheit-mehr-als-kontrast-und-groesse-ist). ## In der Praxis - **Leg die Maus weg.** Bediene deine Website einmal nur mit Tab, Enter und Pfeiltasten. Wenn du nicht siehst, wo der Fokus ist, oder irgendwo festhängst, hast du eine Barriere gefunden. - **Prüf Kontraste schon im Entwurf.** Teste Farbkombinationen, bevor das Design steht. Später umzufärben ist deutlich aufwendiger. - **Beschreib Bilder sinnvoll.** Inhaltliche Bilder brauchen einen Alternativtext, der ihre Aussage wiedergibt. Rein dekorative Bilder bekommen ein leeres alt-Attribut, damit der Screenreader sie überspringt. ## Verwandte Begriffe [WCAG](https://www.insideuxdesign.com/de/glossar/wcag), [Screenreader](https://www.insideuxdesign.com/de/glossar/screenreader), [Fitts’ Law](https://www.insideuxdesign.com/de/glossar/fitts-law) ## Quellen - [W3C Web Accessibility Initiative: Introduction to Web Accessibility. W3C, 2026](https://www.w3.org/WAI/fundamentals/accessibility-intro/) - [World Health Organization: Disability. Fact Sheet, 2023](https://www.who.int/news-room/fact-sheets/detail/disability-and-health) - [Bundesministerium der Justiz: Barrierefreiheitsstärkungsgesetz (BFSG). gesetze-im-internet.de, 2021](https://www.gesetze-im-internet.de/bfsg/) ## Weitere Begriffe [ ### A/B-Test Ein A/B-Test ist ein Experiment, bei dem zwei Varianten einer Seite oder eines Elements gleichzeitig an zufällig aufgeteilte Besuchende ausgespielt werden. So entscheidest du anhand echter Daten, welche Variante besser funktioniert. ](https://www.insideuxdesign.com/de/glossar/a-b-test) [ ### Affordance Eine Affordance beschreibt, welche Handlung ein Objekt möglich macht und ob Menschen das erkennen: Ein Button lädt zum Drücken ein, ein Griff zum Ziehen. ](https://www.insideuxdesign.com/de/glossar/affordance) [ ### Card Sorting Card Sorting ist eine Research-Methode, bei der Menschen Begriffe auf Karten in Gruppen sortieren. So siehst du, wie sie Inhalte gedanklich ordnen, und kannst eine verständliche Navigation planen. ](https://www.insideuxdesign.com/de/glossar/card-sorting) [ ### Cognitive Load Cognitive Load ist die geistige Anstrengung, die nötig ist, um eine Oberfläche zu verstehen und zu bedienen. Je weniger unnötige Denkarbeit ein Design verlangt, desto leichter fällt die eigentliche Aufgabe. ](https://www.insideuxdesign.com/de/glossar/cognitive-load) [ ### Dark Patterns Dark Patterns sind Gestaltungstricks, die Menschen zu Entscheidungen drängen, die sie eigentlich nicht treffen wollen, etwa versteckte Kündigungen oder vorausgewählte Zusatzoptionen. ](https://www.insideuxdesign.com/de/glossar/dark-patterns) [ ### Design System Ein Design System ist ein gemeinsamer Baukasten aus wiederverwendbaren Bausteinen und Regeln. Damit gestalten und entwickeln Teams Oberflächen, die überall einheitlich aussehen und sich gleich verhalten. ](https://www.insideuxdesign.com/de/glossar/design-system) [ ### Fitts’ Law Fitts’ Law beschreibt, wie lange es dauert, ein Ziel mit einer Bewegung zu treffen: Je größer und näher ein Ziel ist, desto schneller und sicherer erreichst du es. Im UX-Design hilft das, Buttons und Links richtig zu dimensionieren und zu platzieren. ](https://www.insideuxdesign.com/de/glossar/fitts-law) [ ### Gestaltgesetze Die Gestaltgesetze beschreiben, wie unser Gehirn einzelne Elemente automatisch zu Gruppen und Formen zusammenfasst. Im Design helfen sie, Layouts ohne zusätzliche Linien verständlich zu gliedern. ](https://www.insideuxdesign.com/de/glossar/gestaltgesetze) [ ### Heuristische Evaluation Bei einer heuristischen Evaluation prüfen Fachleute eine Oberfläche anhand anerkannter Faustregeln für gute Bedienbarkeit. So findest du schnell und günstig typische Schwachstellen, noch bevor echte Menschen testen. ](https://www.insideuxdesign.com/de/glossar/heuristische-evaluation) [ ### Hick’s Law Hick’s Law besagt, dass Entscheidungen länger dauern, je mehr gleichwertige Optionen zur Wahl stehen. Die Zeit wächst dabei aber deutlich langsamer als die Zahl der Optionen. ](https://www.insideuxdesign.com/de/glossar/hicks-law) [ ### Informationsarchitektur Informationsarchitektur beschreibt, wie Inhalte einer Website oder App strukturiert und benannt sind. Sie sorgt dafür, dass Menschen finden, was sie suchen, und wissen, wo sie gerade sind. ](https://www.insideuxdesign.com/de/glossar/informationsarchitektur) [ ### Jobs to be Done Jobs to be Done ist ein Denkansatz, der fragt, welche Aufgabe Menschen mit einem Produkt erledigen wollen und welchen Fortschritt sie in ihrer Situation suchen. Im Mittelpunkt stehen Kontext und Motivation statt Merkmale wie Alter oder Beruf. ](https://www.insideuxdesign.com/de/glossar/jobs-to-be-done)