Digitale Barrierefreiheit: Beispiele und Best Practices

Tobias Roppelt 19.3.2024

Unser Gastautor Tobias erklärt dir alles, was du über digitale Barrierefreiheit wissen musst und warum sie uns wirklich alle betrifft

Digitale Barrierefreiheit umzusetzen ist nicht nur inklusiv, fair und sozial (und damit ziemlich dufte). Es minimiert auch Hürden und hilft Inhalte klar zu strukturieren und so für alle leichter zugänglich zu machen. Und wenn dich das noch nicht von der Notwendigkeit überzeugt: Ab dem 28.06.2025 wird digitale Barrierefreiheit sogar gesetzlich verpflichtend. Einer von vielen guten Gründen, diesen Artikel aufmerksam zu lesen und im Anschluss direkt barrierefrei durchzustarten!

Was bedeutet digitale Barrierefreiheit?

Grafik 1 Barrierefreiheit ist ei.jpg

Digitale Barrierefreiheit ermöglicht allen Menschen, unabhängig von ihren körperlichen oder geistigen Fähigkeiten, Webseiten und digitale Anwendungen gleichberechtigt zu nutzen. Erstrebenswert? Yes! 

Wie der Name schon sagt, sorgt digitale Barrierefreiheit dafür, dass digitale Barrieren abgebaut werden. Dadurch wird es zum Beispiel auch blinden oder querschnittsgelähmten Menschen ermöglicht, News zu lesen, soziale Medien zu nutzen oder online ihre Einkäufe zu erledigen.

Digitale Barrieren und, wen sie betreffen

Die meisten von uns erkennen eine digitale Barriere nicht mal, wenn wir sie sehen! Das kann man aber keinem verübeln, schließlich sind fehlende Alternativ-Texte für Bilder oder schlecht beschriebene Linktexte für viele (oft) keine Barrieren. 

Es ist einfach schwer, sich in die Situation von anderen hineinzuversetzen, besonders wenn uns das Problem selbst nicht betrifft oder wir es gar nicht kennen. Man nennt dieses Phänomen auch Empathy-Gap. Sie beschreibt die Kluft zwischen unserer Wahrnehmung und der Wahrnehmung anderer. Je weiter die Erfahrungen und Wahrnehmungen auseinander liegen, desto größer die Kluft. Und desto weniger können wir nachfühlen, was eine andere Person durchmacht. 

Grundlage für barrierefreies Denken und Umsetzen ist also die Fähigkeit, die Situation und
Umstände einer behinderten Person zumindest einigermaßen nachvollziehen zu können. Ein erster Babyschritt in diese Richtung, ist zu verstehen, was eine digitale Barriere
überhaupt ist.

Digitale Barrieren

Als digitale Barriere gilt, was Menschen mit Behinderung die Nutzung von Webseiten und Apps
erschwert oder teilweise unmöglich macht. 

Ein paar Beispiele hierfür sind:

  • Geringe Kontraste bei der Farbwahl: grauer Text auf weißem Hintergrund z. B. kann für Personen mit Sehschwäche schwer lesbar sein.
  • Fehlende oder nichtssagende Alternativtexte für Bilder: Gerade bei Diagrammen oder erklärenden Grafiken fehlen Screenreader-Nutzenden ohne Alt-Texte wichtige Informationen.
  • Fehlende Untertitel bei audiovisuellen Inhalten: Nicht untertitelte Videos können für schwerhörige oder gehörlose Menschen unverständlich sein.
  • Zu kleine Buttons: Winzige Schaltflächen auf Webseiten sind für Nutzer*innen mit motorischen Beeinträchtigungen schwer zu bedienen.
  • Navigation, die nur mit der Maus ansteuerbar ist: Dies macht Seiten unzugänglich für Menschen, die auf Tastatur-Navigation angewiesen sind.
  • Komplexe, unübersichtliche Layouts und Sprache: Überfüllte Darstellungen mit komplexer Sprache können Nutzer*innen mit kognitiven Einschränkungen überfordern.

Grafik 2 Button (1).jpg

Seit über 25 Jahren beschäftigen sich die Leute schon mit der Frage, was Menschen mit Behinderung das Nutzen von Webseiten erschwert und wie man ihnen das Leben erleichtern kann. Das Ergebnis dieser Bemühungen sind die sogenannten WCAG-Richtlinien. Die WCAG (Level AA) sind auch die Grundlage dafür, woran sich Firmen ab Mitte 2025 halten müssen, wenn das Barrierefreiheits-Stärkungsgesetz in Kraft tritt. Mehr dazu findest du weiter unten.

Digitale Barrieren betreffen uns alle!

Grafik 3 Barrieren betreffen uns.jpg

Eine Faustformel der digitalen Barrierefreiheit ist: Für zehn Prozent der Bevölkerung ist sie unerlässlich, für mindestens 30 Prozent notwendig und für 100 Prozent hilfreich. Hier findest du einen Beitrag von der Pressesprecherin der Aktion Mensch zu dem Thema.

Das kommt zum einen daher, dass es nicht nur permanente Behinderungen gibt. Du kannst durch einen Unfall beide Arme verlieren und so permanent eingeschränkt sein. Du kannst dir aber auch beide Arme brechen und temporär beeinträchtigt sein. Oder du bist situativ beeinträchtigt, weil du gerade einfach ein Baby auf dem Arm hast und es wäre super, dein Licht per Sprachsteuerung anschalten zu können. 

Besonders der letzte Punkt zeigt, dass Features, die eigentlich für die Barrierefreiheit entwickelt wurden, für jeden in seinem Alltag hilfreich sind. Das Autocomplete-Feature von Google ist ein solches Beispiel. Die Funktion, Wörter und Sätze zu vervollständigen, wurde mitunter durch Barrierefreiheit inspiriert und ist jetzt eine Funktion, die fast jeder Mensch in fast jeder Anwendung mehrfach am Tag nutzt.

Abschließend hierfür, muss es dir irgendwer leider mal sagen: Du wirst alt!
Was hat das mit digitaler Barrierefreiheit zu tun? Nur 3 % der Behinderungen sind angeboren. Die restlichen 97 % entstehen im Laufe des Lebens. Und über 78 % der Behinderungen betreffen Menschen über 55 Jahren. Mit digitaler Barrierefreiheit tust du also nichts anderes, als für deine Zukunft vorzusorgen. Denn je älter du wirst, ist leider eins ziemlich sicher: irgendwann erwischt es jeden!

Vorteile digitaler Barrierefreiheit für Wirtschaftsakteure

Hand aufs Herz, wir wollen alle nur Geld! Naja, okay, wir nicht und du nicht, aber dein Chef wahrscheinlich! Deswegen müssen wir uns ein paar bessere Gründe einfallen lassen als “die Inklusion aller”. Sich um digitale Barrierefreiheit zu kümmern, kann sich kurz- und langfristig für dein Unternehmen auszahlen.

Grafik 4 Kosten+Nutzen.jpg

Mehr Menschen ansprechen

Für dein Unternehmen bedeutet das eine potenzielle Erweiterung deiner Zielgruppe um 10 bis 20 %, da jetzt auch Menschen mit Behinderung deine Angebote wahrnehmen und deine Produkte kaufen können. 

Und auch für das Finden neuer . Mitarbeiter*innen kann eine barrierefreie Webseite plus die Einstellung, die dadurch transportiert wird, sehr hilfreich sein. Gerade in Zeiten des Fachkräftemangels stellt das die große Chance dar, einer neuen Zielgruppe auf dem Arbeitsmarkt zu begegnen.

Verstärkte Teambindung

Mitarbeiter*innen, die im Laufe ihrer Anstellung situativ, vorübergehend oder permanent behindert werden – und wie wir gelernt haben, sind das einige – beispielsweise durch Nachwuchs oder Alterserkrankungen, können in einem barrierefreien digitalen Umfeld angestellt bleiben. Das ist sowohl für die angestellten Personen erstrebenswert, als auch für die Firmen, die ihre Fachkräfte so halten und ihr eingespieltes Team nicht verlieren müssen.

Universelle Benutzerfreundlichkeit

Aber nicht nur für Menschen, die von Hürden betroffen sind, wird die Interaktion leichter. Auch nicht-behinderte Nutzer*innen profitieren von optischer Klarheit, besserer Struktur und leicht zugänglichen Inhalten. Denn all diese Punkte machen nicht nur barrierefreie Gestaltung aus, sondern sind auch Grundlage von qualitativ hochwertigem Design. So machst du deine Brand durch perfekte Usability zu einer Lieblingsmarke, noch bevor die Konkurrenz nachzieht!

Suchmaschinenoptimierung

Zusätzlich sind Webseiten mit einer klaren, sinnvollen HTML auch für Technik besser verständlich, was sie für Suchmaschinen leichter auffindbar macht. Das steigert euer SEO-Ranking, und zwar teilweise enorm, wie folgende Studie zeigt: Hier geht es zu einer Studie auf Englisch zum Einfluss von digitaler Barrierefreiheit auf SEO.

Gute Brand – gutes Image!

Selbstverständlich spiegelt sich soziale Verantwortung auch im Markenimage wider. Was nicht nur dazu führt, dass andere Businesses lieber mit euch kooperieren und Kund*innen mit besserem Gewissen kaufen, es macht euch auch attraktiver für die jüngere Generation und neue Mitarbeitende. Win, win, win für alle!

Gesetzliche Richtlinien ab 2025 Für all die harten Nüsse, denen das bisher nicht Argument genug ist, hier kommt der ultimative Knacker: Ab Juni 2025 tritt in Deutschland das Barrierefreiheits-Stärkungsgesetz (BFSG) in Kraft. Das BFSG verpflichtet die private Wirtschaft dazu, die EN 301 549 umzusetzen, eine europäische Norm für digitale Barrierefreiheit. Diese verweist wiederum auf die WCAG (2.1). So. Viele. Abkürzungen. Aber nicht verzagen. Es folgen gehirngerechte Häppchen!

Das BSFG – Barrierefreiheits-Stärkungsgesetz

Das BSFG gilt für Produkte und Dienstleistungen, wie Online-Shops und Webseiten, einschließlich E-Commerce und Online-Terminbuchungen (z.B. von Friseurläden oder Restaurants). Ausgenommen sind Kleinstunternehmen, die Dienstleistungen anbieten und sowohl weniger als zehn Personen beschäftigen als auch einen Jahresumsatz von höchstens 2 Millionen Euro erzielen. Eine zusätzliche Ausnahme sind Unternehmen, die sich ausschließlich auf B2B-Leistungen beschränken, also kein Kontakt mit Endverbraucher*innen besteht. Lies hier mehr zum
BSFG beim Bundesministerium für Arbeit und Soziales. Welche Bestimmungen man auf seinem Webauftritt einhalten muss, damit er als barrierefrei gilt, findet man in den WCAG.

Die WCAG – Web Content Accessibility Guidelines

Dort kannst du dir einen umfassenden Überblick über die Anforderungen an barrierefreie Webinhalte verschaffen. Die WCAG ist gefüllt mit detaillierten Anweisungen und Kriterien, um die Zugänglichkeit zum Internet für alle sicherzustellen. Dazu gehören eine konsistente Navigation, gut lesbare Inhalte, ausreichende Kontrastverhältnisse, Alternativtexte für visuelle Medien und einiges mehr.

Die Richtlinien unterscheiden zwischen drei Ebenen der Konformität – A (niedrigste), AA (mittlere) und AAA (höchste) von denen man als Unternehmen ab Mitte 2025 die Ebene AA gewährleisten muss.

Hier findest du die kompletten Kriterien der WCAG 2.1.

10 Best Practises für digitale Barrierefreiheit

Um dir den Einstieg zu erleichtern, hier schon mal ein paar Dinge, die du beachten kannst:

  • Nutze starke Farbkontraste, um alles gut lesbar zu machen.
  • Vermeide Slider und Pop-Ups.
  • Schaffe klare Hierarchien für mehr Struktur, nicht nur visuell, sondern auch im Format, damit deine Seite für Screenreader-Nutzende zugänglich ist.
  • Vermeide Animationen wie GIFs
  • Nutze gut lesbare Schriften (markante Buchstaben, die sich gut voneinander unterscheiden).
  • Gehe sparsam mit Emojis um, mal wieder Gefühle verbalisieren hat doch was!
  • Versehe deine Fotos mit aussagekräftigem Alternativ-Text.
  • Videos brauchen Untertitel (kann man dann auch besser heimlich gucken.)
  • Mache bedienbare Elemente mit der Tastatur anwählbar.
  • Setze Fokusrahmen um Buttons und Schaltflächen, damit man gut erkennt, dass hier etwas anwählbar ist.

Mehr Tipps zur digitalen Barrierefreiheit und zum barrierefreien Posten gibt es hier!

In jedem Fall hilft der Dialog mit behinderten und beeinträchtigten Menschen. Er hilft, die Empathy-Gap zu schließen und Verständnis zu entwickeln für die Wahrnehmung anderer. So wirst du offen, deine digitalen Angebote so benutzerfreundlich wie möglich zu gestalten und öffnest dir allerhand Türen.

Was kostet es, meine Webseite barrierefrei zu machen?

Die Kosten sind je nach Größe und Funktionsumfang einer Webseite sehr individuell. Wichtig ist: Je früher du mit digitaler Barrierefreiheit anfängst, desto weniger kostet es dich. Laut einer Studie von Deque (einer der großen Namen der Szene), kann man schon über 67 % der auftretenden Probleme mit digitaler Barrierefreiheit in der Konzeption und im Design vermeiden, bevor die Entwickler sich überhaupt an die Arbeit machen.

Hier geht es zur Präsentation der Studie von Deque.

Wenn deine Website schon steht, empfehlen wir dir im folgenden Abschnitt Anwendungen, die dir helfen, deine Seite auf Barrierefreiheit zu testen.

Testing Tools

  • Automatisierte Accessibility-Testing-Tools:

Nutze Tools wie WAVE (Web Accessibility Evaluation Tool), Axe Accessibility Checker oder ARC Toolkit, um deine Website auf Konformität mit den WCAG-Richtlinien zu überprüfen.

Mit diesen Tools kannst du ca. 40 - 50 % der Fehler bezüglich Barrierefreiheit automatisiert finden.

  • Farbkontrast-Checker:

Verwende Tools wie den Color Contrast Analyser, um sicherzustellen, dass deine Texte durch ausreichenden Kontrast zwischen Text- und Hintergrundfarben lesbar sind. Zum Color Contrast Analyser.

  • Screenreader: Setze Programme wie NVDA (NonVisual Desktop Access) für Windows oder VoiceOver für Mac ein, um deine Website aus der Perspektive von Nutzer*innen mit Sehbehinderung zu testen. Zum NVDA Screenreader.
  • Test auf Barrierefreiheit: Nutze die CAAT-Software oder den BIK BITV-Selbsttest, um deine Webseite Schritt für Schritt zu testen. Zur CAAT Software und zum BITV-Test.

Bei Stellen wie der BIK-BITV kannst du deine Seite von Expert*innen prüfen lassen. Zeigt sie zum Zeitpunkt der Prüfung keine Mängel bezüglich der Thematik, stellt man dir dort ein Zertifikat aus. Dies gilt allerdings nur für 1 Jahr oder muss es erneuert werden, wenn du eine wesentliche Änderung an deiner Seite machst.

Wenn du gerade erst loslegst mit deinem Webauftritt, findest du hier ein paar Tools (und die jeweiligen OMR-Reviews dazu!), die es technisch möglich machen, barrierefreie Inhalte zu erstellen. Das ist nämlich nicht immer der Fall! Es gibt Templates und Softwares, die es gar nicht erst zulassen, barrierefrei zu arbeiten. Informiere dich also gut vorab, damit du deine Wahl im Nachhinein nicht bereust oder nutze eine der folgenden Anwendungen:

  • WordPress: eine Open-Source Software, mit der Nutzer*innen Websites, Blogs oder Apps erstellen und gestalten können
  • GREYD.SUITE: All-in-one-Lösung zum Erstellen und Managen professioneller WordPress Websites
  • TYPO3: kostenfreie Software zur Erstellung von Websites und mehr
  • Webflow: ein Tool für Webdesign ohne selbst Code nutzen zu müssen

Digitale Barrierefreiheit ist die digitale Zukunft.

Man kann zusammenfassend also sagen: Es führt kein Weg drumherum!
2025 is coming und mit ihm ein verpflichtendes Gesetz, das Handlungsbedarf mit sich bringt.

Abgesehen von der gesetzlichen Pflicht ist digitale Barrierefreiheit ein essenzieller Bestandteil einer inklusiven Gesellschaft. Durch sie ermöglichen wir es allen Menschen, unabhängig von ihren physischen oder kognitiven Fähigkeiten, am digitalen Leben teilzuhaben. Und seien wir mal ehrlich: Ein großer Teil unseres Lebens spielt sich digital ab, ob wir wollen oder nicht.

Aber auch abgesehen von diesem Aspekt bietet das Reduzieren digitaler Barrieren zahlreiche Chancen, unser digitales Miteinander beruflich wie privat übersichtlicher und dadurch gewinnbringender zu gestalten.

Auch wenn die Umsetzung mit komplexen Richtlinien erst mal einschüchternd wirkt: Wenn du digitale Barrierefreiheit früh genug in deine Entwicklungsprozesse einplanst, kannst du dir viel Stress und viel Geld ersparen.

Deswegen, schul dein Team! (Je mehr sie wissen, desto billiger wird es für euch!) Speicher dir diesen Artikel! (Glücklicherweise ist der echt hilfreich!) Und leg los!

Tobias Roppelt
Autor*In
Tobias Roppelt

Tobias Roppelt ist Gründer der Gehirngerecht Digital GmbH. Seit über 9 Jahren hilft er Unternehmen dabei, ihre Webseiten und digitalen Produkte zu optimieren, um die bestmögliche Nutzererfahrung zu schaffen. Da er schon immer ein Faible für soziale Themen hatte, hat er sich entschlossen, sich der Mission zu widmen, das Internet barrierefrei zu machen. Mit Gehirngerecht Digital will er nicht nur barrierefreie digitale Auftritte und Produkte schaffen, sondern auch das Thema digitale Barrierefreiheit auf einfache und unterhaltsame Weise den Menschen näherbringen.


Alle Artikel von Tobias Roppelt

Im Artikel erwähnte Softwares

Im Artikel erwähnte Software-Kategorien

Ähnliche Artikel

Komm in die OMR Reviews Community & verpasse keine Neuigkeiten & Aktionen rund um die Software-Landschaft mehr.