Als ersten und einen sehr wichtigen Punkt betrachten wir das Thema Texte und Kontraste. Dieses Thema hat nicht nur einen deutlich sichtbaren Effekt, sondern hat auch großen Einfluss im Bereich SEO. Google misst nicht nur die Performance bei den Pagespeed Insights. Auch die Accessibility ist von großer Bedeutung.

Was Sie tun sollten:

Ausreichende Farbkontraste sicherstellen:

Text und Hintergrund müssen ein gut lesbares Kontrastverhältnis aufweisen. Das Kontrastverhältnis bei Texten beschreibt den Helligkeitsunterschied zwischen Schrift und Hintergrund. Dabei gilt zu beachten, dass ab bestimmten Grenzwerten weniger hohe Kontrastverhältnisse vorgeschrieben sind. Aber welche Kontrastverhältnisse müssen erfüllt sein?

Hier eine Kurzübersicht:

Kontrastverhältnis 3:1
Text mindestens 24 Pixel groß oder mindestens 18,66 Pixel groß und fett geschrieben 

Kontrastverhältnis 4,5:1
alle anderen Texte
 

Text auf 200% skalierbar:

Nutzer müssen Texte bis zu 200% vergrößern können, ohne dass Inhalte abgeschnitten werden oder horizontales Scrollen erforderlich ist. Dadurch können mehr Menschen, die evtl. nicht mehr so gut sehen können, trotzdem alles lesen.

Informationen nicht nur über Farbe vermitteln:

Informationen dürfen nicht ausschließlich über Farbe vermittelt werden. Das heißt, wenn ein Inhalt für das Verständnis oder die Bedienung einer Website wichtig ist, muss dieser auch ohne Farbwahrnehmung verständlich sein. Nutzen Sie zusätzliche visuelle Hinweise wie Symbole, Unterstreichungen oder Fettschrift.

Was Sie vermeiden sollten:

• z.B. graue Schrift auf weißem Hintergrund mit zu geringem Kontrast
• Layouts, die bei Textvergrößerung "zerbrechen"
• Wichtige Informationen, die nur durch Farbe erkennbar sind

Auszug weiterer wichtiger Aspekte:

• Farbkontraste für UI-Elemente
• Anpassung von Zeilenabstand und Zeichenabstand
• Sprachangaben für Screenreader
• Verwendung systemspezifischer Schriftarten

Schon beim ersten wichtigen Thema der Barrierefreiheit zeigt sich, dass es rund um Texte und Kontraste einiges zu beachten gibt.

Alt-Texte (Alternativtexte) bei Bildern haben die primäre Aufgabe, die Funktion und den Inhalt des Bildes für Menschen verständlich zu machen, die das Bild nicht sehen können – z. B. durch Screenreader für blinde Nutzer oder wenn das Bild aus technischen Gründen nicht geladen wird.

Was Sie tun sollten:

Aussagekräftige Alt-Texte schreiben:

Bei Bildern, welche dazu dienen, dass der Anwender durch einen Klick oder Interaktion zu einem bestimmten Bereich kommt, also verlinkt sind, sollten Sie nicht beschreiben, was auf dem Bild zu sehen ist, sondern was der Anwender erwartet, wenn er zur nächsten Seite gelangt.

Ist dagegen das Bild ohne Interaktion, aber der Inhalt von Bedeutung, beschreiben sie kurz und präzise, was auf dem Bild zu sehen ist. Wenn möglich auch in Bezug auf den Absatz oder der gesamten Landingpage.

Dekorative Bilder kennzeichnen:

Reine Schmuckbilder erhalten ein leeres alt-Attribut (alt=""), damit Screenreader sie überspringen. Alternativ können Sie auch CSS-Hintergrundbilder verwenden. 

Komplexe Grafiken zusätzlich beschreiben:

Diagramme, Infografiken oder Karten benötigen dagegen eine ausführliche Beschreibung im Text oder über eine verlinkte Langbeschreibung.

Was Sie vermeiden sollten:

• Alt-Texte wie "Bild1.jpg" oder "Foto von einem Mann"
• Fehlende Alt-Texte bei informativen Bildern
• Texte in Bildern ohne Alternativtext

Auszug weiterer wichtiger Aspekte:

• Bilder von Text vermeiden
• SVG-Grafiken mit Titeln und Beschreibungen
• Bilderkarussells mit zugänglicher Navigation
• Responsive Bilder
• Verwendung von Bildunterschriften

Links und Navigation sind im Hinblick auf Barrierefreiheit deshalb wichtig, weil sie den zentralen Zugang zu den Inhalten und Funktionen einer Website oder App darstellen. Sind diese Bereiche nicht barrierefrei gestaltet, können Menschen mit Behinderungen große Schwierigkeiten haben, sich zurechtzufinden oder die Seite überhaupt zu nutzen.

Was Sie tun sollten:

Aussagekräftige Linktexte verwenden:

Links sollten auch außerhalb des Kontexts verständlich sein. Statt "Hier klicken" schreiben Sie "Produktdatenblatt herunterladen" oder "Mehr über unsere Dienstleistungen erfahren".

Konsistente Navigation implementieren:

Hauptmenü, Breadcrumbs und Fußzeilen-Links sollten auf allen Seiten an derselben Position stehen. Verwenden Sie einheitliche Bezeichnungen für gleichartige Funktionen.

Fokus-Indikatoren sichtbar machen:

Alle interaktiven Elemente müssen beim Navigieren mit der Tastatur deutlich sichtbar hervorgehoben werden. Auch hier müssen Sie darauf achten, dass die Kontrastverhältnisse im rechtlichen Rahmen bleiben. Der Browser-Standard reicht oft nicht aus.

Was Sie vermeiden sollten:

• Linksammlungen mit "Weitere Informationen" oder "Mehr"
• Sprunghafte Navigation oder wechselnde Menüpositionen
• Unsichtbare oder kaum erkennbare Fokus-Rahmen

Auszug weiterer wichtiger Aspekte:

• Skip-Links zum Hauptinhalt
• Multiple Ways zur Navigation
• Suchfunktion mit Autocomplete
• Breadcrumb-Navigation
• Kennzeichnung von externen Links

Kurz gesagt: Eine barrierefreie Navigation, egal ob durch ein Menü oder durch interne Verlinkungen, sorgt dafür, dass alle Menschen – unabhängig von ihren Fähigkeiten – gleichberechtigt Informationen finden und nutzen können.

Die Tastaturbedienung ist ebenfalls ein wichtiger Aspekt der Barrierefreiheit. Viele Nutzer, zum Beispiel Menschen mit motorischen Einschränkungen oder blinde Nutzer, bedienen Webseiten ausschließlich mit der Tastatur.

Was Sie tun sollten:

Alle Funktionen per Tastatur zugänglich machen:

Grundlegend kann man sagen: Wenn man etwas mit der Mouse bedienen kann, dann muss es auch ohne Mouse möglich sein. Dropdown-Menüs, Buttons, Formulare und andere interaktive Elemente müssen egal wie bedienbar sein. Verwenden Sie Standard-HTML-Elemente oder ARIA-Attribute, um eine vollständige Bedienung mit Tastatur zu ermöglichen.

Was ist ARIA?: ARIA (Accessible Rich Internet Applications) ist ein Standard, der Webinhalte und -anwendungen für Menschen mit Behinderungen besser zugänglich macht. Er ergänzt HTML um spezielle Attribute, die Screenreadern zusätzliche Informationen über Struktur und Funktion von Elementen liefern. So können komplexe Benutzeroberflächen barrierefrei gestaltet werden.

Aber Vorsicht! ARIA-Attribute sollten gezielt und korrekt eingesetzt werden. Falsch verwendet, kann es die Zugänglichkeit sogar verschlechtern.
Die Regel lautet: "Native HTML first, ARIA only when necessary."

Logische Tab-Reihenfolge einhalten:

Nutzer sollten mit der Tab-Taste in einer sinnvollen Reihenfolge durch alle interaktiven Elemente navigieren können – von links nach rechts, von oben nach unten.

Tastatur-Fallen vermeiden:

Nutzer dürfen nie in einem Element "gefangen" sein. Aus jedem Modal, Dropdown oder Widget muss es einen Ausweg geben (meist ESC-Taste).

Was Sie vermeiden sollten:

• Interaktive Elemente, die nur mit der Mouse funktionieren
• Unlogische Tab-Reihenfolgen (z.B. Sprünge kreuz und quer)
• Modale Fenster ohne Escape-Möglichkeit

Auszug weiterer wichtiger Aspekte:

• Zeichenbasierte Tastaturkürzel deaktivierbar machen
• Hover-Effekte die auch bei Tastaturfokus funktionieren
• Zeitgesteuerte Inhalte pausierbar machen
• Bedienung komplexer Widgets

Ein Thema was schon immer wichtig war, jetzt aber durch das Barrierefreiheitsstärkungsgesetz (BFSG) noch mehr in den Vordergrund gerückt ist, sind Überschriften und Seitentitel. Sie helfen Nutzern von Screenreadern, sich schnell einen Überblick über Struktur und Inhalt der Seite zu verschaffen. Das BFSG nimmt Anbieter stärker in die Pflicht, solche strukturellen Hilfen konsequent umzusetzen.

Was Sie tun sollten:

Aussagekräftige Seitentitel formulieren:

Der Seitentitel muss den Inhalt und Zweck der jeweiligen Seite klar und präzise wiedergeben, damit Nutzer, insbesondere mit assistiven Technologien wie Screenreadern, sich sofort orientieren können. Der Titel sollte eindeutig sein und sich von anderen Seiten derselben Website unterscheiden. Ein allgemeiner oder nichtssagender Titel wie „Startseite“ oder „Willkommen“ reicht nicht aus, wenn er keinen konkreten Bezug zum Inhalt herstellt. Das BFSG verpflichtet Anbieter dazu, solche strukturellen Hilfen bereitzustellen, damit digitale Angebote für alle gleichermaßen zugänglich sind.

Hierarchische Überschriftenstruktur verwenden:

Überschriften (H1 bis H6) müssen in einer logischen und verschachtelten Reihenfolge verwendet werden, um die inhaltliche Gliederung einer Seite korrekt abzubilden. Das erleichtert besonders Nutzern von Screenreadern die Navigation und das Verständnis der Seitenstruktur. Es sollte keine Sprünge in der Hierarchie geben (z. B. von H1 direkt zu H4), da dies zu Verwirrung führen kann. Es gibt aber Ausnahmen, da z.B. nicht immer eine direkte H2 nach der H1 thematisch sinnvoll ist, wenn sie mit anderen H2 nicht auf einer Ebene die gleiche Wichtigkeit hat.

Überschriften als Navigationshilfe nutzen:

Nutzer von Screenreadern verwenden häufig die Überschriftenstruktur, um sich schnell einen Überblick über den Seiteninhalt zu verschaffen oder gezielt zu bestimmten Abschnitten zu springen. Viele Screenreader bieten dafür eigene Kurzbefehle an (z. B. Taste „H“ für die nächste Überschrift).

Daher ist es wichtig, Überschriften nur dann zu verwenden, wenn sie auch inhaltlich Überschriften sind. Werden sie nur für optische Zwecke (z. B. große Schrift oder fette Schrift) eingesetzt, entsteht eine falsche inhaltliche Struktur, die Screenreader-Nutzer in die Irre führen kann.

Für reine Formatierungen sollte man CSS-Klassen auf normale Elemente wie <div> oder <span> anwenden, nicht aber semantisch bedeutungsvolle Tags wie <h2> missbrauchen.

Was Sie vermeiden sollten:

• Mehrere H1-Überschriften pro Seite
• Überschriften-Tags nur für das Aussehen verwenden
• Generische Seitentitel wie "Startseite" oder "Untitled"

Auszug weiterer wichtiger Aspekte:

• Landmark-Regionen (header, nav, main, aside, footer) für bessere Orientierung
• Sprachangaben für die Seite setzen
• zusammenfassende Seitenbeschreibungen
• Verwendung von ARIA-Labels

Formulare

Jedes Eingabefeld braucht ein eindeutiges Label, das Screenreader vorlesen können - verwenden Sie <label>-Tags statt nur Platzhalter-Text. Fehlermeldungen müssen konkret sagen, was falsch ist und wie es korrigiert werden kann. Pflichtfelder kennzeichnen Sie mit Sternchen (*) oder dem Wort "Pflichtfeld" zusätzlich zu visuellen Hinweisen.

Automatische Inhalte

Karussells, Slideshows oder sich bewegende Inhalte müssen pausierbar sein - Nutzer sollen selbst entscheiden, wann Inhalte weiterlaufen. Zeitlimits müssen mindestens 20 Sekunden vorher angekündigt und verlängerbar sein. Nichts darf mehr als 3 Mal pro Sekunde blinken, da dies epileptische Anfälle auslösen kann.

Multimedia-Inhalte

Videos brauchen Untertitel für alle gesprochenen Inhalte und wichtige Geräusche, Audio-Dateien benötigen vollständige Transkripte. Automatisch abspielende Medien dürfen maximal 3 Sekunden laufen oder müssen pausierbar sein. Stummschaltung allein reicht nicht aus.

Die in den bisherigen Kapiteln behandelten Themen stellen zwar die wichtigsten und häufigsten Barrieren dar, sind jedoch nur ein Auszug der umfangreichen WCAG-Richtlinien. Unser professionelles Audit berücksichtigt selbstverständlich alle relevanten Kriterien für Barrierefreiheit – von technischen Details wie Fokus-Indikatoren bis hin zu komplexeren Anforderungen wie Zeitlimits und Animationen. So stellen wir sicher, dass wirklich alle Aspekte einer barrierefreien Website erfüllt werden.

Gerne unterstützen wir Sie als erfahrene Internetagentur mit unserem umfassenden Service bei der BFSG-konformen Umsetzung Ihrer Website.

Unser Audit-Service im Überblick

Ist-Analyse: Wir prüfen Ihre Website systematisch nach WCAG 2.1 AA-Standards und identifizieren alle Barrieren – von Kontrastproblemen über fehlende Alternativtexte bis hin zur Screenreader-Kompatibilität.

Maßnahmenplanung: Sie erhalten einen detaillierten, priorisierten Katalog aller erforderlichen Anpassungen mit konkreten Lösungsansätzen und Zeitplanung.

Technische Umsetzung: Unser Entwicklerteam implementiert alle notwendigen Änderungen – von HTML-Optimierungen über ARIA-Labels bis zur Integration von Untertiteln und barrierefreien Formularen.

Qualitätssicherung: Umfangreiche Tests mit verschiedenen Hilfstechnologien stellen sicher, dass Ihre Website praktisch barrierefrei funktioniert.

Ihre Vorteile

• Rechtssicherheit: Schutz vor Bußgeldern durch vollständige BFSG-Konformität
• Erweiterte Reichweite: Erschließung neuer Zielgruppen und bessere Nutzererfahrung
• Nachhaltigkeit: Langfristige Betreuung und Schulungen für Ihr Team

Mit unserem ganzheitlichen Ansatz erhalten Sie nicht nur eine rechtskonforme Website, sondern schaffen echten Mehrwert für alle Nutzer. Kontaktieren Sie uns für eine individuelle Beratung zur barrierefreien Gestaltung Ihrer Website.

Barrierefreiheit im Web bedeutet weit mehr als nur die Einhaltung gesetzlicher Vorgaben. Es geht um gesellschaftliche Verantwortung und Inklusion - darum, Menschen mit Behinderungen die gleichberechtigte Teilhabe am digitalen Leben zu ermöglichen. Millionen von Menschen sind auf barrierefreie Websites angewiesen, um online einzukaufen, sich zu informieren oder digitale Dienstleistungen zu nutzen.

Wenn wir alle Websites barrierefrei gestalten, schaffen wir nicht nur rechtliche Sicherheit, sondern öffnen Türen für Menschen, die sonst ausgeschlossen bleiben würden. Gleichzeitig profitieren alle Nutzer von klareren Strukturen, besserer Bedienbarkeit und durchdachten Inhalten. Barrierefreiheit ist somit eine Investition in ein digitales Miteinander ohne Ausgrenzung - und ein Zeichen dafür, dass Sie Verantwortung übernehmen und alle Menschen willkommen heißen.