Eine Website kann technisch einwandfrei funktionieren und trotzdem schwer zu bedienen sein, wenn wichtige Aspekte der Barrierefreiheit nicht berücksichtigt werden. Kleine Schrift, schwache Kontraste, unklare Schaltflächen oder überladene Seiten erschweren vielen Menschen den Zugang zu Inhalten und Funktionen. Besonders deutlich zeigt sich das bei Sehbeeinträchtigungen, motorischen Einschränkungen oder Schwierigkeiten bei der Verarbeitung von Informationen. Doch auch ein gesprungenes Display, helles Sonnenlicht oder die Bedienung mit nur einer Hand können dazu führen, dass eine Website plötzlich weniger gut nutzbar ist.
Barrierefreies Webdesign berücksichtigt solche Situationen bereits bei der Gestaltung. Es geht darum, Inhalte klar darzustellen, Bedienelemente erkennbar zu machen und Nutzerinnen und Nutzer ohne unnötige Umwege durch die Website zu führen. Viele dieser Maßnahmen verbessern zugleich die allgemeine Benutzerfreundlichkeit.
Was barrierefreies Webdesign und digitale Barrierefreiheit bedeuten
Die Inhalte und Funktionen einer barrierefreien Website lassen sich von möglichst vielen Menschen wahrnehmen, verstehen und bedienen. Digitale Barrierefreiheit berücksichtigt dabei unterschiedliche Voraussetzungen und Nutzungssituationen. Nutzerinnen und Nutzer sollen Inhalte lesen, Videos verstehen, Formulare ausfüllen und durch Menüs navigieren können, auch wenn sie dafür eine Tastatur, einen Screenreader, eine Bildschirmvergrößerung oder ein anderes Hilfsmittel verwenden.
Farben, Schriftgrößen, Abstände und visuelle Hierarchien bestimmen, wie gut Inhalte erkennbar sind. Ebenso wichtig sind eine nachvollziehbare Seitenstruktur und eindeutig beschriftete Bedienelemente.
Barrierefreie Website erstellen: Barrierefreiheit beginnt bei der Planung
Viele Probleme entstehen bereits in der Entwurfsphase. Wird beispielsweise eine sehr helle Markenfarbe für Texte verwendet, fehlt später möglicherweise der nötige Kontrast zum Hintergrund. Werden Formulare ohne sichtbare Feldbeschriftungen entworfen, muss dieses Problem während der Entwicklung nachträglich gelöst werden.
Wer eine barrierefreie Website erstellen möchte, sollte Anforderungen an Barrierefreiheit von Anfang an in das Design einbeziehen. Farben können vor ihrer Verwendung geprüft und wiederkehrende Elemente wie Buttons oder Formulare nach einheitlichen Regeln gestaltet werden. Auch typische Nutzerwege sollten früh berücksichtigt werden. Wer einen Artikel lesen, ein Kontaktformular absenden oder ein Produkt auswählen möchte, sollte ohne unnötige Zwischenschritte ans Ziel gelangen.
Farben und Kontraste richtig einsetzen
Farben schaffen Wiedererkennung und helfen dabei, wichtige Elemente hervorzuheben. Sie können ihre Aufgabe jedoch nur erfüllen, wenn sie gut voneinander unterscheidbar sind.
Ein hellgrauer Text auf weißem Hintergrund wirkt möglicherweise zurückhaltend und modern, ist aber für viele Menschen schwer zu lesen. Ähnliche Probleme entstehen bei farbigen Buttons, deren Beschriftung kaum mit der Hintergrundfarbe kontrastiert.
Kontraste sollten deshalb nicht nur beim normalen Fließtext geprüft werden. Auch kleine Texte, Formularhinweise, Links, Icons, Fokusmarkierungen und Fehlermeldungen müssen sichtbar bleiben.
Farbe sollte außerdem nie das einzige Mittel sein, um eine Information oder einen Zustand zu vermitteln. Wird ein fehlerhaft ausgefülltes Formularfeld ausschließlich rot markiert, können Menschen mit einer Farbsehschwäche den Hinweis möglicherweise nicht erkennen. Eine verständliche Fehlermeldung und ein zusätzliches Symbol machen deutlich, welches Feld betroffen ist.
Das Gleiche gilt für Diagramme und Grafiken. Mehrere Datenreihen lassen sich besser unterscheiden, wenn zusätzlich zu Farben verschiedene Linienarten, Muster oder direkte Beschriftungen verwendet werden.
Gut lesbare Schrift wählen
Lesbarkeit hängt nicht allein von der Schriftgröße ab. Auch Schriftart, Zeilenabstand, Textbreite und Hintergrund beeinflussen, wie angenehm sich ein Text lesen lässt.
Für längere Absätze eignen sich klare Schriftarten mit gut unterscheidbaren Zeichen. Sehr dünne Schriftschnitte verlieren auf kleinen Bildschirmen schnell an Deutlichkeit. Dekorative Schriften können für kurze Überschriften funktionieren, sollten aber nicht für längere Informationen oder wichtige Hinweise verwendet werden.
Zu lange Textzeilen erschweren es, nach einem Zeilenwechsel den richtigen Anfang zu finden. Sehr kurze Zeilen unterbrechen dagegen häufig den Lesefluss. Eine begrenzte Inhaltsbreite sorgt dafür, dass Texte auch auf großen Bildschirmen übersichtlich bleiben.
Zwischen den Zeilen und Absätzen sollte genügend Abstand vorhanden sein. Dicht gesetzter Text wirkt schnell wie eine geschlossene Fläche. Mit etwas Weißraum lassen sich einzelne Gedanken leichter voneinander trennen.
Texte müssen außerdem vergrößert werden können, ohne dass Inhalte abgeschnitten werden oder sich Bereiche überlagern.
Seiten übersichtlich strukturieren
Eine klare Seitenstruktur hilft dabei, Inhalte schnell zu erfassen. Besucherinnen und Besucher erkennen dadurch, welche Informationen zusammengehören und in welcher Reihenfolge sie gelesen werden sollten.
Überschriften sollten sich optisch deutlich vom Fließtext unterscheiden. Mehrere Ebenen benötigen erkennbare Abstufungen. Abstände oberhalb und unterhalb einer Überschrift zeigen zusätzlich, zu welchem Abschnitt sie gehört.
Zu viele Hervorhebungen schwächen diese Orientierung. Wenn Überschriften, farbige Flächen, große Bilder, Icons und mehrere Buttons gleichzeitig Aufmerksamkeit verlangen, ist kaum noch erkennbar, was wirklich wichtig ist.
Auch räumliche Nähe schafft Orientierung. Ein Eingabefeld sollte beispielsweise deutlich seiner Beschriftung zugeordnet sein, ebenso ein Produktbild der zugehörigen Beschreibung.
Barrierefreiheit beginnt bei der Seitenstruktur und reicht bis zu kleinen Details wie dem sichtbaren Rahmen um ein ausgewähltes Eingabefeld.
Navigation verständlich aufbauen
Eine Navigation sollte zeigen, welche Inhalte eine Website bietet und wo sich eine Person gerade befindet. Bezeichnungen müssen verständlich sein, ohne dass Nutzerinnen und Nutzer die interne Struktur des Unternehmens kennen müssen.
Menüpunkte wie „Lösungen“, „Leistungen“ oder „Angebot“ können je nach Website sehr unterschiedliche Inhalte enthalten. Konkretere Begriffe helfen dabei, schneller die passende Seite zu finden. Auch wechselnde Bezeichnungen für denselben Bereich sollten vermieden werden.
Die Hauptnavigation sollte auf allen Seiten ähnlich aufgebaut sein. Auf kleineren Bildschirmen muss ein aufklappbares Menü gut sichtbar und leicht bedienbar bleiben.
Dropdown-Menüs sollten zudem nicht ausschließlich von Mausbewegungen abhängen. Alle enthaltenen Links müssen auch auf anderem Weg erreichbar sein.
Links und Buttons eindeutig gestalten
Nutzerinnen und Nutzer sollten sofort erkennen können, welche Elemente anklickbar sind. Ein Link, der genauso aussieht wie normaler Fließtext, wird leicht übersehen. Ein Text, der wie ein Button gestaltet ist, aber keine Funktion besitzt, führt dagegen zu falschen Erwartungen.
Links sollten durch ihre Gestaltung klar vom übrigen Text unterscheidbar sein. Farbe kann dabei helfen, sollte aber nicht das einzige Merkmal bleiben. Eine Unterstreichung ist besonders in längeren Texten hilfreich.
Die Beschriftung sollte erklären, wohin der Link führt. „Hier klicken“ sagt außerhalb des umgebenden Satzes wenig aus. Formulierungen wie „Hosting-Pakete vergleichen“ oder „Kontaktformular öffnen“ sind genauer und bleiben auch dann verständlich, wenn ein Screenreader die Links einer Seite separat vorliest.
Buttons sollten die ausgelöste Aktion benennen. Bei einem Formular ist „Nachricht senden“ eindeutiger als „Weiter“. In einem Bestellprozess muss klar sein, ob eine Auswahl nur gespeichert oder bereits verbindlich abgeschlossen wird.
Auch die Größe der Bedienelemente ist wichtig. Sehr kleine Icons oder eng nebeneinanderliegende Links sind auf einem Touchscreen schwer zu treffen.
Tastaturbedienung sichtbar machen
Nicht alle Menschen bedienen Websites mit einer Maus oder über einen Touchscreen. Manche verwenden die Tabulatortaste, um zwischen Links, Buttons und Formularfeldern zu wechseln.
Dabei zeigt der Tastaturfokus, welches Element gerade ausgewählt ist. Wird diese Markierung aus gestalterischen Gründen entfernt oder ist sie kaum sichtbar, fehlt eine wichtige Orientierungshilfe.
Auch die Reihenfolge der fokussierten Elemente sollte dem sichtbaren Aufbau der Seite folgen. Dialogfenster und aufklappbare Menüs benötigen ebenfalls eine nachvollziehbare Fokusführung.
Eine einfache Prüfung ist möglich, indem die gesamte Website einmal ohne Maus bedient wird. Dabei zeigt sich schnell, ob wichtige Funktionen erreichbar sind und der aktuelle Fokus jederzeit erkennbar bleibt.
Formulare verständlich gestalten
Formulare stellen häufig eine besondere Hürde dar. Schon kleine Unklarheiten können dazu führen, dass Nutzerinnen und Nutzer nicht wissen, welche Angaben erwartet werden.
Jedes Eingabefeld braucht eine sichtbare Beschriftung. Ein Platzhalter innerhalb des Feldes reicht dafür nicht aus, da er nach Beginn der Eingabe verschwindet.
Zusätzliche Hinweise sollten direkt beim jeweiligen Feld stehen. Wird ein bestimmtes Datumsformat oder eine Mindestlänge für das Passwort verlangt, sollte diese Information vor der Eingabe sichtbar sein.
Pflichtfelder müssen eindeutig gekennzeichnet werden. Bei längeren Formularen hilft eine Gliederung in thematische Abschnitte.
Fehlermeldungen sollten möglichst genau sein. „Eingabe ungültig“ lässt offen, was korrigiert werden muss. Eine Nachricht wie „Bitte geben Sie die E-Mail-Adresse im Format name@your-example-domain.com ein“ bietet eine konkrete Hilfestellung.
Nach einem Fehler sollten bereits korrekt eingetragene Angaben erhalten bleiben. Müssen Nutzerinnen und Nutzer das gesamte Formular erneut ausfüllen, steigt die Wahrscheinlichkeit, dass sie den Vorgang abbrechen.
Bilder und Icons sinnvoll verwenden
Bilder können Inhalte erklären, eine Stimmung vermitteln oder die Aufmerksamkeit auf ein Thema lenken. Nicht jedes Bild hat jedoch dieselbe Funktion.
Rein dekorative Bilder benötigen keine ausführliche Beschreibung. Bilder mit wichtigen Informationen müssen dagegen auch für Personen verständlich sein, die sie nicht sehen können. Dafür wird bei der technischen Umsetzung ein passender Alternativtext hinterlegt. Schon im Design sollte deshalb festgelegt werden, welche Bilder informativ und welche nur dekorativ sind.
Text sollte möglichst nicht direkt als Bestandteil eines Bildes eingebunden werden. Er lässt sich dort schlechter vergrößern, kann von Screenreadern nicht ohne Weiteres erfasst werden und ist auf kleinen Bildschirmen möglicherweise kaum lesbar.
Icons sparen Platz, sind aber nicht immer eindeutig. Bei wichtigen Funktionen ist eine zusätzliche Beschriftung daher sinnvoll. Auch der Zustand eines Icons sollte klar erkennbar sein.
Bewegungen und Animationen kontrollierbar machen
Animationen können Übergänge verständlicher machen oder auf eine Änderung hinweisen. Zu viele Bewegungen lenken jedoch vom eigentlichen Inhalt ab.
Automatisch startende Videos und wechselnde Slider können besonders störend sein. Nutzerinnen und Nutzer benötigen eine gut sichtbare Möglichkeit, solche Inhalte anzuhalten.
Schnell blinkende oder stark flackernde Inhalte sollten vermieden werden. Auch große Bewegungen im Hintergrund können das Lesen erschweren oder körperliche Beschwerden auslösen.
Nicht jede Animation muss vollständig entfernt werden. Kurze und zurückhaltende Übergänge können sinnvoll sein. Entscheidend ist, dass Informationen auch ohne Bewegung verständlich bleiben.
Inhalte auf verschiedenen Bildschirmgrößen prüfen
Responsive Design sorgt dafür, dass eine Website auf Desktop-Computern, Tablets und Smartphones funktioniert. Für die Barrierefreiheit sollte zusätzlich geprüft werden, wie sich Inhalte bei starker Vergrößerung verhalten.
Navigationen, Tabellen, Dialogfenster und Formulare müssen sich an den verfügbaren Platz anpassen. Texte dürfen nicht abgeschnitten werden, Buttons sollten sich nicht überlagern und wichtige Funktionen müssen erreichbar bleiben.
Starre Breiten und Höhen führen dabei häufig zu Problemen. Flexible Container und ausreichend Platz für längere Texte sind robuster. Das ist auch bei Übersetzungen wichtig, weil dieselbe Beschriftung in einer anderen Sprache deutlich länger ausfallen kann.
Medien zugänglich gestalten
Videos und Audioinhalte müssen auch dann verständlich sein, wenn Nutzerinnen und Nutzer den Ton nicht hören können. Gesprochene Inhalte sollten deshalb mit Untertiteln ergänzt werden. Automatisch erzeugte Untertitel können als Ausgangspunkt dienen, müssen aber kontrolliert und bei Bedarf korrigiert werden.
Untertitel sollten gut lesbar sein und sich deutlich vom Bild abheben. Informationen wie Sprecherwechsel oder relevante Geräusche können ebenfalls aufgenommen werden, wenn sie für das Verständnis nötig sind.
Bei Audioinhalten hilft eine Textfassung. Sie ermöglicht es außerdem, Inhalte schnell zu durchsuchen oder in einer lauten Umgebung zu lesen.
Wenn ein Video wichtige Informationen ausschließlich visuell vermittelt, reicht eine Abschrift des gesprochenen Textes nicht aus. In diesem Fall kann eine zusätzliche Beschreibung der sichtbaren Handlung erforderlich sein.
Ein Designsystem für barrierefreie Komponenten nutzen
Ein Designsystem hilft dabei, wiederkehrende Elemente wie Buttons, Formulare und Navigationen nach einheitlichen Regeln zu gestalten.
Darin können beispielsweise Farben, Mindestgrößen, Abstände und Fokuszustände festgelegt werden. So sehen gleiche Funktionen auf verschiedenen Unterseiten nicht unterschiedlich aus und bereits gelöste Barrierefreiheitsprobleme entstehen nicht bei jeder neuen Komponente erneut.
Ein Designsystem ersetzt jedoch keine Prüfung. Auch standardisierte Komponenten müssen bei Änderungen weiterhin getestet werden.
Barrierefreiheit testen und dauerhaft sicherstellen
Wer eine barrierefreie Website testen möchte, kann zunächst automatisierte Prüfwerkzeuge einsetzen. Sie können Farbkontraste messen, fehlende Beschriftungen melden und auf technische Fehler hinweisen. Für eine vollständige Beurteilung reichen solche Tests jedoch nicht aus.
Ein Werkzeug kann beispielsweise feststellen, dass ein Bild einen Alternativtext besitzt. Ob dieser den Inhalt sinnvoll beschreibt, muss ein Mensch beurteilen. Auch eine unlogische Navigation oder eine missverständliche Fehlermeldung lässt sich nur begrenzt automatisch erkennen.
Deshalb sollte eine Website zusätzlich manuell geprüft werden. Dazu gehören etwa die Bedienung mit der Tastatur, die Vergrößerung der Ansicht, Tests auf verschiedenen Bildschirmgrößen sowie bei wichtigen Funktionen die Nutzung eines Screenreaders. Besonders aufschlussreich sind Tests mit Personen, die unterschiedliche Nutzungsvoraussetzungen haben.
Da sich Websites laufend verändern, sollte Barrierefreiheit nicht nur einmal vor der Veröffentlichung geprüft werden. Neue Bilder, Texte, Formulare, Plugins oder externe Funktionen können später wieder Barrieren verursachen. Hilfreich sind deshalb klare Vorgaben für Design, Redaktion und Entwicklung sowie regelmäßige Prüfungen neuer oder veränderter Inhalte.
Auch Rückmeldungen von Besucherinnen und Besuchern können dabei helfen, bisher unbemerkte Probleme zu erkennen. Dafür sollte ein leicht auffindbarer Kontaktweg vorhanden sein.
FAQ: Häufige Fragen zu barrierefreiem Webdesign und barrierefreien Websites
Was ist der Unterschied zwischen Barrierefreiheit und Benutzerfreundlichkeit?
Barrierefreiheit zielt darauf ab, dass Websites auch von Menschen mit unterschiedlichen körperlichen, sensorischen oder kognitiven Voraussetzungen genutzt werden können. Benutzerfreundlichkeit beschreibt allgemeiner, wie einfach und verständlich eine Website zu bedienen ist. Beide Bereiche überschneiden sich häufig, sind aber nicht identisch.
Braucht jedes Bild auf einer Website einen Alternativtext?
Nein. Bilder, die wichtige Informationen vermitteln, benötigen einen passenden Alternativtext. Rein dekorative Bilder sollten dagegen so eingebunden werden, dass Screenreader sie überspringen können. Entscheidend ist die Funktion des jeweiligen Bildes.
Wie kann ich prüfen, ob meine Website barrierefrei ist?
Automatisierte Prüfwerkzeuge können beispielsweise Probleme mit Kontrasten, Beschriftungen oder technischen Elementen erkennen. Zusätzlich sind manuelle Tests wichtig, etwa die Bedienung ausschließlich mit der Tastatur, eine starke Vergrößerung der Ansicht und Tests mit einem Screenreader.
Müssen Videos auf einer barrierefreien Website Untertitel haben?
Gesprochene Inhalte in Videos sollten mit Untertiteln verfügbar sein. Werden wichtige Informationen ausschließlich visuell vermittelt, kann zusätzlich eine Beschreibung der sichtbaren Handlung erforderlich sein.
Warum sollte Barrierefreiheit regelmäßig überprüft werden?
Websites verändern sich laufend. Neue Inhalte, Bilder, Formulare, Plugins oder externe Funktionen können neue Barrieren verursachen. Deshalb sollte Barrierefreiheit nicht nur vor der Veröffentlichung, sondern auch nach späteren Änderungen überprüft werden.
Muss barrierefreies Webdesign schlicht aussehen?
Barrierefreiheit schreibt keinen bestimmten visuellen Stil vor. Farben, Bilder und Animationen können weiterhin verwendet werden. Sie müssen jedoch so eingesetzt werden, dass Inhalte lesbar und Funktionen bedienbar bleiben.
Ein reduziertes Design kann die Orientierung erleichtern, ist aber nicht grundsätzlich notwendig. Auch komplexere Layouts können zugänglich sein, wenn ihre Struktur klar erkennbar bleibt.
Reicht ein hoher Farbkontrast aus?
Ein ausreichender Kontrast verbessert die Lesbarkeit, deckt aber nur einen Teil der Barrierefreiheit ab. Eine Website kann kontrastreich gestaltet und trotzdem schwer bedienbar sein, etwa durch unklare Menüs, fehlende Fokusmarkierungen oder schlecht beschriftete Formulare. Die verschiedenen Gestaltungselemente müssen daher im Zusammenhang betrachtet werden.
Sind große Schriften immer leichter lesbar?
Eine größere Schrift kann helfen, löst aber nicht jedes Problem. Sehr lange Zeilen, geringe Zeilenabstände oder schwache Kontraste erschweren das Lesen auch bei großen Buchstaben. Wichtig ist außerdem, dass Nutzerinnen und Nutzer die Schrift selbst vergrößern können, ohne dass das Layout beschädigt wird.
Kann ein Plugin eine Website barrierefrei machen?
Ein Plugin kann einzelne Funktionen ergänzen, etwa die Anpassung von Farben oder Schriftgrößen. Grundlegende Probleme in der Seitenstruktur, der Navigation oder den Formularen lassen sich damit meist nicht beheben. Barrierefreiheit muss direkt im Design, im Inhalt und in der technischen Umsetzung berücksichtigt werden.
Warum ist die Tastaturbedienung wichtig?
Manche Menschen können keine Maus verwenden oder bedienen Websites schneller über die Tastatur. Sie wechseln mit der Tabulatortaste zwischen interaktiven Elementen. Sind einzelne Funktionen nicht erreichbar oder ist der Fokus unsichtbar, können sie die Website nur eingeschränkt nutzen.
Welche Vorteile bietet eine barrierefreie Website auch Menschen ohne dauerhafte Einschränkungen?
Klare Texte, verständliche Navigationen und ausreichend große Bedienelemente erleichtern vielen Menschen die Nutzung. Das gilt beispielsweise bei hellem Sonnenlicht, langsamer Internetverbindung, einem kleinen Smartphone-Display oder einer vorübergehenden Verletzung. Eine gut zugängliche Website ist meist auch eine leichter bedienbare Website.
Fazit: Barrierefreies Webdesign verbessert die Nutzung für alle
Barrierefreies Webdesign beginnt bei alltäglichen Gestaltungsentscheidungen. Gut lesbare Texte, erkennbare Buttons, verständliche Formulare und eine klare Navigation helfen Menschen dabei, Inhalte selbstständig zu nutzen.
Viele Probleme lassen sich vermeiden, wenn Farben, Komponenten und Nutzerwege früh geprüft werden. Spätere Tests bleiben trotzdem nötig, da sich nicht jede Barriere in einem statischen Entwurf erkennen lässt.
Eine Website muss dabei weder schlicht noch einheitlich aussehen. Sie sollte ihre Gestaltung jedoch nicht über die Verständlichkeit stellen. Gutes Design zeigt sich auch daran, dass Menschen ohne unnötige Hindernisse ans Ziel gelangen.
Ähnliche Themen
Nachhaltiges Webhosting bezeichnet den möglichst umweltbewussten Betrieb von Websites und der dafür benötigten Infrastruktur. Dazu gehören die Nut...
Mit WordPress können Sie auch ohne Programmierkenntnisse eine eigene Website erstellen. Zuerst legen Sie eine Domain fest und definieren, welche Inha...
Cookies sind kleine Textdateien, die ein Webbrowser beim Besuch einer Website speichert und bei späteren Aufrufen wieder an die Website sendet. Sie d...
