Anforderungen an eine barrierefreie Website
Von Konstantin Damit eine Website barrierefrei benutzt werden kann, müssen gestalterisch, technisch und inhaltlich bestimmte Richtlinien und Standards erfüllt sein.
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 wie WCAG und BITV, die es grundsätzlich einzuhalten gilt. Wir erklären euch die wichtigsten Anforderungen, die eine barrierefreie Website im UX/UI-Design, bei der technischen Umsetzung sowie bei der Erstellung von Inhalten erfüllen muss, um die Zugänglichkeit eines Webauftritts zu gewährleisten. Wir orientieren uns am WCAG-Level A und AA. Einige Punkte aus AAA haben wir ebenfalls ergänzt, wenn diese aus unserer Sicht leicht zu erreichen sind.
Richtlinien: WCAG und BITV
Die Web Content Accessibility Guidelines (WCAG) sind ein internationaler Standard für die barrierefreie Gestaltung von Websites und Webanwendungen. Sie wurden vom World Wide Web Consortium (W3C) entwickelt und geben Empfehlungen für die Erstellung von Inhalten, die für möglichst viele Menschen mit unterschiedlichen Fähigkeiten zugänglich sind.
Die Barrierefreie-Informationstechnik-Verordnung (BITV) ist eine deutsche Verordnung, die auf den WCAG basiert und für den öffentlichen Bereich verbindlich ist. Sie regelt die Barrierefreiheit von Websites öffentlicher Stellen und Institutionen. Sie soll sicherstellen, dass alle Menschen, unabhängig von individuellen Fähigkeiten oder Einschränkungen, die Angebote nutzen und verstehen können.
Im Folgenden beziehen wir uns stets auf die WCAG, da diese einen internationalen Standard fürs Web formulieren.
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).
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)
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).
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).
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.
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).
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).
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).
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.
Geschrieben von Konstantin Hanke
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.
