Barrierefreie Internetauftritte:
Das Web für Alle zugänglich machen!

Warum ist Barrierefreiheit im Internet wichtig?

Ab Juni 2025 müssen auch private Unternehmen barrierefreie digitale Angebote bereitstellen. Im Barrierefreiheitsstärkungsgesetzt wird unter anderen festgelegt, dass Internetauftritte, die Verbrauchern die Möglichkeit bieten Verträge abzuschließen, den definierten Anforderungen zur Barrierefreiheit genügen müssen.

Neben gesetzlichen den gesetzlichen Vorgaben sprechen auch wirtschaftliche Gründe für ein hohes Maß an Barrierefreiheit. Barrierefreie Angebote erreichen breitere Zielgruppen und machen die Nutzung der Seite für alle Besucher einfacher. So steigert ein hohes Maß an Barrierefreiheit im Allgemeinen auch die Verweildauer und verbessert Conversion-Rates. Zudem wird der benutzerfreundliche und gut strukturierte Aufbau barrierefreierer Seiten auch von Suchmaschinen positiv beurteilt und verbessert so die Sichtbarkeit der betreffenden Internetauftritte.

Barrierefreiheit im Internet ist nicht nur eine rechtliche und wirtschaftliche Notwendigkeit, sondern auch eine gesamtgesellschaftliche Verantwortung. Eine inklusive Gestaltung von Webseiten schafft Vertrauen, unterstreicht die Werte eines Unternehmens und verbessert dessen Image in der Öffentlichkeit. Unternehmen, die auf Barrierefreiheit setzen, zeigen ihr Engagement für Chancengleichheit und soziale Verantwortung, was langfristig die Glaubwürdigkeit und Akzeptanz erhöht.

Rechtlicher Rahmen

Die Grundlage für Barrierefreiheit im digitalen Raum wird in Deutschland durch das Behindertengleichstellungsgesetz (BGG) gelegt. Ziel des BGG ist es, die Teilhabe von Menschen mit Behinderungen am gesellschaftlichen Leben zu ermöglichen und entsprechende Barrieren zu beseitigen.

Die Grundprinzipen der Barrierefreiheit

Die Web Content Accessibility Guidelines definieren die sogenannten POUR-Prinzipen für barrierefreie Web-Angebote. POUR steht für: 

• Perceivable (wahrnehmbar),
• Operable (bedienbar),
• Understandable (verständich),
• Robust (robust)

Barrierefreies Webdesign

Barrierefreies Webdesign beginnt bei der Entwicklung der Informationsarchitektur und der grundsätzlichen Struktur der verschiedenen Seitentypen und behält seine Relevanz in allen visuellen Aspekten des Internetauftritts. Barrierefreies Design vereinfacht die Wahrnehmung und Nutzung digitaler Inhalte für alle Menschen – unabhängig von individuellen Einschränkungen, verbessert die User Experience und macht digitale Angebote für eine breitere Zielgruppe zugänglich.

Kontraste und Farbwahl

Lesbarkeit ist ein wesentlicher Aspekt barrierefreien Webdesigns. Ausreichende Kontraste zwischen Text und Hintergrund erleichtern das Erkennen von Inhalten für alle Nutzer, insbesondere aber für Menschen mit Sehschwächen. Beim Einsatz von Farben sollte beachtet werden, dass unterschiedliche Ausprägungen von Farbenblindheit es ggf. unmöglich machen bestimmte Farbkombinationen zu unterscheiden. Deshalb sollten Farben nicht die einzige Möglichkeit sein, Informationen zu vermitteln.

Schriftarten und Typografie

Auch der der Auswahl und dem Einsatz von Schriften sollte der Lesbarkeit eine hohe Priorität zugeordnet werden. Ausreichend große Schriftgrößen und Zeilenabstände erleichtern die Lesbarkeit. Lange Texte sollten sinnvoll strukturiert und durch Zwischenüberschrift gegliedert sein. Auch das kommt allen Nutzern zu Gute.

Interaktive Elemente

Interaktive Elemente wie Buttons und Links sollten groß genug sein, damit sie leicht klick- oder tippbar sind. Die Abstände zwischen interaktiven Elementen müssen ausreichend sein, um versehentliche Fehleingaben zu vermeiden. Buttons, Drop-Downs und sonstige interaktive Elemente sollten groß genu sein, dass die leicht klick- oder tippbar sind. Ausreichende Abstände vermeiden versehentliche Fehleingaben. Klare visuelle Zustände für Hover, Fokus und aktive Interaktionen helfen Nutzern, die Orientierung zu behalten.

Navigation und Layout

Eine konsistente und intuitiv aufgebaute sowie gestaltete Navigation und eine klare Struktur mit logischer Seitenhierarchie erleichtern die Orientierung. Wiederkehrende Elemente sollten an einheitlichen Positionen platziert werden, um allen Nutzern die schnelle Erfassung von Informationen und die Nutzung der Seite zu vereinfachen.

Animationen und Bewegungseffekte

Wenn Animationen und Bewegungseffekte genutzt werden, sollte stets die Möglichkeit gegeben werden, diese auszuschalten, da starke Bewegungen und flackernde Elemente für einige Nutzer sehr unangenehm sein können (bspw. bei Epilepsie oder Bewegungsempfindlichkeit).

Leichte Sprache: Verständlichkeit für alle

Leichte Sprache eröffnet Menschen mit kognitiven Behinderungen den Zugang zu Informationen und zu Kommunikation, reduziert sprachliche Barrieren und sorgt dafür, dass Informationen für möglichst viele Menschen zugänglich sind.

Leichte Sprache richtet sich insbesondere an:

• Menschen mit Lern- oder geistiger Behinderung
• Personen mit geringen Deutschkenntnissen oder nicht-muttersprachlichem Hintergrund
• Personen mit eingeschränkter Lesekompetenz
• Menschen mit kognitiven Einschränkungen, z. B. durch Krankheiten oder Unfälle

Öffentliche Stellen sind auf Basis der Barrierefreie-Informationstechnik-Verordnung (BITV 2.0) verpflichtet, digitale Angebote in leichter Sprache bereitzustellen. Die spezifischen Anforderungen variieren, in der Regel müssen jedoch mindestens die wichtigsten Informationen, Hinweise zur Navigation und wesentliche Inhalte zur Erklärung zur Barrierefreiheit in Leichter Sprache verfügbar sein. Das Barrierefreiheitsstärkungsgesetzt (BFSG) macht keine expliziten Vorgaben zum Umfang mit Leichter Sprache, dennoch ist es empfehlenswert sich hier den Mindestanforderungen für öffentliche Stellen zu orientieren.

Grundprinzipien der Leichten Sprache

• Einfache Wörter: Keine Fachbegriffe oder komplizierte Fremdwörter (oder mit Erklärung).
• Kurze Sätze: Ein Satz = eine Information, keine Nebensätze.
• Aktive Sprache: Direkte Ansprache, Vermeidung von Passivsätzen.
• Klare Struktur: Wichtige Inhalte zuerst, keine komplizierten Satzkonstruktionen.
• Zusätzliche visuelle Unterstützung: Bilder, Symbole oder Piktogramme zur Veranschaulichung.
• Große, gut lesbare Schrift: Serifenlose Schriftarten und ausreichender Zeilenabstand.
• Prüfung durch die Zielgruppe: Texte in Leichter Sprache sollten von Menschen mit Lernschwierigkeiten getestet und geprüft werden.

Barrierefreie Programmierung

Barrierefreies Programmieren ist entscheidend für die Schaffung zugänglicher digitaler Inhalte. Es beginnt mit der strukturierten und durchdachten Implementierung von Code, der sicherstellt, dass Webseiten und Anwendungen für alle Nutzer, unabhängig von ihren individuellen Fähigkeiten oder den verwendeten Geräten, navigierbar sind. Durch die Verwendung von semantischem HTML und klaren, beschreibenden Elementen wird die Interaktion mit Screenreadern und anderen Hilfstechnologien ermöglicht.

Strukturierte und semantische HTML-Nutzung

Eine barrierefreie Website beginnt mit einem gut strukturierten Code. Die korrekte Verwendung von semantischem HTML sorgt dafür, dass Screenreader Inhalte richtig interpretieren können. Überschriften sollten in der richtigen Hierarchie (<h1> bis <h6>) verwendet werden, Navigationsbereiche durch <nav>-Elemente gekennzeichnet und Inhaltsbereiche logisch gegliedert sein. ARIA-Attribute helfen, interaktive Elemente für assistive Technologien besser verständlich zu machen.

Tastaturbedienbarkeit sicherstellen

Viele Menschen mit motorischen Einschränkungen oder Sehbehinderungen nutzen keine Maus, sondern bedienen Websites ausschließlich per Tastatur oder alternative Eingabemethoden. Daher müssen alle interaktiven Elemente – etwa Links, Formulare und Menüs – vollständig per Tabulator-Taste erreichbar sein. Der Fokuszustand (:focus) muss sichtbar sein, und es dürfen keine „Tastatur-Fallen“ entstehen, die den Nutzer an der Navigation hindern.

Barrierefreie Formulare entwickeln

Ein zentrales Element vieler Websites sind Formulare, die für barrierefreie Nutzerführung klar beschriftet und verständlich gestaltet sein müssen. Jedes Eingabefeld sollte ein zugehöriges <label> haben, Fehlermeldungen müssen textlich und visuell verständlich sein. Autovervollständigung und Hilfstexte verbessern die Benutzerfreundlichkeit, während ein logischer Fokusfluss sicherstellt, dass Formulare auch mit assistiven Technologien nutzbar sind.

Multimediale Inhalte zugänglich machen

Bilder, Videos und Audiodateien müssen so gestaltet sein, dass sie für alle Nutzer verständlich sind. Dies bedeutet unter anderem: Alt-Texte für Bilder, Untertitel, Transkripte und Audiodeskription für Video- und Audioinhalten und die Möglichkeit, automatische Animationen zu deaktivieren. Anhand von Betriebssystem- oder Browsereinstellungen wie "prefers-reduced-motion" können Nutzer mit beispielsweise Bewegungskrankheiten, Epilepsie oder ADHS Bewegungseffekte reduzieren oder ganz abschalten.

Flexible Layouts und Responsive Design

Eine barrierefreie Website muss sich an verschiedene Geräte und Bildschirmgrößen anpassen können. Fluid-Design statt fixer Pixelgrößen stellt sicher, dass Texte und Inhalte auch bei hoher Zoomstufe oder auf kleinen Bildschirmen gut lesbar bleiben. Zudem muss die Website auch bei 400% Vergrößerung nutzbar sein, ohne dass Inhalte verloren gehen oder überlappen.

Intuitive Navigation und Benutzerführung

Eine barrierefreie Navigation bedeutet, dass sich Nutzer leicht auf der Seite zurechtfinden. Eine klare Menüstruktur, gut erkennbare Schaltflächen mit ausreichender Größe und Skip-Links, die direkt zum Hauptinhalt springen, helfen dabei. Zudem sollten Navigations- und Interaktionselemente konsistent gestaltet sein, um ein einheitliches Nutzungserlebnis zu gewährleisten. Ein gut sichtbarer Fokus bei der Tastatur-Navigation ist ebenfalls entscheidend, damit Nutzer, die auf die Tastatur angewiesen sind, problemlos durch die Seite navigieren können.

Automatische und manuelle Tests durchführen

Die Umsetzung barrierefreier Websites sollte regelmäßig überprüft werden. Automatisierte Tools wie Lighthouse, axe DevTools oder WAVE helfen, grundlegende Barrierefreiheitsprobleme zu erkennen. Ergänzend sollten manuelle Tests mit Screenreadern (z. B. NVDA oder VoiceOver) sowie Tastatur-Tests durchgeführt werden, um die tatsächliche Nutzererfahrung zu bewerten.

Zertifizierung

Eine Zertifizierung ist für viele Organisationen zwingend erforderlich und stellt für Unternehmen ein wichtiges Mittel dar, um die Qualität ihrer Website zu erhöhen. Eine zertifizierte Website signalisiert nicht nur die Einhaltung von Barrierefreiheitsstandards, sondern verbessert auch die Nutzererfahrung für alle Besucher. Das Webangebot wird dabei analysiert und begleitet bei der Entwicklung und Sicherstellung eines barrierefreien Produkts. Gängige Prüfkriterien, die bei der Zertifizierung berücksichtigt werden, sind unter anderem: 

• Textalternativen
• Zeitbasierte Medien
• Anpassbar
• Unterscheidbar
• Tastaturbedienbar
• Ausreichend Zeit
• Anfälle
• Navigierbar
• Eingabemodalitäten
• Lesbar
• Vorhersehbar
• Eingabeunterstützung
• Kompatibel
• Benutzerpräferenzen
• Autorenwerkzeuge
• Dokumentation und Support

Wird eine Zertifizierung der Website angestrebt, sollte zuvor ein inhaltliches Briefing erfolgen, um die Ansprüche zu definieren (z.B. Corporate Design kolidiert oftmals mit Prüfpunkt "Kontrast"). 

Ein hilfreiches Werkzeug zur ersten Überprüfung der Barrierefreiheit ist der BITV-Selbsttest. Dieser Test umfasst 98 Fragen und basiert auf der EN 301 549 sowie den WCAG 2.1. Er ermöglicht es Website-Betreibern, grundlegende Barrierefreiheitskriterien selbst zu überprüfen und potenzielle Schwachstellen zu identifizieren. Der BITV-Selbsttest bietet eine gute Grundlage, um die Zugänglichkeit der Website zu bewerten.