Eine Website scheitert selten an einem einzelnen großen Fehler. Häufig sind es kleine Hürden: ein Menü, das nur mit der Maus funktioniert, ein Formular ohne verständliche Fehlermeldung oder ein Text mit zu geringem Kontrast. Die wichtigsten Elemente barrierefreier Websites setzen genau dort an. Sie sorgen dafür, dass mehr Menschen Inhalte finden, verstehen und nutzen können – unabhängig von Sehvermögen, Motorik, Hörvermögen, Sprache oder verwendeter Technik.
Für Unternehmen ist das keine reine Spezialanforderung. Barrierefreiheit verbessert oft auch die Bedienbarkeit auf dem Smartphone, die Qualität von Inhalten, die Auffindbarkeit in Suchmaschinen und die Conversion. Gleichzeitig steigen die rechtlichen und organisatorischen Anforderungen, besonders bei öffentlichen Stellen und in bestimmten Bereichen des privaten Angebots. Entscheidend ist, Barrierefreiheit nicht als spätes Zusatzmodul zu behandeln, sondern als festen Bestandteil von Konzeption, Design, Entwicklung und laufender Betreuung.
Inhaltsverzeichnis
ToggleBarrierefreiheit beginnt bei klaren Inhalten
Eine technisch sauber programmierte Seite hilft wenig, wenn Inhalte unnötig kompliziert formuliert sind. Besucherinnen und Besucher müssen rasch erkennen, worum es geht, welche Leistung angeboten wird und was als Nächstes zu tun ist. Klare Überschriften, kurze Absätze und eindeutig beschriftete Buttons sind daher grundlegende Bausteine.
Ein Button mit der Bezeichnung „Mehr“ lässt offen, was passiert. „Produktdetails ansehen“ oder „Termin anfragen“ ist konkreter. Auch Formulare profitieren von klarer Sprache: Statt einer allgemeinen Meldung wie „Eingabe ungültig“ sollte die Website sagen, welches Feld fehlt und wie die Eingabe korrekt aussehen muss.
Dabei geht es nicht darum, jede Seite künstlich zu vereinfachen. Ein technisches B2B-Angebot darf fachlich präzise sein. Es sollte aber Begriffe erklären, Informationen logisch gliedern und wichtige Aussagen nicht allein über Bilder, Farben oder Animationen vermitteln. Wer seine Inhalte für Menschen verständlich strukturiert, schafft zugleich eine bessere Grundlage für Beratung und Vertrieb.
Die wichtigsten Elemente barrierefreier Websites im Überblick
Die internationalen WCAG-Richtlinien bilden in der Praxis einen wichtigen Orientierungsrahmen. Sie lassen sich vereinfacht auf vier Fragen reduzieren: Kann ein Inhalt wahrgenommen werden? Ist er bedienbar? Ist er verständlich? Funktioniert er zuverlässig mit unterschiedlichen Geräten und Hilfstechnologien? Für die Umsetzung ergeben sich daraus mehrere konkrete Anforderungen.
Kontraste, Schriftgrößen und visuelle Orientierung
Text muss sich klar vom Hintergrund abheben. Helle graue Schrift auf weißem Grund wirkt in einem Designentwurf manchmal zurückhaltend, ist im Alltag aber für viele Menschen schwer lesbar. Besonders betroffen sind Personen mit Sehschwäche, bei ungünstigem Licht oder auf kleineren Displays.
Auch die Schriftgröße, Zeilenhöhe und Absatzbreite beeinflussen die Lesbarkeit. Sehr kleine Schrift spart zwar Platz, erhöht aber die Anstrengung. Relevante Inhalte müssen beim Vergrößern weiterhin nutzbar bleiben. Wichtig ist außerdem, Informationen nicht nur über Farbe zu unterscheiden. Ein Pflichtfeld darf etwa nicht ausschließlich durch einen roten Rahmen erkennbar sein. Ein zusätzlicher Hinweis oder eine verständliche Beschriftung gehört dazu.
Tastaturbedienung statt Mauszwang
Nicht alle Menschen bedienen eine Website mit Maus oder Touchscreen. Manche verwenden die Tastatur, Sprachsteuerung oder spezielle Eingabegeräte. Deshalb müssen Navigation, Suche, Formulare, Filter, Warenkorb und alle interaktiven Elemente per Tastatur erreichbar und sinnvoll bedienbar sein.
Besonders häufig treten Probleme bei aufklappbaren Menüs, Pop-ups, Slidern und individuell entwickelten Filtern auf. Der Fokus kann dort verschwinden oder in einem Fenster hängen bleiben. Sichtbare Fokusmarkierungen zeigen, welches Element gerade aktiv ist. Sie werden im Designprozess manchmal entfernt, weil sie optisch nicht gewünscht sind. Für die Bedienung sind sie jedoch unverzichtbar und sollten bewusst in das Erscheinungsbild integriert werden.
Sinnvolle Struktur für Screenreader
Screenreader lesen Webseiten vor und ermöglichen die Navigation über Überschriften, Links, Bereiche und Formularelemente. Damit das funktioniert, braucht eine Seite eine saubere semantische Struktur. Eine Hauptüberschrift beschreibt das Thema der Seite, weitere Überschriften ordnen die Inhalte hierarchisch. Überschriften dürfen nicht nur wegen ihrer Schriftgröße gewählt werden.
Bilder benötigen einen passenden Alternativtext, wenn sie eine Information transportieren. Ein dekoratives Hintergrundbild muss dagegen nicht mit einer langen Beschreibung versehen werden. Der Alternativtext soll den Zweck des Bildes erklären, nicht jedes sichtbare Detail aufzählen. Bei einem Produktbild kann die Produktbezeichnung sinnvoll sein, bei einer Infografik braucht es häufig eine gleichwertige Textalternative.
Auch Links verlangen Präzision. Mehrere Links mit „Hier klicken“ sind für Screenreader-Nutzerinnen und -Nutzer wenig hilfreich, weil sie außerhalb des Satzkontexts gleich klingen. Aussagekräftige Linktexte machen deutlich, wohin der nächste Schritt führt.
Formulare, Fehlermeldungen und Kaufprozesse
Formulare sind für viele Unternehmen geschäftskritisch: Kontaktanfragen, Newsletter-Anmeldungen, Terminbuchungen oder Bestellungen. Gerade hier führt eine schlechte Barrierefreiheit direkt zu verlorenen Anfragen und abgebrochenen Käufen.
Jedes Eingabefeld braucht eine dauerhaft sichtbare Bezeichnung. Platzhaltertexte im Feld reichen nicht aus, weil sie beim Tippen verschwinden und oft zu kontrastarm sind. Pflichtfelder, Formatvorgaben und Hilfetexte sollten vor dem Absenden verständlich erklärt werden. Tritt ein Fehler auf, muss die Meldung konkret sein und das betroffene Feld eindeutig zugeordnet werden.
Im Webshop kommen weitere Punkte dazu: Varianten müssen verständlich auswählbar sein, Preise und Lieferinformationen klar erkennbar bleiben, und der Checkout darf keine überraschenden Sprünge verursachen. Komplexe Produktkonfiguratoren lassen sich nicht immer vollständig vereinfachen. Dann braucht es zumindest eine nachvollziehbare Schrittfolge, klare Rückmeldungen und gegebenenfalls einen gut erreichbaren persönlichen Kontaktweg.
Medien ohne Ausschluss
Videos, Audioinhalte und bewegte Elemente können Inhalte anschaulich vermitteln, schaffen aber ohne Ergänzungen neue Hürden. Untertitel helfen nicht nur gehörlosen Menschen, sondern auch Nutzern in lauter Umgebung oder beim stillen Ansehen eines Videos. Für wichtige gesprochene Inhalte können Transkripte sinnvoll sein. Wenn ein Video wesentliche Bildinformationen enthält, etwa die Erklärung eines Montagevorgangs, muss diese Information auch anders zugänglich sein.
Automatisch startende Videos, Karussells oder Animationen sollten sparsam eingesetzt werden. Bewegung kann ablenken, Beschwerden auslösen oder die Konzentration erschweren. Wo Bewegung notwendig ist, sollten Besucher sie pausieren oder stoppen können. Hier entscheidet der konkrete Zweck: Ein kurzer, kontrollierbarer Effekt kann Orientierung schaffen, ein dauerhaft rotierender Banner meist nicht.
Technik und Design müssen zusammenarbeiten
Barrierefreiheit entsteht nicht allein im Code und nicht allein im Design. Ein visuell gelungenes Layout kann unzugänglich sein, wenn Kontraste, Fokuszustände oder Skalierung fehlen. Umgekehrt bleibt eine technisch korrekte Seite schwach, wenn die Inhaltsstruktur unklar und die Nutzerführung verwirrend ist.
Bei etablierten Systemen wie WordPress, TYPO3 oder Shopware hängt viel von Theme, Erweiterungen und individueller Umsetzung ab. Ein Systemwechsel ist deshalb nicht automatisch nötig. Oft lässt sich eine bestehende Website gezielt verbessern. Bei älteren Projekten muss jedoch geprüft werden, ob tiefgreifende Anpassungen wirtschaftlich sinnvoll sind oder ob ein sauber geplanter Relaunch langfristig die bessere Lösung darstellt.
Besondere Aufmerksamkeit verdienen externe Komponenten wie Cookie-Banner, Karten, Zahlungsanbieter, Chat-Tools und Buchungssysteme. Sie werden häufig eingebunden, aber nicht ausreichend getestet. Wenn der Cookie-Banner die Tastatursteuerung blockiert oder ein Zahlungsprozess nicht mit Screenreader nutzbar ist, bleibt die gesamte Customer Journey beeinträchtigt. Verantwortlich für das Nutzungserlebnis ist aus Sicht der Besucher trotzdem der Websitebetreiber.
Barrierefreiheit als fester Prozess
Ein einmaliger Schnelltest ist ein guter Anfang, aber keine dauerhafte Absicherung. Neue Inhalte, Kampagnen, Plugins und Systemupdates können bestehende Standards wieder verschlechtern. Sinnvoll ist daher ein klarer Ablauf von der Konzeption bis zur laufenden Pflege.
In der Praxis bewährt sich, zunächst die wichtigsten Nutzerwege zu prüfen: Startseite, Navigation, Kontaktaufnahme, zentrale Leistungsseiten sowie im E-Commerce Produktsuche, Warenkorb und Checkout. Danach folgen Design- und Codeprüfung, automatisierte Tests und vor allem manuelle Tests mit Tastatur und verschiedenen Bildschirmgrößen. Automatisierte Werkzeuge finden technische Auffälligkeiten schnell, erkennen aber nicht zuverlässig, ob ein Alternativtext sinnvoll ist oder eine Fehlermeldung wirklich verständlich formuliert wurde.
Für österreichische KMU zählt außerdem die Verhältnismäßigkeit. Nicht jede kleine Website benötigt sofort jede denkbare Spezialfunktion. Die Basis muss jedoch stimmen: lesbare Inhalte, klare Struktur, funktionierende Tastaturbedienung und zugängliche Kernprozesse. Wer früh plant, vermeidet kostspielige Nachbesserungen und schafft ein digitales Angebot, das mehr Menschen tatsächlich verwenden können.
Eine barrierefreie Website ist kein Zertifikat, das man einmal erreicht und dann abhakt. Sie zeigt sich in vielen sorgfältigen Entscheidungen – bei jedem neuen Inhalt, jeder Funktion und jedem Schritt, den ein Kunde online erledigen soll.