50 Tipps für barrierefreie Websites E-Book

Martina Rüter

• Herausgeber: epubli
• Kategorie: Wissenschaft und neue Technologien
• Sprache: Deutsch

Seitenzahl: 101

Veröffentlichungsjahr: 2025

Beschreibung

Ist meine Website für alle nutzbar? Erfüllt sie die gesetzlichen Anforderungen des Barrierefreiheitsstärkungsgesetzes (BFSG)? Unternehmen tragen nicht nur eine gesetzliche, sondern auch eine gesellschaftliche Verantwortung. Mit diesem praxisorientierten Ratgeber meistern Sie die Herausforderung der digitalen Barrierefreiheit – auch ohne tiefgreifende Programmierkenntnisse oder großes Budget. Das erwartet Sie: - 50 konkrete, leicht umsetzbare Maßnahmen - Verständliche Erklärungen der rechtlichen Anforderungen - Praxisnahe Checkliste zur Selbstüberprüfung Ihrer Website - Klare Anweisungen für die Beauftragung von Dienstleistern Profitieren Sie von mehr Reichweite und Kundenzufriedenheit, während Sie gleichzeitig Rechtssicherheit gewinnen. Dieser Ratgeber zeigt Ihnen, wie kleine Änderungen große Wirkung erzielen können – für mehr Umsatz und eine inklusive digitale Präsenz. Barrierefreiheit ist kein Luxus, sondern Ihr Wettbewerbsvorteil. Starten Sie jetzt!

Leseprobe

Martina Rüter50 Tipps für barrierefreie Websites

Martina Rüter

50 Tipps

für

barrierefreie Websites

Website prüfen und mit kleinen Anpassungen optimieren

Rechtliche Hinweise

Teile des Textes wurden mithilfe von KI-gestützten Sprachmodellen (ChatGPT von OpenAI, Claude von Anthropic) erstellt. Die KI-Modelle wurden verwendet, um zusätzliche Ideen und Anregungen vorzuschlagen, einzelne Textpassagen zu strukturieren und sprachliche Korrekturen vorzunehmen. Die KI-generierten Texte wurden überarbeitet, gekürzt und angepasst. Das Coverbild wurde ebenfalls mit KI-Unterstützung erstellt (Ideogram.ai); Bildrechte liegen bei der Autorin.

Hinweis zur Darstellung

Dieses E-Book wurde sorgfältig formatiert, um auf möglichst vielen E-Book-Readern, Tablets und Smartphones optimal dargestellt zu werden. Dennoch kann es je nach verwendetem Gerät, Betriebssystem, Reader-App oder individuellen Leseeinstellungen (z. B. Schriftart, Schriftgröße, Zeilenabstand) zu leichten Abweichungen im Layout kommen.

Impressum

Text: ©2025 Martina RüterLektorat: Katia SimonCoverbild: Generiert mit Ideogram.ai (KI-gestützte Bilderstellung) und anschließend bearbeitet

Verantwortlich für den Inhalt:       Martina RüterZum Pleßbach 37a45549 Sprockhö[email protected]üter.de↗

epubli – ein Service der Neopubli GmbH, Berlin

Inhalt

Einleitung

Was leistet dieser Ratgeber und für wen?

Rechtliche Grundlagen – Was gilt ab dem 28.06.2025?

Warum ist Barrierefreiheit wichtig?

Grundlagen der Barrierefreiheit

Inklusive Websites: Was Barrierefreiheit wirklich bedeutet

Die häufigsten Barrieren im Web

Das POUR-Prinzip – die 4 Prinzipien der Barrierefreiheit

Struktur und Navigation

Tipp 1: Konsistentes Design umsetzen

Tipp 2: Auf eine kontrastreiche Farbgestaltung achten

Tipp 3: Klare Hauptnavigation entwickeln

Tipp 4: Breadcrumb-Navigation integrieren

Tipp 5: Suchfunktion implementieren

Tipp 6: Tastaturnavigation ermöglichen

Tipp 7: Responsives Design nutzen

Tipp 8: Pop-ups vermeiden

Text und Lesbarkeit

Tipp 9: Einfache und verständliche Sprache verwenden

Tipp 10: Abkürzungen und Akronyme erklären

Tipp 11: Texte in sinnvolle Abschnitte gliedern

Tipp 12: Klare Überschriften formulieren und eine logische Struktur schaffen

Tipp 13: Hervorhebungen gezielt setzen

Tipp 14: Textausrichtung und Zeilenabstände optimieren

Tipp 15: Lesezeit angeben

Tipp 16: Gut lesbare Schriftarten auswählen

Tipp 17: Alternativen für lange Texte anbieten

Hyperlinks

Tipp 18: Aussagekräftige Linktexte verfassen

Tipp 19: Visuelle Gestaltung von Links optimieren

Tipp 20: Touchscreen-Freundlichkeit von Links gewährleisten

Tipp 21: Umgang mit neuen Fenstern/Tabs bei externen Links kommunizieren

Bilder und Multimedia-Elemente

Tipp 22: Alternative Texte (Alt-Texte) für Bilder hinterlegen

Tipp 23: Textalternativen für komplexe Grafiken anbieten

Tipp 24: Untertitel für Videos bereitstellen

Tipp 25: Transkripte für Audio-Inhalte anbieten

Tipp 26: Auf automatisch abspielende Medien verzichten

Tipp 27: Tastaturnavigation für Player-Steuerelemente sicherstellen

Tipp 28: Blinkende und flackernde Elemente vermeiden

Tabellen

Tipp 29: Tabellen nur für Daten (nicht zu Layoutzwecken) verwenden

Tipp 30: Tabellen richtig strukturieren

Tipp 31: Tabellenbeschreibung für komplexe Tabellen hinzufügen

Tipp 32: Leere Tabellenzellen vermeiden

Tipp 33: Keine verschachtelten Tabellen erzeugen

Tipp 34: Keine Tabellenzellen verbinden

Tipp 35: Tastaturnavigation für Tabellen sicherstellen

Tipp 36: Responsivität von Tabellen sicherstellen

Tipp 37: Zebrastreifen-Design verwenden

Formulare

Tipp 38: Keine Tabellen für die Formulargestaltung nutzen

Tipp 39: Formularfelder sinnvoll gruppieren

Tipp 40: Beschriftungen (labels) für Formularfelder nutzen

Tipp 41: Pflichtfelder nicht nur über Farben kennzeichnen

Tipp 42: Eingabeformate klar kommunizieren

Tipp 43: Tastaturnavigation für Formulare sicherstellen

Tipp 44: Fehlerhinweise verständlich formulieren

Tipp 45: CAPTCHA-Alternativen nutzen

Technische Aspekte

Tipp 46: Seitensprache und -titel angeben

Tipp 47: Semantisches HTML verwenden

Tipp 48: ARIA-Rollen und -Attribute nutzen

Tipp 49: Ladezeiten reduzieren

Tipp 50: PDFs barrierefrei gestalten

Anhang

Prüfverfahren

Checkliste für regelmäßige Überprüfungen

Glossar

Gesetze und Normen zur digitalen Barrierefreiheit

Einleitung

Was leistet dieser Ratgeber und für wen?

Dieser Ratgeber kann Ihnen dabei helfen, Ihre Website barrierefrei zu gestalten, also für alle Menschen zugänglich zu machen – unabhängig von deren individuellen Fähigkeiten oder Einschränkungen. Die 50 Tipps sind praxisnah formuliert und richten sich an Inklusionsbeauftrage von mittelständischen Unternehmen, Web-Redakteur*innen und Content-Manger*innen, Designer*innen sowie Geschäftsinhaber*innen bzw. Freiberufler*innen.

Jedes Kapitel behandelt einen bestimmten Aspekt der digitalen Barrierefreiheit, sei es die Gestaltung barrierefreier Texte, die richtige Nutzung von Farben oder die Optimierung für Screenreader. Die Tipps sind so strukturiert, dass Sie sie direkt umsetzen können. Dabei können Sie die Tipps der Reihe nach durchgehen oder gezielt bestimmte Themen ansteuern oder Problemstellen Ihrer Website verbessern. Barrierefreiheit ist stets ein Prozess – setzen Sie die Tipps um, beobachten Sie das Feedback Ihrer Zielgruppe und optimieren Sie Ihre Website kontinuierlich.

Rechtliche Grundlagen – Was gilt ab dem 28.06.2025?

Ab dem 28. Juni 2025 tritt das Barrierefreiheitsstärkungsgesetz (BFSG)↗in Kraft, das die EU-Richtlinie des European Accessibility Act (EAA)↗umsetzt. Dieses Gesetz verpflichtet viele Unternehmen im B2C-Bereich, ihre digitalen Angebote barrierefrei zu gestalten, um eine gleichberechtigte Teilhabe für alle Menschen zu ermöglichen. Unternehmen, die Produkte oder Dienstleistungen im elektronischen Geschäftsverkehr anbieten, wie zum Beispiel Online-Shops oder Buchungsplattformen, sind danach verpflichtet, ihre Websites und Apps barrierefrei zu gestalten. Aber auch Arztpraxen, Friseurbetriebe und Fitnessstudios müssen Online-Terminbuchungen oder Kontaktformulare barrierefrei anbieten. Weiterhin sind auch Unternehmen, wie etwa Banken, Telekommunikationsanbieter und öffentliche Verkehrsbetriebe zur Barrierefreiheit verpflichtet.

Barrierefreiheitserklärung

Ein Bestandteil dieser Verpflichtung ist die Veröffentlichung einer Barrierefreiheitserklärung, die Auskunft über den Grad der Barrierefreiheit des Angebots gibt. Konkret informiert die Barrierefreiheitserklärung darüber, welche Teile der Website barrierefrei sind, welche nicht, und aus welchen Gründen möglicherweise bestehende Barrieren noch nicht entfernt wurden. Außerdem muss die Erklärung zur Barrierefreiheit eine Kontaktmöglichkeit (Telefonnummer, E-Mail-Adresse) für Beschwerden enthalten.

Ausnahmen:

B2B-UnternehmenEs muss eindeutig sein, dass sie sich nur an Unternehmen richtet und nicht an Verbraucherinnen und Verbraucher.

UnternehmensgrößeKleinstunternehmen mit weniger als 10 Mitarbeitenden und einem Jahresumsatz oder einer Jahresbilanzsumme von höchstens 2 Millionen Euro sind von dieser Verpflichtung ausgenommen. Wichtig: Beide Kriterien müssen erfüllt sein!

ÜbergangsregelungBestehende Inhalte, die vor diesem Datum veröffentlicht wurden, müssen erst bis Mitte 2030 angepasst werden.

Warum ist Barrierefreiheit wichtig?

Barrierefreiheit als Schlüssel

für mehr Kundenbindung

und größeren Geschäftserfolg

Auch wenn Freiberufler*innen, Einzel- und Kleinunternehmer*innen gesetzlich nicht zur Barrierefreiheit ihrer Websites verpflichtet sind, gibt es dennoch gute Gründe, warum sie ihren Internetauftritt barrierefrei gestalten sollten:

Erweiterung der Zielgruppe

In Deutschland leben etwa 7,8 Millionen Menschen mit anerkannter Schwerbehinderung. Eine barrierefreie Website ermöglicht es, diese potenziellen Kunden*innen besser zu erreichen und somit die Reichweite des Unternehmens zu erhöhen.

Optimaler Bedienkomfort

Barrierefreiheit kommt nicht nur Menschen mit Behinderungen zugute. Eine klare Struktur, gut lesbare Texte und intuitive Navigation machen die Bedienung der Website für alle angenehmer und effizienter.

Suchmaschinenoptimierung (SEO) und Künstliche Intelligenz (KI)

Barrierefreie Websites sind oft besser für Suchmaschinen optimiert. Maßnahmen wie klare Überschriftenstrukturen und Alternativtexte für Bilder erleichtern es Suchmaschinen, den Inhalt der Website zu erfassen, was zu einer besseren Platzierung in den Suchergebnissen führen kann. Barrierefreie Websites sind in der Regel auch leichter von KI-Modellen wie ChatGPT erfassbar, da sie auf klar strukturierten, gut lesbaren Inhalten basieren. Dies erhöht die Wahrscheinlichkeit, dass Informationen aus diesen Seiten korrekt wiedergegeben werden.

Steigerung der Conversion-Rate

Eine barrierefreie Website kann die Absprungrate verringern und die Wahrscheinlichkeit erhöhen, Interessierte in Kundschaft zu verwandeln.

Positives Unternehmensimage

Unternehmen, die auf Barrierefreiheit achten, demonstrieren Verantwortungsbewusstsein und übernehmen soziale Verantwortung. Dies kann das Markenimage stärken und positiv wahrgenommen werden.

Zukunftssicherheit

Auch wenn derzeit keine gesetzliche Verpflichtung besteht, könnten zukünftige Gesetzesänderungen Barrierefreiheit für alle Websites vorschreiben. Eine frühzeitige Anpassung kann daher langfristig rechtliche Risiken minimieren.

Grundlagen der Barrierefreiheit

Inklusive Websites: Was Barrierefreiheit wirklich bedeutet

Barrierefreiheit im Web ist mehr als nur eine technische Anforderung oder ein rechtliches Muss – es geht um echte Teilhabe. Eine barrierefreie Website ermöglicht allen Menschen, unabhängig von ihren Fähigkeiten oder Einschränkungen, gleichberechtigten Zugang zu Informationen im digitalen Raum.

Zu oft wird Barrierefreiheit als Checkliste betrachtet, die abgehakt werden muss. Doch der wahre Kern liegt in der Inklusion: Wir gestalten nicht für Menschen mit Behinderungen, sondern für alle Menschen, und die verfügen über unterschiedliche Fähigkeiten. Barrierefreiheit bedeutet, dass Menschen mit Sehbehinderungen Inhalte über Screenreader erfassen können und dass Menschen mit motorischen Einschränkungen alle Funktionen per Tastatur bedienen können. Es bedeutet auch, dass Menschen mit kognitiven Einschränkungen durch klare Sprache und konsistente Navigation unterstützt werden.Etwa 15 bis 20 Prozent der Weltbevölkerung leben mit irgendeiner Form von Behinderung – temporär oder permanent. Doch vergessen wir nicht: Barrierefreie Websites bieten allen Nutzerinnen und Nutzern Vorteile. Eine klare Struktur hilft Menschen, die unter Zeitdruck stehen. Untertitel für Videos unterstützen nicht nur Gehörlose, sondern auch diejenigen, die in lauten Umgebungen surfen oder Deutsch als Zweitsprache sprechen.

Barrierefreiheit ist kein einmal erreichbares Ziel, sondern ein kontinuierlicher Entwicklungsprozess. Websites entwickeln sich weiter, Technologien verändern sich, und unser Verständnis von Zugänglichkeit wächst. Die zentrale Frage sollte demnach nicht lauten „Ist meine Website barrierefrei?“, sondern „Wie kann ich meine Website für mehr Menschen zugänglicher gestalten?“Barrierefreiheit bedeutet also mehr als nur technische Anpassungen – es ist ein grundlegender Ansatz für ein inklusives Web. Die Tipps in diesem Ratgeber helfen Ihnen dabei, Ihre Website Schritt für Schritt zugänglicher zu gestalten.

Die häufigsten Barrieren im Web

Im digitalen Raum existieren zahlreiche Hindernisse, die vielen Nutzerinnen und Nutzern unbemerkt bleiben, für andere jedoch unüberwindbare Hürden darstellen.

Visuelle Barrieren

Unzureichende Farbkontraste erschweren sehbehinderten Menschen das Lesen von Texten.

Fehlende Alternativtexte für Bilder machen visuelle Inhalte für

Screenreader

unsichtbar.

Zu kleine Schriftgrößen ohne Anpassungsmöglichkeit schließen Menschen mit Sehschwächen aus.

Visuelle

CAPTCHAs

bei Formularen sind für sehbehinderte Menschen nicht nutzbar.

Auditive Barrieren

Videos ohne Untertitel oder Transkriptionen bleiben für gehörlose Menschen unzugänglich.

Audioelemente ohne Textpendant (Transkript) können problematisch sein.

Motorische Barrieren

Kleine Klickbereiche und eng beieinanderliegende Elemente stellen für Menschen mit eingeschränkter Feinmotorik ein Problem dar.

Mangelnde Tastaturbedienbarkeit schließt all jene aus, die keine Maus verwenden können.

Kognitive Barrieren

Komplexe Sprache erschwert das Verständnis.

Unübersichtliche Navigation und inkonsistente Strukturen verwirren.

Blinkende Elemente (Animationen) können nicht nur störend sein, sondern sind sogar gesundheitsgefährdend für Menschen mit bestimmten neurologischen Erkrankungen.

Technische Barrieren

Websites, die nicht mit assistiven Technologien wie

Screenreadern

,

Braillezeile

oder Bildschirmlupen kompatibel sind, schließen Menschen mit Sehbeeinträchtigungen aus.

Eine fehlende

semantische

HTML

-Struktur erschwert die Orientierung auf der Website erheblich: Screenreader und andere assistive Technologien sind auf diese Strukturelemente angewiesen, um die Inhalte sinnvoll zu vermitteln.

JavaScript

-abhängige Funktionen ohne alternative Lösungen können bei deaktiviertem JavaScript unbenutzbar werden.

Strukturelle Barrieren

Eine fehlende Überschriftenhierarchie verhindert eine sinnvolle Navigation.

Inkonsistente Benutzeroberflächen erschweren das Verständnis für den Aufbau der Website.

Versteckte Inhalte, die nur durch

Hover-Effekte

sichtbar werden, sind für Viele nicht zugänglich.

Responsive Design Barrieren

Nicht-

responsive

Websites können auf mobilen Geräten oder bei Bildschirmvergrößerung unbrauchbar sein.

Fixierte Maßeinheiten verhindern die flexible Anpassung an persönliche Einstellungen.

Dieser Ratgeber stellt konkrete Lösungsansätze für all diese Hindernisse vor und zeigt, wie sich jede Website zugänglicher gestalten lässt.

Das POUR-Prinzip – die 4 Prinzipien der Barrierefreiheit

Die Web Content Accessibility Guidelines (WCAG)↗definieren vier Prinzipien, die als Grundpfeiler für digitale Barrierefreiheit dienen: perceivable (wahrnehmbar), operable (bedienbar), understandable (verständlich) und robust (robust). Diese vier Prinzipien werden unter dem Akronym „POUR“ zusammengefasst.

Perceivable (wahrnehmbar)

Informationen und Benutzeroberflächen müssen so gestaltet sein, dass sie von möglichst vielen Menschen wahrgenommen werden können. Das bedeutet unter anderem:

Responsives Design (anpassbare Schriftgrößen und flexible Layouts)

Klare Farbkontraste für Texte und Bedienelemente

Alternativtexte für Bilder

Untertitel oder Transkripte (Textfassung) für Audios und Videos

Operable (bedienbar)

Die Benutzeroberfläche und die Navigation müssen für alle Menschen bedienbar sein. Dazu gehören:

Klare Struktur (Orientierung)

Gut erkennbare und logische Navigationswege

Steuerbarkeit per Tastatur für Menschen, die keine Maus nutzen können

Understandable (verständlich)

Die Informationen und die Bedienung der Website müssen verständlich sein. Das bedeutet:

Konsistenter Seitenaufbau

Klare und einfache Sprache ohne unnötigen Fachjargon

Hilfestellungen bei der Eingabe von Formularen, zum Beispiel durch Fehlererkennung und Vorschläge

Robust (robust)

Die Website sollte so gestaltet sein, dass sie mit verschiedenen Browsern, Geräten und assistiven Technologien kompatibel ist, sowohl jetzt als auch in Zukunft. Dafür ist Folgendes wichtig:

Nutzung von sauberem, gut strukturiertem

HTML

-Code (standardkonformes HTML)

Verwendung von speziellen Codes, den

ARIA

-Attributen (Accessible Rich Internet Applications), um interaktive Elemente für Menschen mit Sehbehinderungen verständlicher zu machen, indem sie zusätzliche Hinweise für

Screenreader

liefern

Die drei Konformitätsstufen der WCAG

Die WCAG definieren drei Konformitätsstufen – A, AA und AAA –, die jeweils Anforderungen an die Barrierefreiheit von Webinhalten beschreiben. Jede höhere Stufe baut auf der vorherigen auf und stellt strengere Anforderungen:

Stufe A