Anforderungen an barrierefreie Websites – Einstieg und Überblick

Digitale Barrierefreiheit bedeutet, dass Websites und andere Anwendungen so gestaltet sein müssen, dass sie von allen Personen uneingeschränkt benutzt werden können. Dafür gibt es Richtlinien und Standards die es grundsätzlich einzuhalten gilt. Wir erklären die wichtigsten Anforderungen im UX/UI-Design, bei der technischen Umsetzung sowie bei der Erstellung von Inhalten, damit eine Website barrierefrei ist.

Beispiele für Einschränkungen und Barrieren

Damit wir gute barrierefreie Websites erstellen können, muss zunächst ein Bewusstsein dafür geschaffen werden, wo überhaupt Einschränkungen bestehen.

Visuelle Einschränkungen

Akustische Einschränkungen

Motorische Einschränkungen

Kognitive Einschränkungen

Diese Einschränkungen treten auf:

Wir sollten uns viel mehr bewusst machen, dass alle oben genannten Einschränkungen unter bestimmten Umständen auch auf Menschen ohne Behinderung zutreffen. Eine barrierefreie Website ist somit für alle Menschen besser nutzbar.

Quelle: Microsoft Inclusive Design

Barrierefrei oder barrierearm?

Der englische Begriff Accessibility ist Namensgeber für zahlreiche Richtlinien und bedeutet übersetzt Zugänglichkeit. Im deutschen Sprachraum ist das Wort so nicht übernommen worden, stattdessen hat sich der Begriff Barrierefreiheit durchgesetzt. Dadurch schwingt nicht ganz derselbe Bedeutungsraum mit: Barrierefreiheit ist entweder absolut erfüllt oder nicht. Der häufig als sinnvoller empfundene Begriff »barrierearm« für eine annähernd barrierefreie Umsetzung hat sich nicht durchgesetzt.

Richtlinien für Barrierefreie Websites

Um Websites barrierefrei umsetzen zu können, orientieren wir uns mindestens an der internationalen Empfehlung des W3C, der sog. Web Content Accessibility Guideline (WCAG). Diese Richtlinie ist freiwillig und hilft uns dabei Standards zu erfüllen. Sie ist untergliedert in drei Konformitätsstufen – A, AA und AAA. Der Standard ist das Erfüllen von A und AA.

Für zahlreiche Projekte gibt es auch die gesetzliche Verpflichtung zur Umsetzung der Barrierefreiheit. In der Vergangenheit galt dies hauptsächlich für Websites öffentlicher Stellen, die BITV-konform umgesetzt sein müssen. Ab 2025 gilt das auch für viele Projekte der Privatwirtschaft. Grundlage dafür ist das BFSG der EU.

Wenn ihr euch detailliert mit den Richtlinien, Gesetzen und Anforderungen beschäftigen wollt oder müsst, haben wir hier eine ausführliche Beschreibung veröffentlicht.

Die wichtigsten Kriterien für barrierefreies Webdesign

Im Folgenden haben wir die wichtigsten Anforderungen zusammengefasst, die ihr beachten solltet, damit eure euer Webdesign barrierefrei ist. Wir beziehen uns stets auf die Akzeptanzkriterien (Success Criterion = SC) der WCAG und orientieren uns am Level A und AA. Einige Punkte aus AAA haben wir ebenfalls ergänzt, wenn diese aus unserer Sicht leicht zu erreichen sind.

Bitte beachtet, dass diese Liste einen schnellen Einstieg bieten soll. Es werde nicht alle Prüfschritte aufgelistet, die zum Erfüllen gesetzlicher Anforderungen notwendig sind. Eine vollständige Liste aller Prüfschritte von WCAG und BITV findet ihr hier.

Anforderungen im UX/UI-Design

Lesbarkeit von Text sicherstellen

Die Sicherstellung der Lesbarkeit von Text ist ein elementarer Aspekt bei der Gestaltung barrierefreier Websites. Es sollten stets angemessene Schriftgrößen, Zeilenlängen und -abstände gewählt werden, um ein problemloses Erfassen von Text zu ermöglichen. Es gibt keine konkreten Empfehlungen für bestimmte Schriftgrößen, da diese von verschiedenen Faktoren abhängen (Kontext, Inhalt, Zielgruppe etc.). Als Best Practice hat sich eine Mindestschriftgröße von 16 Pixeln etabliert. Zu beachten ist, dass der Schriftgrad auf mindestens 200 Prozent skalierbar sein soll, ohne dass Verlust von Inhalt oder Funktionalität auftritt (WCAG SC 1.4.4). Außerdem gilt es eine maximale Zeilenbreite von 80 Zeichen und mindestens einen 1,5-fachen Zeilenabstand innerhalb von Absätzen einzuhalten (WCAG SC 1.4.8).

Negativ- und Positivbeispiel für lesbare Texte. Links ist der Zeilenabstand zu gering, die Schriftfarbe zu hell und die Zeilen zu lang. Rechts kann durch besseren Kontrast und kurze Zeilen besser gelesen werden.
Negativ- und Positivbeispiel für lesbare Texte. Links ist der Zeilenabstand zu gering, die Schriftfarbe zu hell und die Zeilen zu lang. Rechts kann durch besseren Kontrast und kurze Zeilen besser gelesen werden.

Ein ausreichender Kontrast von Textfarbe zum Hintergrund sorgt dafür, dass Inhalte in ungünstigen Sichtverhältnissen und für Personen mit visuellen Beeinträchtigungen gut sichtbar bleiben. Der empfohlene Kontrastwert variiert je nach Textgröße und -gewicht, aber typischerweise muss der Wert mindestens 4,5:1 für normalen Text und 3:1 für größere Texte betragen (WCAG SC 1.4.3). Wichtig ist auch, Inhalt ohne Farbe verständlich zu machen, da einige Personen Farben möglicherweise nicht unterscheiden können (WCAG SC 1.4.1)

Negativ- und Positivbeispiel für kontrastreiche Farben am Beispiel eines Buttons. Links bietet der Text zu wenig Kontrast zu Button-Farbe. Rechts wird das geforderte Kontrastverhältnis eingehalten.
Negativ- und Positivbeispiel für kontrastreiche Farben am Beispiel eines Buttons. Links bietet der Text zu wenig Kontrast zu Button-Farbe. Rechts wird das geforderte Kontrastverhältnis eingehalten.

Orientierung bieten

Eine barrierefreie Website bietet eine klare Orientierung. Das Layout sollte einfach, logisch und konsistent sein, um eine klare Struktur zu vermitteln. Inhalte sollten in einer logischen Abfolge präsentiert werden (WCAG SC 1.3.2). Ein einheitliches Design und die Verwendung einer klaren Sprache tragen ebenfalls zur Orientierung bei. Es muss betrachtenden Personen möglich sein, schnell und einfach zu verstehen, wo sie sich auf der Website befinden und wie sie zu anderen Seiten navigieren können. Eine konsistente Navigation auf allen Unterseiten und die Hervorhebung aktiver Menüpunkte ermöglicht diese klare Orientierung (WCAG SC 3.2.3). Links sollten präzise und verständlich beschriftet sein, damit vor dem Anklicken verständlich wird, wohin diese führen (WCAG SC 2.4.4).

Negativ- und Positivbeispiel einer logischen Informationsreihenfolge. Links entspricht die Reihenfolgt nicht der gelernten Leserichtung in westlichen Kulturkreisen. Rechts wird von oben links nach unten rechts gelesen – was als logisch empfunden wird.
Negativ- und Positivbeispiel einer logischen Informationsreihenfolge. Links entspricht die Reihenfolgt nicht der gelernten Leserichtung in westlichen Kulturkreisen. Rechts wird von oben links nach unten rechts gelesen – was als logisch empfunden wird.

Benutzbarkeit gewährleisten

Eine barrierefreie Website muss für alle Personen benutzbar sein. Das bedeutet, dass interaktive Elemente wie Links oder Schaltflächen auch ohne Farbe und Interaktion als solche erkennbar sein müssen (WCAG SC 2.4.4). Für Klickflächen wird eine Mindestgröße von 44 x 44 Pixeln empfohlen, um eine einfache Bedienung zu gewährleisten (WCAG SC 2.5.5). Um das Ausfüllen von Formularen unproblematisch zu ermöglichen, sollten alle Formularfelder deutlich beschriftet sein, sodass deren Funktion und Bedeutung klar ist. (WCAG SC 2.4.6).

Responsive Design umsetzen

Ein responsives Design stellt sicher, dass die Website auf verschiedenen Geräten und Bildschirmgrößen ordnungsgemäß dargestellt wird. Ein robustes Layout gewährleistet, dass eine Website unabhängig von Browser und Betriebssystem fehlerfrei angezeigt wird und benutzbar ist (WCAG SC 1.4.10). Spezielle Funktionalitäten und Styles sollten als Progressive Enhancement integriert sein. Auf diese Weise kann eine Website für alle Menschen zugänglich gemacht werden, unabhängig von individuellen Fähigkeiten oder verwendeten Technologien.

Animationen dezent einsetzen

Bewegte Inhalte und starke Animationen können die Konzentration von Personen mit kognitiven Beeinträchtigungen oder Lernschwierigkeiten beeinträchtigen. Für Personen mit bestimmten medizinischen Bedingungen (Epilepsie etc.) können sie auch eine Gefahr darstellen. Deshalb sollten diese nur sparsam und dezent eingesetzt werden (WCAG SC 2.3.1).

Anforderungen im Code

Grundsätzliche Anforderungen

Eine Grundvoraussetzung für eine barrierefreie Website ist valides und semantisch korrektes Markup. Fehlerfreies HTML kann von Assistiven Technologien ohne Probleme eingelesen (WCAG SC 4.1.1) und korrekt interpretiert (WCAG SC 4.1.2) werden.

Landmark Roles gliedern das Dokument in seine elementaren Bestandteile und helfen Assistenztechnologien wie Screenreadern, sich auf einer Seite zu orientieren und schnell zu den relevanten Informationen zu gelangen. Landmarks sollten mit HTML-Elementen (<main>, <nav>, <form> etc.) oder WAI-ARIA-Attribute (role="main", role="navigation", role="form" etc.) definiert werden.

Sog. »Skiplinks« ermöglichen es Menschen, die auf Hilfsmittel wie Screenreader angewiesen sind, schnell zu relevanten Inhalten auf der Seite zu springen, ohne lange durch Menüs und Navigationsoptionen zu navigieren. Sie werden in der Regel am Anfang des Seiteninhalts platziert und bieten Links zu verschiedenen Landmarks, wie dem Hauptinhalt oder der Navigation (WCAG SC 2.4.1).

Das links Beispiel ist falsch, da es keine Skiplinks nutzt. Im rechten Beispiel sind diese vorhanden und ermöglichen den Sprung direkt zu den Landmarks »Navigation« bzw. »Inhalt«.
Das links Beispiel ist falsch, da es keine Skiplinks nutzt. Im rechten Beispiel sind diese vorhanden und ermöglichen den Sprung direkt zu den Landmarks »Navigation« bzw. »Inhalt«.

Es ist wichtig, eine nachvollziehbare, möglichst lineare Fokusreihenfolge zu gewährleisten, sodass Menschen, die mit Tastatur navigieren, sich effizient durch die Inhalte bewegen können (WCAG SC 2.4.3). Der Fokus sollte immer sichtbar sein, damit Menschen, die keine Maus verwenden, wissen, wo sie sich auf der Seite befinden (WCAG SC 2.4.7).

Dynamische Inhalte sollten mittels WAI-ARIA mit Informationen versehen werden, die nicht durch die Standard-HTML-Elemente abbildbar sind. Damit lassen sich Zustände und Verhaltensweisen von Dropdown-Menüs, Tabs, modalen Dialogen etc. beschreiben. So können assistive Technologien diese Verhaltensweisen interpretieren und berücksichtigen.

Korrekte Überschriftenstruktur ermöglichen

Eine klare und logische Überschriftenstruktur erleichtert die Nutzung einer Website mit Screenreadern und anderen Assistenztechnologien. Es ist zu gewährleisten, dass Überschriften in einer logischen Reihenfolge und ohne Level-Sprünge angeordnet sind. Es sollte nur eine h1-Überschrift pro Seite geben, da diese die Hauptüberschrift darstellt (WCAG SC 1.3.1). Diese Aufgabe ist in erster Linie eine redaktionelle – die Technik muss gewährleisten, dass die Redaktion dazu in der Lage ist fehlerfrei zu arbeiten.

Zusammengehörige Elemente gruppieren

Zusammengehörige Elemente sollen durch die Verwendung von Listen-Elementen als solche im Markup kenntlich gemacht werden. Dies ermöglicht assistiven Technologien wie Screenreadern, die Inhalte strukturiert zu erfassen. Es ist darauf zu achten, die Listen in einer logischen Reihenfolge anzulegen und semantisch korrekt auszuzeichnen, z.B. <ol> für nummerierte Listen, <ul> für Aufzählungen (WCAG SC 1.3.1 und WCAG SC 4.1.1).

Formulare vollständig auszeichnen

Bei der Umsetzung von Formularen ist darauf zu achten, dass Eingabefelder stets mit <label>-Elementen versehen werden. Dies ermöglicht Assistiven Technologien, das damit verbundene Formularelement mit seiner Beschriftung in Verbindung zu bringen, was für eine problemlose Zugänglichkeit und Nutzbarkeit der Formulare von entscheidender Bedeutung ist (WCAG SC 1.3.1).

Medieninhalte zugänglich machen

Es kann in diversen Situation ungünstig sein, wenn beim Besuch einer Website direkt Audiomaterial abgespielt wird. Für Menschen mit Screen Readern, die die Audiowiedergabe ihres Geräts zur Navigation benutzen, ist jeder zusätzliche Ton ein echtes Hindernis. Von einer automatischen Medienwiedergabe mit Ton ist daher grundsätzlich abzusehen (WCAG SC 1.4.2).

Videomaterial oder Animation dürfen bei Seitenaufruf automatisch starten. Dabei sollten aber die Geräteeinstellungen der besuchenden Person berücksichtigt (siehe unten) und eine Möglichkeit zum Anhalten des Mediums vorgesehen werden (WCAG SC 2.2.2).

Für Nicht-Text-Inhalte ist darauf zu achten, stets Textalternativen bereitzustellen. Für Bilder und Grafiken sollte dafür ein alt-Attribut vorgesehen werden, mit dem die Inhalte in Textform transportiert werden. Audio- und Videodateien sollten mit einem Transkript bzw. Untertiteln versehen werden (WCAG SC 1.1.1).

Geräteeinstellungen berücksichtigen

Eine wichtige Maßnahme ist die Berücksichtigung der Geräteeinstellungen, die Menschen auf ihren Geräten vornehmen, um bspw. besseren Zugang zu Websiteinhalten zu haben. Es sollte sichergestellt werden, dass Seiten bei Vergrößerung durch Zoom bis zu 200 % keine Fehldarstellungen liefern und die Inhalte weiterhin zugänglich bleiben (WCAG SC 1.4.4). Auch sollten Einstellungen wie »prefers-reduce motion« und vergleichbare Optionen des Betriebssystems des Nutzers respektiert werden, um beispielsweise unerwünschte Animationen oder Bewegungen zu minimieren (WCAG SC 2.3.3).

Anforderungen an die Inhalte

Auf Verständlichkeit von Text achten

Bei der Erstellung von barrierefreien Texten ist es wichtig, eine einfache Sprache zu verwenden und unnötige Komplexität zu vermeiden (WCAG SC 3.1.5). Fachbegriffe, komplizierte Ausdrücke und Abkürzungen sollten nur sparsam Verwendung finden (WCAG SC 3.1.4). Um Missverständnisse zu verhindern, sollten Redewendungen, Idiome und komplizierte Metaphern nicht verwendet werden (WCAG SC 3.1.3). Eine klare und verständliche Sprache erleichtert das Verständnis und die Nutzung von Inhalten für alle Nutzerinnen und Nutzer, insbesondere für Menschen mit kognitiven oder sprachlichen Einschränkungen.

Positiv- und Negativbeispiel für die Verständlichkeit von Schaltflächen. Links wird eine Frage mit »Abbrechen/Bestätigen« sehr generisch beantwortet. Rechts ist die Funktion klarer durch »Nicht Speichern/Speichern«.
Positiv- und Negativbeispiel für die Verständlichkeit von Schaltflächen. Links wird eine Frage mit »Abbrechen/Bestätigen« sehr generisch beantwortet. Rechts ist die Funktion klarer durch »Nicht Speichern/Speichern«.

Korrekte Überschriftenstruktur beachten

Eine saubere Strukturierung der Überschriften ist ein wichtiger Faktor für die Barrierefreiheit von Webseiten. Überschriftenebenen dürfen nicht gestalterisch verwendet werden; ihre Aufgabe ist es, das Dokument sinnvoll zu strukturieren. Überschriften müssen in einer logischen Reihenfolge angeordnet sein und keine Level-Sprünge aufweisen. Auf diese Weise können Inhalte einer Webseite von Mensch und Maschine (SEO) leichter erfasst werden (WCAG SC 1.3.1).

Negativ- und Positivbeispiel für die Überschriftenstruktur in HTML. Links wird die Ebene h3 übersprungen. Rechts ist alles logisch und lückenlos strukturiert.
Negativ- und Positivbeispiel für die Überschriftenstruktur in HTML. Links wird die Ebene h3 übersprungen. Rechts ist alles logisch und lückenlos strukturiert.

Beschreibende Text für interaktive Elemente

Beschreibende Texte für Links und Schaltflächen helfen, den Zweck von diesen zu verstehen, ohne auf die visuelle Gestaltung oder das Umfeld angewiesen zu sein. Von vagen, unpersönlichen Formulierungen wie „Mehr erfahren“ oder „Klicken Sie hier“ ist abzusehen. Stattdessen müssen klare, präzise Textbeschreibungen verwendet werden, die den tatsächlichen Inhalt oder die Aktion, die sie ausführen, beschreiben (WCAG SC 2.5.3).

Negativ- und Positivbeispiele für sog. »Accessible Names« bei nicht beschrifteten Schaltflächen. Links ist keine Beschriftung vorhanden, rechts schon. Je unbekannter das Icon, desto schwerer wird es das Element über die Sprachsteuerung zu aktivieren, da der im Code hinterlegte Name nicht bekannt ist.
Negativ- und Positivbeispiele für sog. »Accessible Names« bei nicht beschrifteten Schaltflächen. Links ist keine Beschriftung vorhanden, rechts schon. Je unbekannter das Icon, desto schwerer wird es das Element über die Sprachsteuerung zu aktivieren, da der im Code hinterlegte Name nicht bekannt ist.

Text für Nicht-Text-Inhalte bereitstellen

Für Nicht-Text-Inhalte wie Bilder, Grafiken, Audio- und Videodateien ist darauf zu achten, stets Textalternativen bereitzustellen. Für Bilder und Grafiken sollte immer ein alt-Attribut mit einer Beschreibung des Inhalts hinterlegt werden, damit es von Screenreadern vorgelesen werden kann. Audio- und Videodateien sollten mit einem Transkript bzw. Untertiteln versehen werden, um auch für gehörlose oder schwerhörige Personen zugänglich zu sein (WCAG SC 1.1.1).

Positiv- und Negativbeispiel für ein Video mit Transkript. Links fehlt die Textvariante. Rechts ist sie vorhanden.
Positiv- und Negativbeispiel für ein Video mit Transkript. Links fehlt die Textvariante. Rechts ist sie vorhanden.

Trigger vermeiden

Bestimmte Inhalte können bei Menschen mit medizinischen, psychischen oder emotionalen Beeinträchtigungen unvorhersehbare Reaktion auslösen. Um dies zu vermeiden und ein inklusives Erlebnis zu schaffen, können solche Inhalte gänzlich vermieden oder deren Konsum mittels Triggerwarnungen optional aufbereitet werden. Es gibt visuelle (WCAG SC 2.3.1) und inhaltliche Trigger, die es zu beachten gilt.

Zusammenfassung der Anforderungen an barrierefreie Websites

Die Einhaltung der Anforderungen an barrierefreie Websites ist entscheidend, um sicherzustellen, dass alle Nutzer uneingeschränkten Zugang zu digitalen Inhalten haben. Durch die Umsetzung von Richtlinien wie den WCAG, die Berücksichtigung nationaler Gesetze und Verordnungen sowie die Anwendung bewährter Praktiken im UX/UI-Design und bei der technischen Umsetzung können Webseiten nicht nur inklusiver gestaltet werden, sondern auch ihre Reichweite und Benutzerfreundlichkeit erheblich steigern. Barrierefreiheit ist somit nicht nur eine rechtliche Verpflichtung, sondern auch ein entscheidender Faktor für eine positive Nutzererfahrung und den langfristigen Erfolg einer Website.

Geschrieben von:

Konstantin Hanke

Benutzerbild

Konstantin arbeitet als Webentwickler bei kulturbanause. Seine Hauptaufgabe ist die technische Umsetzung von klaren, soliden und effizienten Webauftritten und Website-Komponenten. Darüber hinaus kümmert er sich um die Wartung, Optimierung und Weiterentwicklung von bestehenden Websites. Sein besonderes Interesse gilt der Idee von quelloffener, freier Software.

Jonas Hellwig

Benutzerbild

Jonas ist Gründer der Agentur kulturbanause und des kulturbanause Blogs. Er arbeitet an der Schnittstelle zwischen UX/UI Design, Frontend und Redaktion und hat zahlreiche Fachbücher und Video-Trainings veröffentlicht. Jonas Hellwig ist regelmäßig als Sprecher auf Fachveranstaltungen anzutreffen und unterstützt mit Seminaren und Workshops Agenturen und Unternehmen bei der Planung, der Gestaltung und der technischen Umsetzung von Web-Projekten.

Jonas Hellwig bei Xing

Feedback & Ergänzungen – Schreibe einen Kommentar

Kommentar zu dieser Seite

Wir freuen uns über Anregungen, Ergänzungen oder Hinweise zu Fehlern. Wir lesen jeden Eintrag, veröffentlichen aber nur, was den Inhalt sinnvoll ergänzt.

Barrierefreie Projekte mit kulturbanause

Wir setzen regelmäßig digitale Produkte barrierefrei um und kennen die Anforderungen im konzeptinellen, gestalterischen, redaktionellen und technischen Bereich.

Leistungsangebot Barrierefreiheit →

Schulungen von kulturbanause

Wir bieten Seminare und Workshops zu den Themen Konzept, Design und Development. Immer up-to-date, praxisnah, kurzweilig und mit dem notwendigen Blick über den Tellerrand.

Schulung + Beratung