Barrierefreie Websites und Software: So wird Ihr Online-Angebot inklusiv
Eine barrierefreie Website (auch Web Accessibility genannt) ist ein Online-Angebot, das für alle Nutzer*innen, auch für jene mit Seh-, Hör-, motorischen oder kognitiven Einschränkungen, ohne Barrieren zugänglich ist. Das bedeutet beispielsweise, dass blinde Menschen mit einem Screenreader alle Inhalte erfassen können oder dass Videos Untertitel für gehörlose Menschen bieten. Barrierefreiheit im Web ist wichtig, da sie gesellschaftliche Teilhabe fördert und wirtschaftliche Vorteile bringt. Rund 15-16 % der Weltbevölkerung (etwa 1,3 Mrd. Menschen) leben mit einer Behinderung. Dennoch sind über 95 % der Webseiten nicht vollständig barrierefrei. Unternehmen riskieren also, eine große Nutzergruppe auszuschließen und verlieren dadurch potenzielle Kundschaft. 74 % der befragten Unternehmen vermuten sogar, bereits Kunden wegen fehlender Barrierefreiheit verloren zu haben. Umgekehrt berichten 38 % der Unternehmen nach Umsetzung barrierefreier Funktionen von Umsatzsteigerungen und 39 % sogar von besseren SEO-Rankings. Barrierefreiheit zahlt sich also doppelt aus: Sie ist fair und fördert den Geschäftserfolg.
Um noch mehr zu erfahren, berichten wir in diesem praktischen How-to-Guide, wie Sie digitale Barrierefreiheit umsetzen können. Dies reicht von wichtigen Standards (WCAG 2.1, BITV 2.0) über typische Barrieren (fehlende Alt-Texte, unstrukturierte Überschriften, zu geringe Kontraste etc.) bis hin zu konkreten Tests und Tools (z.B. Screenreader-Selbsttest, Farbkontrast-Checker). Auch die barrierefreie Gestaltung von PDF-Dokumenten und Software-Oberflächen wird beleuchtet. Am Ende finden Sie einen Quick-Check in 5 Schritten, mit dem Sie Ihre eigene Website sofort auf Barrierefreiheit prüfen können.
Was sind die WCAG und BITV?
WCAG-Richtlinien
Die Web Content Accessibility Guidelines (WCAG) sind internationale Richtlinien für barrierefreie Webinhalte, herausgegeben von der Web Accessibility Initiative (WAI) des W3C. Aktuell gilt WCAG 2.1 (seit 2018) als maßgeblicher Standard. Sie ergänzt WCAG 2.0 um Kriterien insbesondere für mobile und kognitive Barrierefreiheit. Die WCAG sind in vier Grundprinzipien organisiert – Wahrnehmbarkeit, Bedienbarkeit, Verständlichkeit, Robustheit – und enthalten testbare Erfolgskriterien auf Stufe A, AA und AAA. Obwohl WCAG selbst kein Gesetz ist, bilden sie die Basis vieler Gesetze weltweit. In der EU verlangt z.B. die EN 301 549-Norm die Einhaltung der WCAG 2.1.
Grafik mit 4 Grundprinzipien und Link zum mehr erfahren
BITV 2.0
Die Barrierefreie-Informationstechnik-Verordnung ist die deutsche Verordnung, die WCAG-Vorgaben für öffentliche Websites umsetzt. Seit 2011 fordert die BITV 2.0 von Bundesbehörden und öffentlichen Stellen, ihre Websites und mobilen Apps barrierefrei zu gestalten. Konkret verweist die BITV 2.0 auf die europäische Norm EN 301 549 (welche wiederum WCAG 2.1 beinhaltet) und macht zusätzliche Vorgaben, etwa zur Bereitstellung von Inhalten in Leichter Sprache und Gebärdensprache für Behördenwebsites.
Wer muss WCAG/BITV einhalten?
Bisher galt, dass vor allem öffentliche Stellen zur Barrierefreiheit verpflichtet sind (inkl. Erklärung zur Barrierefreiheit und Feedback-Möglichkeit für Nutzer). Für private Unternehmen gab es keine generelle Pflicht, doch das ändert sich. Ab dem 28. Juni 2025 greift in Deutschland das Barrierefreiheitsstärkungsgesetz (BFSG), mit dem die EU-Richtlinie 2019/882 (European Accessibility Act) umgesetzt wird. Dann müssen viele Produkte und Dienstleistungen, wie beispielsweise Online-Shops, E-Commerce und Software für Endverbraucher, ein Mindestmaß an Barrierefreiheit bieten. Unternehmen, die nicht nachziehen, drohen dann rechtliche Konsequenzen. Es lohnt sich also, frühzeitig WCAG-konforme, barrierefreie Angebote zu schaffen, und zwar nicht nur aus Compliance-Gründen, sondern auch um neue Kundengruppen zu erreichen und ein modernes, inklusives Image zu pflegen.
Digitale Barrierefreiheit umsetzen: Typische Barrieren erkennen und beheben
Bevor wir zu Tests und Tools kommen, schauen wir auf die häufigsten Barrieren auf Websites und wie man diese beseitigt. Studien zeigen, dass bestimmte Fehler immer wieder auftreten. Eine deutsche Analyse von 1.000 Websites (2025) ergab beispielsweise, dass über 80 % der Websites Probleme bei Beschriftungen (z.B. fehlende Textlabels oder Anleitungen) aufweisen. Fast 75 % haben Schwierigkeiten mit der Farbwahrnehmung (Kontrast), und über 66 % eine nicht einfache Navigation. Die folgenden Punkte fassen die typischen Barrieren zusammen und bieten jeweils Tipps zur Lösung:
- Bilder ohne Alt-Text
Fehlende Alt-Texte gehören zu den häufigsten Accessibility-Problemen. Nutzer*innen von Screenreadern erfahren dann nicht, was auf einem Bild dargestellt ist. Die Lösung: Hinterlegen Sie für jedes Bild einen aussagekräftigen Alternativtext, der den Bildinhalt beschreibt. Beispiel: Statt alt=“Foto“ besser alt=“In ein Smartphone ist am unteren Ende ein Ladekabel eingesteckt.“. Gute Alt-Texte helfen nicht nur blinden Nutzern, sondern verbessern sogar das SEO-Ranking, da Suchmaschinen Alt-Texte indexieren. - Unstrukturierte Überschriften
Überschriften (H1 bis H6) werden oft falsch verwendet oder ausgelassen, was die Orientierung erschwert. Beinahe 50 % der getesteten Websites zeigten eine fehlerhafte Überschriften-Hierarchie. Die Lösung: Nutzen Sie Überschriften-Tags in logischer Reihenfolge (eine einzige H1 pro Seite, darunter hierarchisch H2, H3 etc.). Keinesfalls sollten Überschriften nur durch visuelles Fett/STIL ausgezeichnet werden, Sie sollten immer die korrekten HTML-Tags nutzen. Eine klare Überschriftenstruktur ermöglicht Screenreader-Nutzern, von Überschrift zu Überschrift zu springen und den Inhalt zu überfliegen. Gleichzeitig ist sie ein wichtiges Kriterium für SEO. - Geringer Farbkontrast
Texte oder Bedienelemente mit zu niedrigem Kontrast zum Hintergrund sind für sehbehinderte oder farbfehlsichtige Menschen schlecht lesbar. Fast 75 % der untersuchten Webseiten litten unter unzureichenden Kontrasten. Die Lösung: Stellen Sie sicher, dass das Kontrastverhältnis zwischen Text und Hintergrund mindestens 4,5:1 beträgt (für normale Schrift und gemäß WCAG 2.1 AA). Nutzen Sie Online-Tools oder Browser-Extensions, um Kontraste zu prüfen. Beispiel: Dunkelgrauer Text auf hellgrauem Grund ist problematisch; schwarzer Text auf weißem Grund erreicht hingegen einen hohen Kontrast. Ein hoher Kontrast verbessert die Lesbarkeit für alle Nutzer. - Unklare Linktexte
Links, die nur „hier klicken“ heißen, sagen nichts über ihr Ziel aus ,was für Screenreader-Nutzer und überhaupt alle User verwirrend ist. Über 68 % der Websites verwenden unklare oder irreführende Linktexte. Die Lösung: Verwenden Sie selbsterklärende Linktexte, die auch aus dem Kontext genommen verständlich sind (z.B. „Produktdatenblatt als PDF herunterladen“ statt „Download“). So wissen alle sofort, wohin ein Link führt. - Fehlende Formular-Beschriftungen
Formularelemente (Eingabefelder, Dropdowns, Checkboxen etc.) ohne Label erschweren Nutzern die Eingabe und insbesondere Screenreader-Nutzer erfahren nicht, welches Feld was bedeutet. Die Lösung: Nutzen Sie stets das <label>-Element, um Formularfelder zu beschriften, oder aria-labels, wenn visuell kein Label dargestellt wird. Ideal ist, wenn ein Klick auf den Label-Text den Fokus ins zugehörige Feld setzt. So einen Label-Test können Sie leicht durchführen: Klicken Sie auf das Wort „Name“ neben einem Eingabefeld. Springt dann der Cursor ins Feld, ist alles richtig verbunden. - Keine Untertitel oder Transkripte für Medien
Videos ohne Untertitel schließen gehörlose Menschen aus und Audiodateien ohne Transkript sind für Hörbehinderte nicht nutzbar. Die Lösung: Stellen Sie für Videos zumindest Untertitel bereit (oder Gebärdensprachdolmetschung für wichtige Inhalte) und bieten Sie für Audio-Inhalte schriftliche Transkripte an. Plattformen wie YouTube können automatische Untertitel generieren, die Sie nachbearbeiten können. Alternativ können Sie ein Video inhaltlich zusammenfassen, wenn das Bereitstellen von Untertiteln nicht möglich ist. - Komplizierte Sprache
Sehr lange Schachtelsätze, Fachjargon und Abkürzungen ohne Erklärung können für viele Menschen (z.B. mit kognitiven Beeinträchtigungen oder geringer Sprachkenntnis) eine Barriere darstellen. Die Lösung: Schreiben Sie klar und verständlich. Nutzen Sie kurze Sätze und erklären Sie notwendige Fachbegriffe in einfachen Worten. Erwägen Sie gegebenenfalls eine Version in Leichter Sprache für wichtige Informationen. Diese ist für rechtliche Hinweise bei Behördenwebsites sogar vorgeschrieben. Aber auch für Unternehmen kann einfache Sprache die Usability erhöhen, was letztlich allen Nutzern zugutekommt.
GOOD TO KNOW
Weitere mögliche Barrieren betreffen beispielsweise bewegliche Inhalte (Animationen, Auto-Scrolling), die man abschaltbar machen sollte, oder die vollständige Tastatur-Bedienbarkeit. Mehr dazu im nächsten Abschnitt.
Wie teste ich meine Website auf Barrierefreiheit?
Nachdem Sie nun wissen, worauf zu achten ist, stellt sich die Frage: Wie prüft man eine Website auf Barrierefreiheit? Idealerweise kombinieren Sie automatisierte Tests mit manuellen Prüfungen:
- Automatisierter Check
Nutzen Sie Accessibility-Scanner, um einen ersten Überblick über Probleme zu erhalten. Beliebt sind z.B. WAVE (Web Accessibility Evaluation Tool) oder Google Lighthouse (in Chrome DevTools). Diese Tools finden viele gängige Fehler auf Knopfdruck. Ein Tool wie WAVE zeigt beispielsweise an, welche Bilder keinen Alt-Text haben und ob Überschriften korrekt strukturiert sind. Lighthouse generiert einen Accessibility-Score (0-100) und listet Verbesserungsmöglichkeiten. Achtung: Kein Tool erkennt alle Barrieren, aber sie sind ein guter Start, um offensichtliche Mängel (Kontrast, fehlende Labels, etc.) aufzudecken. - Manueller Schnelltest
Einige einfache Handgriffe geben Ihnen schnell Aufschluss über die Zugänglichkeit:- Tastatur-Test
Versuchen Sie, Ihre Website nur mit der Tastatur zu bedienen. Nutzen Sie die Tab-Taste, um von Link zu Link oder Feld zu Feld zu springen. Können Sie alle interaktiven Elemente erreichen? Ist stets sichtbar, wo der Fokus gerade ist (z.B. durch einen farbigen Rahmen)? Die Reihenfolge der Fokus-Stationen sollte logisch der visuellen Anordnung folgen. Wenn hier Probleme auftauchen (z.B. Menüs nicht per Tastatur erreichbar), besteht Handlungsbedarf. - Screenreader-Selbstversuch
Installieren Sie einen Screenreader (für Windows z.B. den kostenlosen NVDA, für Mac ist VoiceOver bereits integriert) und lassen Sie sich ausgewählte Seiten vorlesen. Achten Sie darauf, ob alle Inhalte verständlich angesagt werden. Dies gilt insbesondere für Überschriften, Links, Bilder (Alt-Texte) und Formularfelder. Ein Screenreader-Test bietet wertvolle Einblicke, denn Sie merken sofort, wenn Bilder nicht beschrieben sind oder die Navigationsreihenfolge unlogisch ist.
- Tastatur-Test
Tipp: Viele mobile Geräte haben ebenfalls eingebaute Screenreader, etwa TalkBack auf Android oder VoiceOver auf iOS, die Sie testweise nutzen können.
- Formular-Check
Prüfen Sie, ob Formularelemente korrekt beschriftet sind. Wie oben erwähnt, klicken Sie dazu auf die Textlabels neben Eingabefeldern und schauen Sie, ob der Cursor ins richtige Feld springt. Testen Sie auch Fehlermeldungen: Werden Formularfehler deutlich angezeigt und evtl. auch per Screenreader ausgegeben? - Kontrast-Check
Nutzen Sie ein Farbkontrast-Tool (z.B. den WebAIM Contrast Checker online), um Kontrastverhältnisse von Text/Bild und Hintergrund zu überprüfen. Viele Browser-Entwicklertools bieten ebenfalls Kontrastprüfungen an. Achten Sie besonders auf Fließtexte und wichtige UI-Elemente (Buttons, Links). Wenn das Tool Alarm schlägt (unter 4.5:1 Kontrast), passen Sie Farben oder Schriftgrößen an. - Struktur-Überblick
Verschaffen Sie sich einen Überblick über die Seitenstruktur. Tools wie der WAVE Structural Outline oder Browser-Plugins wie Accessibility Insights können alle Überschriften einer Seite hierarchisch auflisten. So erkennen Sie schnell, ob die Struktur logisch ist oder z.B. Überschrift-Level übersprungen werden. Ebenso können Sie die Seite mit Stylesheets ausgeschaltet betrachten. Sind alle Inhalte noch in sinnvoller Reihenfolge vorhanden? Das zeigt, ob Ihr Code semantisch korrekt aufgebaut ist.
Experten-Audit
Für eine vollständige Prüfung (insbesondere wenn Sie gesetzliche Nachweispflichten haben) kann es sinnvoll sein, externe Experten oder Prüfinstitutionen einzubeziehen. In Deutschland bietet beispielsweise die BITV-Test–Prüfstelle umfangreiche Tests an. Diese orientieren sich an fest definierten Prüfschritten der BITV/WCAG und liefern Ihnen einen detaillierten Bericht. Ein professionelles Audit geht über automatisierte Tests hinaus und beinhaltet z.B. das Prüfen mit unterschiedlichen Assistenztechnologien und Nutzerprofilen.
GOOD TO KNOW
Kein Test der Welt ersetzt das Feedback echter Nutzer*innen mit Behinderungen. Wenn möglich, beziehen Sie Personen aus der Zielgruppe in Usability-Tests ein. Deren Erfahrungen sind durch kein Tool komplett simulierbar.
Welche Tools helfen bei Accessibility-Tests?
Zum Glück gibt es eine Reihe von hilfreichen Tools, die Webentwicklern und Content-Verantwortlichen die Prüfung und Umsetzung von Barrierefreiheit erleichtern. Hier eine Auswahl bewährter Tools und Hilfsmittel:
- WAVE Evaluation Tool
Ein kostenloses Werkzeug (als Web-App oder Browser-Extension) von WebAIM, das Webseiten auf Knopfdruck analysiert. WAVE markiert Probleme direkt auf der Seite, wie beispielsweise fehlende Alt-Texte, Formfelder ohne Label, geringe Kontraste, und gibt Erklärungen dazu. Dies ist ideal für einen schnellen Check einzelner Seiten. - Google Lighthouse
In Chrome und Edge ist Lighthouse integriert (Developer Tools → Tab “Lighthouse”). Es erstellt einen Accessibility-Report mit Score und listet Auffälligkeiten wie beispielsweise fehlende Button-Beschriftungen. Lighthouse ist gut für einen ersten Überblick und lässt sich auch automatisiert in Testprozesse einbinden. - axe DevTools
Ein weiterer Auditor (von Deque Systems), als Browser-Plugin verfügbar. axe ist auf Entwickler zugeschnitten und entdeckt viele WCAG-Verstöße. Es integriert sich auch in Testing-Frameworks, um Barrierefreiheit im Entwicklungsprozess zu prüfen. - Accessibility Insights for Web
Microsofts Browser-Extension bietet sowohl Schnellprüfungen als auch Guided Tests. Besonders nützlich ist der Tab-Stopp-Visualisierer, der die Tabulator-Reihenfolge und Fokus sichtbar macht, sowie der Headings-Viewer für Überschriften. - Screenreader (zum Testen)
Für umfassende manuelle Tests sind Screenreader unverzichtbar. NVDA (Windows) und JAWS (kommerziell, Windows) sowie VoiceOver (Mac/iOS) sind die gängigsten. Zum Testen einer Website können Sie NVDA kostenlos nutzen. Achten Sie darauf, typische Nutzerpfade nachzuvollziehen (z.B. per Tab durch die Navigation springen, Überschriftenmodus verwenden, Formular ausfüllen). So decken Sie viele Barrieren praktisch auf. - Kontrast-Checker
Neben den erwähnten WebAIM-Contrast-Checker gibt es auch Desktop-Tools (z.B. TPGi Colour Contrast Analyzer) und Browser-Plugins, um Farbkontraste zu prüfen. Diese Tools sind einfach zu bedienen: Pipette auf Text und Hintergrund anwenden und Kontrastwert ablesen. Ein Ampelsymbol zeigt sofort an, ob die WCAG-Mindestanforderungen erfüllt sind. - HTML-Validator & Linting
Ein valider, semantischer HTML-Code ist die Basis der Barrierefreiheit. Nutzen Sie W3C Markup Validation oder Linters in Ihrer Entwicklungsumgebung, um fehlerhaften Code zu vermeiden. Zum Beispiel sollten keine doppelten ID Attribute vorhanden sein, Formulare benötigen Submit-Buttons, jeder <img> braucht ein alt-Attribut etc. Ein sauberer Code macht es Assistenztechnologien leichter, die Seite korrekt zu interpretieren.
BITV-Test Selbstbewertung
Auf https://www.bitvtest.de finden Sie Checklisten und das Bookmarklet „Inhalte gegliedert“, mit denen Sie selbst Schritt für Schritt Ihre Seite prüfen können. Die Website bietet zudem viele Erklärungen zu jedem Prüfschritt der BITV/WCAG. Dies ist hilfreich, um die Kriterien von Überschriften-Struktur über Skalierbarkeit bis zu ARIA-Einsatz besser zu verstehen.
GOOD TO KNOW
Denken Sie auch an Mobile Accessibility. Testen Sie Ihre Seite auf Smartphones und Tablets, mit verschiedenen Zoomstufen und unter Nutzung der eingebauten Bedienungshilfen (Screenreader, hoher Kontrast Modus, etc.). Mobile Test-Tools wie Google’s Accessibility Scanner (für Android) können Apps auf Barrieren checken.)
Wie mache ich PDF-Dokumente barrierefrei?
Barrierefreiheit endet nicht bei Ihrer Website, denn auch PDF-Dateien auf Ihrer Seite sollten barrierefrei sein, damit alle Nutzer sie lesen können. Ein barrierefreies PDF ist so aufbereitet, dass beispielsweise Screenreader den Text in korrekter Reihenfolge vorlesen und alle Inhalte verständlich ausgeben können. Wichtig dabei sind vor allem folgende Aspekte:
- Semantische Struktur mit Tags
PDFs benötigen sogenannte Tags, die Überschriften, Absätze, Listen etc. auszeichnen, analog zu HTML-Tags bei Webseiten. Diese Tags definieren auch die Lesereihenfolge. Ohne Tags sieht ein Screenreader nur “Chaos”. Die Lösung: Nutzen Sie beim Erstellen (z.B. in Word) die Formatvorlagen für Überschriften, Listen usw. und erzeugen Sie die PDF mit Tags (Export-Option “Tags für Barrierefreiheit erstellen” aktivieren). So werden die Strukturen des Quelldokuments ins PDF übernommen. Nachträgliches Taggen im PDF ist möglich (z.B. mit Adobe Acrobat), aber aufwändig. - Alternativtexte in PDF
Genau wie bei Webseiten brauchen eingebettete Bilder in PDFs Alt-Texte. In Ihrem PDF-Editor können Sie jedem nicht-dekorativen Bild eine Beschreibung hinzufügen, damit z.B. ein Firmenlogo oder Schaubild für alle verständlich wird. - PDF/UA-Standard
Orientieren Sie sich am Standard PDF/UA (ISO 14289), der speziell beschreibt, wie PDF-Barrierefreiheit technisch umzusetzen ist. Wenn Ihr PDF diesem Standard entspricht, erfüllt es im Wesentlichen auch WCAG. Viele Prüfwerkzeuge nutzen PDF/UA als Grundlage. - Formulare in PDF
Falls Ihr PDF Formularfelder enthält (z.B. ausfüllbare PDFs), achten Sie darauf, dass jedes Feld eine Beschriftung hat und die Tab-Reihenfolge logisch ist. In Adobe Acrobat Pro können Sie Formularfelder benennen und die Reihenfolge einstellen.
Prüfung und Nachkontrolle
Nutzen Sie spezielle Prüftools für PDF-Barrierefreiheit. Ein bekanntes kostenloses Tool ist der PDF Accessibility Checker (PAC), aktuell in Version PAC 2024. PAC prüft automatisch die PDF/UA- und WCAG-Konformität eines PDFs und listet Fehler auf. Aber bedenken Sie: PAC findet maschinell erkennbare Probleme, aber eine manuelle Prüfung (z.B. mit einem Screenreader durch das PDF navigieren) ist ergänzend sinnvoll. Adobe Acrobat Pro bietet ebenfalls einen “Barrierefreiheits-Check”, der durch das Dokument führt und auf fehlende Alt-Texte oder Strukturprobleme hinweist.
GOOD TO KNOW
Öffentliche Stellen sind gesetzlich verpflichtet, PDFs barrierefrei anzubieten. Aber auch Unternehmen sollten wichtige PDFs – wie Produktbroschüren oder Whitepapers – freiwillig barrierefrei bereitstellen. Das erhöht die Reichweite Ihrer Informationen und zeugt von Inklusionsbewusstsein.
Quick-Check: 5 Schritte zum Accessibility-Check
Möchten Sie sofort überprüfen, wie inklusiv Ihr Online-Angebot schon ist? Mit diesem Quick-Check können Sie in wenigen Minuten die größten Barrierefreiheitssünden aufdecken: PDF
- Überschriften-Struktur prüfen
Gibt es eine klare Hierarchie? Öffnen Sie Ihre Startseite und drücken Sie nacheinander H (im Screenreader-Modus) oder verwenden Sie ein Tool, das alle Überschriften auflistet. Wenn Überschriften-Level übersprungen werden oder wichtige Teile gar keine Überschrift haben, sollten Sie nachbessern. Jede Seite braucht eine einzigartige H1, darunter logisch H2, H3 etc. Beispiel für gute Struktur: H1 = Seitentitel; H2 = Hauptabschnitte; H3 = Unterpunkte unter H2, etc. - Tastaturnavigation testen
Navigieren Sie per Tab durch die Seite. Achten Sie darauf, dass alle interaktiven Elemente fokussierbar sind und in sinnvoller Reihenfolge durchlaufen werden. Prüfen Sie auch, ob Menüs, Slider und Pop-ups per Tastatur bedienbar sind. Wenn Sie irgendwo “stecken bleiben” oder der Fokus springt, liegt ein Problem vor. Ein häufiger Fehler: Elemente, die nur mit Hover funktionieren, sollten alternative Auslöser für Keyboard-Nutzer haben. - Kontrast messen
Nutzen Sie ein Online-Tool oder Browser-Plugin, um Kontrastwerte Ihrer Texte zu ermitteln. Testen Sie insbesondere Fließtexte (kleinere Schrift) und sekundäre Buttons/Links. Erfüllen Sie die 4.5:1 Regel für Normaltext? Falls nicht, passen Sie Farben oder Schriftgrößen an, beispielsweise durch dunklere Schrift, helleren Hintergrund oder größere Fontsize. Denken Sie daran, dass auch grafische Texte (z.B. Text im Bannerbild) genügend Kontrast haben müssen. - Bilder und Grafiken checken
Schalten Sie in Ihrem Browser die Anzeige von Bildern aus (oder betrachten Sie den Quelltext): Sehen Sie Alternativtexte an Stelle der Bilder? Wenn nein, fehlen alt-Attribute. Ergänzen Sie diese mit sinnvollen Beschreibungen. Sind die Alt-Texte zu allgemein (z.B. alle Bilder nur “Bild” betitelt)? Verbessern Sie sie, damit sie den Inhalt wiedergeben. Ein schneller Weg: Lassen Sie sich per WAVE-Tool die vorhandenen Alt-Texte anzeigen und überprüfen Sie ihre Aussagekraft. - Formular ausprobieren
Füllen Sie ein zentrales Formular (z.B. Kontaktformular) testweise aus. Fehlen irgendwo Beschriftungen? Werden Fehlermeldungen deutlich angezeigt? Versuchen Sie, das Formular ohne Maus auszufüllen: per Tab von Feld zu Feld, Leertaste bei Checkboxen, Enter zum Absenden. Klappt das reibungslos? Wenn nicht, sollten Sie Ihre Formulare überarbeiten, meist durch das Hinzufügen von <label>-Elementen und korrektes HTML-Markup. Als positives Signal gilt: Klickt man auf ein Textfeld-Label und der Cursor erscheint im Feld, ist die Zuordnung korrekt.
Wenn Sie diesen Quick-Check durchgeführt haben, haben Sie bereits einen guten Eindruck vom Ist-Zustand Ihrer Website. Natürlich ersetzt dies keine umfassende WCAG-Prüfung, aber erfahrungsgemäß lassen sich mit diesen 5 Schritten schon 90 % der typischen Barrieren erkennen.
Fazit
Ein inklusives Webangebot zu schaffen, erfordert etwas Aufwand, aber es lohnt sich für alle Beteiligten. Digitale Barrierefreiheit umsetzen heißt, alle Nutzer willkommen zu heißen, unabhängig von Behinderung, Gerät oder Situation. Nutzen Sie die oben genannten Standards, beseitigen Sie typische Barrieren und prüfen Sie regelmäßig mit den genannten Tools und Tests. So wird Ihr Online-Angebot Schritt für Schritt inklusiv und zukunftsfähig. Denken Sie daran: Barrierefreiheit ist kein einmaliges Projekt, sondern ein fortlaufender Prozess der Qualitätsverbesserung, der Ihre Website für eine größere Zielgruppe zugänglich und benutzbar macht.
Starten Sie am besten noch heute mit dem Quick-Check – und machen Sie Ihre Website inklusionsfit!