Barrierefreie Gestaltung sorgt dafür, dass digitale Inhalte von möglichst vielen Menschen unabhängig von ihren körperlichen, sensorischen oder technischen Voraussetzungen genutzt werden können. Im Mittelpunkt stehen dabei nicht nur Menschen mit einer dauerhaften Behinderung. Auch Personen mit nachlassendem Sehvermögen, einer vorübergehenden Verletzung, ungünstigen Lichtverhältnissen oder einem kleinen Smartphone profitieren von gut lesbaren und verständlich aufgebauten Websites.
Für kleine Betriebe, Selbstständige und private Projekte sind drei Bereiche besonders relevant: ausreichende Kontraste, anpassbare Schriftgrößen und sorgfältig formulierte Alternativtexte. Diese Aspekte beeinflussen die Lesbarkeit, die Bedienbarkeit mit assistiven Technologien und die Verständlichkeit von Inhalten. Sie gehören deshalb nicht erst an das Ende eines Projekts, sondern sollten bereits bei der Planung von Farben, Layout, Bildauswahl und redaktionellen Abläufen berücksichtigt werden.
Als technische Orientierung dient die internationale Web Content Accessibility Guideline, kurz WCAG, des World Wide Web Consortiums. Die Richtlinien beschreiben unter anderem Anforderungen an Wahrnehmbarkeit, Bedienbarkeit, Verständlichkeit und Robustheit. Sie ersetzen keine Prüfung mit echten Nutzern, liefern aber überprüfbare Kriterien für die tägliche Arbeit.
Der Kontrast beschreibt den Helligkeitsunterschied zwischen Vordergrund und Hintergrund. Bei Texten betrifft er meistens die Schriftfarbe und die Fläche dahinter. Ein grauer Text auf weißem Hintergrund kann elegant wirken, ist aber bei geringer Sättigung oder kleiner Schrift schwer zu lesen. Auch farbige Schaltflächen, Formularfelder, Rahmen und Symbole benötigen ausreichend Kontrast, wenn sie Informationen vermitteln oder eine Bedienfunktion anzeigen.
Nach WCAG 2.2 des World Wide Web Consortiums soll normal großer Text ein Kontrastverhältnis von mindestens 4,5 zu 1 erreichen. Für großen Text gilt ein Mindestverhältnis von 3 zu 1. Bei Bedienelementen und grafischen Objekten, die zum Verständnis oder zur Bedienung beitragen, nennt WCAG 2.2 ebenfalls ein Mindestverhältnis von 3 zu 1. Diese Werte sind keine Empfehlung für eine bestimmte Farbkombination, sondern Prüfkriterien für den Helligkeitsunterschied.
Die Anforderungen gelten nicht für jede dekorative Fläche in gleicher Weise. Ein rein dekoratives Muster muss keine Information vermitteln. Sobald Farbe jedoch Text, Status, Auswahl oder eine Funktion kennzeichnet, sollte sie nicht die einzige Informationsquelle sein. Ein roter Hinweis für einen Fehler benötigt daher zusätzlich einen verständlichen Text oder ein geeignetes Symbol mit zugänglicher Beschriftung.
Praktisch bewährt sich folgende Vorgehensweise:
Ein zugängliches Farbkonzept beginnt mit einer begrenzten, gut dokumentierten Palette. Für den Fließtext wird eine besonders kontrastreiche Kombination festgelegt. Überschriften dürfen farblich abweichen, müssen aber ebenfalls lesbar bleiben. Links sollten sich nicht ausschließlich durch eine andere Farbe vom umgebenden Text unterscheiden. Eine Unterstreichung oder ein anderes deutlich erkennbares Merkmal unterstützt die Orientierung.
Statusanzeigen benötigen besondere Aufmerksamkeit. Ein grüner Erfolgshinweis und ein roter Fehlerhinweis können für Menschen mit eingeschränkter Farbwahrnehmung ähnlich aussehen. Ergänzende Begriffe wie Erfolgreich gespeichert oder Eingabe prüfen schaffen Klarheit. Bei Diagrammen sollten Linien nicht nur über Farben unterschieden werden. Unterschiedliche Muster, Beschriftungen oder Formen machen die Aussage robuster.
Auch Bilder und Hintergründe können den Kontrast verändern. Weißer Text auf einem Foto ist an einer Stelle lesbar und an einer anderen kaum erkennbar. Eine halbtransparente Fläche hinter dem Text, eine einfarbige Textbox oder eine andere Bildposition kann die Lesbarkeit stabilisieren. Wer Text als Bestandteil eines Bildes einsetzt, verliert zudem die Anpassbarkeit von Schriftgröße und Kontrast. Für wichtige Informationen ist echter HTML-Text daher vorzuziehen.
Barrierefreie Typografie besteht nicht aus einer einzigen vorgeschriebenen Schriftgröße. Entscheidend ist, dass Texte vergrößert werden können, ohne dass Inhalte abgeschnitten werden oder Funktionen unbedienbar werden. WCAG 2.2 fordert für die Konformitätsstufe AA, dass Text bis auf das Doppelte vergrößert werden kann, ohne Verlust von Inhalt oder Funktion, wobei bestimmte Ausnahmen für Untertitel und bildhafte Textdarstellungen gelten. Diese Vorgabe bezieht sich auf die Anpassbarkeit der Darstellung, nicht auf eine pauschale Pixelzahl für jede Website.
Für die Umsetzung helfen relative Einheiten. Schriftgrößen in rem oder em orientieren sich an der Basisschrift des Dokuments oder an einem übergeordneten Element. Dadurch reagieren sie besser auf individuelle Einstellungen als fest definierte Pixelwerte. Auch Abstände und Container sollten so gestaltet sein, dass längere Wörter, größere Schrift und mehrzeilige Überschriften Platz finden.
Beim Test der Typografie gehören mehrere Einstellungen zusammen:
Ein ausreichender Zeilenabstand verbessert die Orientierung. Zu eng gesetzte Absätze wirken als kompakte Textblöcke und erschweren das Lesen, insbesondere bei vergrößerter Darstellung oder eingeschränkter visueller Aufmerksamkeit. Eine klare Hierarchie aus Überschriften, kurzen Absätzen und Listen hilft zusätzlich.
Ein Layout kann bei normaler Darstellung zugänglich wirken und bei Vergrößerung unbrauchbar werden. Typische Fehler sind horizontales Scrollen für einzelne Textzeilen, überlappende Schaltflächen, abgeschnittene Formularbeschriftungen und fest positionierte Elemente, die den Inhalt verdecken. Responsive Gestaltung bedeutet deshalb nicht nur, dass eine Seite auf einem Smartphone schmaler wird. Sie muss auch auf veränderte Schriftgrößen und Zoomstufen reagieren.
Flexibel dimensionierte Bereiche, Umbrüche in Navigationsleisten und ausreichend große klickbare Flächen sind hilfreiche Grundlagen. Inhalte sollten ihre Reihenfolge behalten, wenn Spalten untereinander angeordnet werden. Tabellen benötigen eine verständliche Struktur und bei schmalen Bildschirmen eine geeignete Darstellung. Ein horizontal scrollbarer Bereich kann bei umfangreichen Datentabellen sinnvoll sein, darf aber nicht dazu führen, dass der gesamte Seiteninhalt nur seitwärts erreichbar ist.
Prüfen lässt sich das ohne Speziallabor. Vergrößern Sie die Seite im Browser, verkleinern Sie das Fenster und navigieren Sie jede wichtige Funktion durch. Achten Sie auf Überschriften, Menüs, Eingabefelder, Fehlermeldungen und den abschließenden Bestell- oder Kontaktvorgang. Für professionelle Projekte ergänzen automatisierte Tests diese Sichtprüfung, ersetzen sie aber nicht.
Ein Alternativtext wird von Screenreadern vorgelesen, wenn ein Bild nicht wahrgenommen werden kann. Er steht nicht vor der Aufgabe, jedes sichtbare Detail aufzuzählen. Seine Funktion besteht darin, die Bedeutung des Bildes im jeweiligen Zusammenhang zu vermitteln. Dasselbe Foto kann auf einer Startseite anders beschrieben werden als in einem technischen Artikel oder in einer Bildergalerie.
Ein guter Alternativtext beantwortet die Frage, welche Information durch das Bild vermittelt wird. Bei einem Porträt kann die Person und ihre Rolle relevant sein. Bei einem Produktfoto können Form, Farbe oder ein bestimmtes Merkmal wichtig sein. Bei einem Diagramm muss die zentrale Aussage im Text zugänglich werden. Ein allgemeines Beschreibungsmuster wie Bild von oder Foto zeigt dagegen wenig Nutzen, weil assistive Technologien den Bildtyp bereits erkennen können.
Vor dem Schreiben helfen diese Fragen:
Ein Alternativtext sollte präzise und so knapp wie der Inhalt erlaubt sein. Er muss keine technischen Dateiinformationen wie Kameramodell oder Dateiname enthalten. Wertende Formulierungen sind nur sinnvoll, wenn die Bewertung selbst Teil der Aussage ist.
Nicht jedes Bild braucht einen beschreibenden Alternativtext. Rein dekorative Elemente, die keine zusätzliche Information liefern, sollten für assistive Technologien als dekorativ gekennzeichnet werden. In HTML geschieht dies in der Regel mit einem leeren alt-Attribut. Das unterscheidet sich von einem fehlenden alt-Attribut: Fehlt die Angabe, kann ein Screenreader den Dateinamen oder eine technische Kennung vorlesen.
Logos sind abhängig vom Kontext zu behandeln. Ein Logo, das als Link zur Startseite dient, benötigt eine verständliche Bezeichnung des Ziels. Wird dasselbe Logo neben einer bereits sichtbaren Firmen- oder Projektbezeichnung wiederholt, kann die Bildalternative redundant sein. Bei einem Bild mit eingebettetem Text reicht eine allgemeine Beschreibung nicht aus, wenn dieser Text für die Information entscheidend ist.
Komplexe Grafiken wie Ablaufpläne, Karten oder Diagramme brauchen oft mehr als einen kurzen Alternativtext. Der kurze Text kann den Inhalt ankündigen. Die Einzelheiten gehören in eine zugängliche Datentabelle, eine ausführliche Beschreibung oder in den umgebenden Artikeltext. So bleiben Werte und Zusammenhänge auch dann nutzbar, wenn das Bild nicht gesehen werden kann.
Alternativtexte werden häufig vergessen, wenn Bilder erst kurz vor der Veröffentlichung eingefügt werden. Ein verbindlicher Redaktionsablauf verhindert diese Lücke. Für jedes Bild sollte vor dem Upload geklärt werden, ob es informativ, funktional oder dekorativ ist. Bei funktionalen Bildern beschreibt die Alternative das Ziel oder die Aktion, nicht das Aussehen. Ein Symbol, das zu den Einstellungen führt, benötigt beispielsweise eine Bezeichnung wie Einstellungen öffnen und keine Beschreibung seiner Form.
Ein praktikabler Prüfablauf besteht aus diesen Schritten:
Automatisierte Prüfungen erkennen fehlende alt-Attribute, beurteilen aber nicht zuverlässig die Qualität eines vorhandenen Textes. Ein Alternativtext wie Grafik 1 erfüllt die technische Bedingung, vermittelt jedoch kaum Bedeutung. Redaktionelle Kontrolle bleibt deshalb notwendig.
Die drei Themen beeinflussen sich gegenseitig. Ein Alternativtext kann eine unverständliche Grafik ergänzen, aber keinen schlecht lesbaren Fließtext ausgleichen. Eine große Schrift verbessert die Wahrnehmung, wenn die Farbe ausreichend kontrastreich ist. Eine kontrastreiche Oberfläche bleibt problematisch, wenn wichtige Zustände nur über Farben vermittelt werden.
Für eine kompakte Prüfung eignet sich folgende Reihenfolge:
Die Ergebnisse sollten nicht nur als einmalige Checkliste vorliegen. Ein kleines Prüfprotokoll mit URL, Problem, Priorität und Korrektur erleichtert die Nachverfolgung. Bei Änderungen an Farben, Schriftregeln oder Komponenten sollte erneut getestet werden, weil eine Designänderung mehrere Seiten gleichzeitig betreffen kann.
Ein häufiger Fehler ist hellgrauer Text für weniger wichtige Hinweise. Weniger wichtig bedeutet jedoch nicht, dass der Inhalt schwer lesbar sein darf. Besser ist eine gut lesbare Farbe mit klarer typografischer Gewichtung oder eine weniger dominante Platzierung.
Problematisch sind außerdem Platzhalter als einzige Feldbeschriftung. Sie verschwinden während der Eingabe und können bei geringem Kontrast schwer erkennbar sein. Eine dauerhafte Beschriftung außerhalb des Feldes schafft Orientierung. Fehlermeldungen sollten das betroffene Feld benennen und die erforderliche Korrektur erklären, anstatt nur eine rote Umrandung anzuzeigen.
Bei Bildern führt eine automatisierte Beschreibung häufig zu unpassenden Ergebnissen. Sie kann ein Motiv erkennen, aber den redaktionellen Zusammenhang verfehlen. Die verantwortliche Person sollte den Vorschlag prüfen und an die konkrete Aussage des Beitrags anpassen. Umgekehrt sind überlange Alternativtexte ebenfalls ungünstig, wenn sie sichtbare Absätze vollständig wiederholen und den Lesefluss unnötig verlängern.
Ein weiterer Fehler besteht darin, Barrierefreiheit erst nach dem vollständigen Design zu prüfen. Farben, Schriftgrößen und Bildkomponenten lassen sich früh deutlich konsistenter festlegen. Nachträgliche Korrekturen bleiben möglich, sind bei vielen Vorlagen und Beiträgen jedoch aufwendiger.
Eine einzelne universelle Mindestgröße gibt es nicht. Lesbarkeit hängt auch von Schriftart, Kontrast, Zeilenabstand, Bildschirm und Betrachtungsabstand ab. Entscheidend ist, dass Inhalte vergrößert werden können, ohne dass Informationen oder Funktionen verloren gehen. Relative Einheiten und flexible Layouts unterstützen dieses Ziel.
Für Text und informative grafische Elemente gelten unterschiedliche Kriterien. WCAG 2.2 des World Wide Web Consortiums nennt für normalen Text 4,5 zu 1, für großen Text 3 zu 1 und für bestimmte nichttextliche Bedienelemente 3 zu 1. Dekorative Flächen ohne Informations- oder Bedienfunktion werden anders bewertet. Eine Prüfung muss daher den konkreten Einsatz berücksichtigen.
Die Länge richtet sich nach der Bedeutung des Bildes. Der Text sollte die relevante Information vermitteln, ohne jedes sichtbare Detail aufzuzählen. Bei komplexen Grafiken gehört die ausführliche Erklärung meist in den umgebenden Text oder in eine separate zugängliche Datendarstellung.
Dekorative Bilder sollten als dekorativ markiert werden, damit Screenreader sie überspringen können. Ein fehlendes alt-Attribut ist keine verlässliche Kennzeichnung und kann dazu führen, dass technische Dateiinformationen vorgelesen werden.
Nein. Automatische Werkzeuge erkennen bestimmte technische Fehler, etwa fehlende Alternativtextfelder oder problematische Kontrastwerte. Sie beurteilen jedoch nicht zuverlässig die inhaltliche Qualität eines Alternativtexts, die Verständlichkeit von Fehlermeldungen oder die tatsächliche Nutzung mit Tastatur und Vorlesefunktion. Eine Kombination aus Werkzeugen, manueller Prüfung und realistischen Nutzungsszenarien liefert belastbarere Ergebnisse.
