BARRIEREFREIHEIT IM WEB
Barrierefreies Webdesign: Das müssen Sie beachten
Inhalt
Definition zur Barrierefreiheit im Web
Was ist barrierefreies Webdesign?
Für alle Betroffenen ist barrierefreies Webdesign oft eine große Aufgabe. Denn Barrierefreiheit im Web umfasst viele unterschiedliche Aspekte. Wir geben Ihnen einen Überblick über die wichtigsten Merkmale barrierefreien Webdesigns.
Bevor Sie das Projekt in Angriff nehmen, sollten Sie wissen, dass barrierefreies Webdesign keine Einschränkung der Gestaltungsmöglichkeiten oder Funktionalität Ihrer Website, Ihres Online-Portals oder Ihrer App bedeutet. Vielmehr verbessert Barrierefreiheit die Nutzerfreundlichkeit für alle Besucher:innen: Inhalte sind besser gegliedert, die Bedienbarkeit intuitiver und die Sprache verständlicher.
Zusätzlich profitieren Sie von besseren Ergebnissen in Suchmaschinen (SEO), denn viele Maßnahmen der Barrierefreiheit – wie gut gegliederte Überschriften, beschreibende Links oder Alternativtexte – werden auch von Suchmaschinen positiv bewertet.
Barrierefreiheit (im Englischen „Accessibility“) bezieht sich nicht nur auf die optische Darstellung und die Inhalte von Web-Angeboten, sondern umfasst auch deren technische Umsetzung.
Dazu zählen
- Layout
- Texte
- Bilder und Grafiken
- Videos
- HTML-Struktur
- Tastaturbedienbarkeit
- Screenreader-Kompatibilität
sowie die Verwendung von
- Alternativtexten
- Formularkennzeichen
- Kontrasten
- responsive Designs
Bereits geprüft und zertifizierte Beispiele können auf der Webseite des BIK nachgeschlagen werden.
Richtlinien für barrierefreie Webinhalte
Was sind die Vorgaben für barrierefreies Webdesign?
Die gesetzlichen Vorgaben der Europäischen Union, des deutschen Gesetzgebers und der einzelnen Bundesländer spiegeln in weiten Teilen die Web Content Accessibility Guidelines – internationale Richtlinien für barrierefreie Webinhalte – sowie die nationale Barrierefreie-Informationstechnik-Verordnung (BITV) wider.
Die WCAG gelten weltweit als technischer Standard für barrierefreies Webdesign und wurden vom World Wide Web Consortium (W3C), einem Standardisierungsgremium für das Internet, definiert. Die BITV basiert größtenteils auf diesen Richtlinien, enthält aber darüberhinausgehende Anforderungen, wie etwa die Bereitstellung zentraler Inhalte in Deutscher Gebärdensprache (DGS) und in Leichter Sprache.
Wichtig: Die BITV gilt in Deutschland derzeit nur für öffentliche Stellen. Für private Unternehmen wurde im Rahmen der Umsetzung des European Accessibility Acts das Barrierefreiheitsstärkungsgesetz (BFSG) eingeführt, das ab Juni 2025 verbindliche Anforderungen an die digitale Barrierefreiheit stellt.
Alle drei Regelwerke orientieren sich an den vier grundlegenden Prinzipien des barrierefreien Webdesigns. Damit jeder Internetnutzer und jede Internetnutzerin Webinhalte barrierefrei konsumieren kann, sollten diese wie folgt gestaltet sein:
- Wahrnehmbar
- Bedienbar
- Verständlich
- Robust
Im Folgenden werden diese vier Prinzipien der Barrierefreiheit erläutert und anhand beispielhafter Erfolgskriterien veranschaulicht – um einen grundlegenden Überblick zu geben. Konkrete Richtlinien sind in der BITV bzw. WCAG beschrieben.
Prinzip 1: Wahrnehmbarkeit
Alle Inhalte einer Website, also Text, Bild und Video, müssen wahrnehmbar, das heißt gut erkennbar und leserlich sein.
Wahrnehmbarkeit von Texten
Für Texte bedeutet das, dass:
- sie sich gut vom Hintergrund absetzen müssen (ausreichender Farbkontrast)
- sich einzelne Buchstaben deutlich voneinander unterscheiden müssen
- sie linksbündig im Flattersatz gesetzt sind
- sie nicht über die gesamte Bildschirmbreite laufen
- die Schriftgröße nicht zu klein gewählt sein darf.
Zu Texten zählen übrigens auch Links. Diese müssen deutlich als solche erkennbar sein, etwa durch eine andere Schriftfarbe oder Unterstreichung. Sie sollten aussagekräftig sein, damit sich Menschen schnell einen Überblick verschaffen können (das gleiche gilt auch für Überschriften). Außerdem müssen sie über das Ziel des Links informieren.
Wahrnehmbarkeit von Bilder, Grafiken und Videos
Insbesondere für sehbehinderte Menschen ist es wichtig, dass Bilder und Grafiken anderweitig wahrnehmbar sind. Deshalb müssen schriftliche Informationen zu den verwendeten Bildern vorliegen. Nur so können sogenannte Screenreader, also Hilfsmittel für blinde und sehbehinderte Menschen, sie erfassen. Dafür müssen Sie im sogenannten Alternativtext eine kurze Beschreibung hinterlegen. Gibt es Grafiken und Diagramme mit viel Informationen reicht ein Alternativtext allerdings nicht aus. Sie müssen in einer barrierefreien Tabelle umgesetzt werden.
Berücksichtigt werden sollte zudem, dass viele Nutzer im Alltag den Dark Mode bevorzugen – Farben sollten für alle Varianten barrierefrei sein, d.h. die Farbkontraste sollten unbedingt auch im Dark Mode funktionieren oder angepasst werden.
Analog dazu müssen Sie Videos für gehörlose oder schwerhörige Menschen mit Untertitel versehen und ebenfalls mit einem Alternativtext hinterlegen. Wichtige Inhalte müssen außerdem in Gebärdensprachenvideos angeboten und Audio-Dateien in Schriftform vorhanden sein.
Responsivität des Designs
Immer mehr Menschen nutzen das Internet primär auf dem Smartphone. Mobile First – die meisten Websites werden bereits so entwickelt, dass die Mobile Version die Ausgangsversion ist. Das heißt auch die Themen mobile Nutzung und Responsivität gehören zum barrierefreien Webdesign. Egal auf welcher Art von Gerät der Nutzer oder die Nutzerin die Website öffnet, muss sich das Design automatisch anpassen. Sie sollten die Darstellung je nach ihren Bedürfnissen auch manuell vergrößern oder verkleinern können. Dies setzt zum Beispiel auch dynamische Schriftgrößen voraus.
Personalisierung durch Barrierefreiheits-Menü
Da die Bedürfnisse der Nutzer sehr individuell sind, eignet sich eine Personalisierung der Webseiten sehr gut, um diese zu erfüllen. Im Idealfall ist die Grundversion der Website bereits so barrierefrei wie möglich. Integrierte Optionen wie zum Beispiel ein „Barrierefreiheits-Menü“ stellt aber in manchen Fällen eine sinnvolle Ergänzung dar. Das Menü erlaubt es den Nutzern, die Darstellung der Website und die Navigation nach ihren Bedürfnissen anzupassen wie die Schriftgröße, Kontraste, Farben, etc.
Prinzip 2: Bedienbarkeit
Damit eine Website für alle Menschen bedienbar ist, muss man sie auch ohne Maus, Tippen oder Wischen navigieren können. Das ist wichtig für Menschen, die sehbehindert sind oder Arme, Hände oder Finger nicht oder nur eingeschränkt bewegen können.
Tastaturbedienbarkeit
Barrierefreie Websites können zum Beispiel mit der Tastatur navigiert und so alle Inhalte erreicht werden. Die Tabulator-Taste führt von Link zu Link. Für eine problemlose Tastaturbedienbarkeit sollten Fokus-Indikatoren optimiert werden, denn ein klar sichtbarer Fokusrahmen hilft den Nutzern per Tastatur zu navigieren.
Touch-Bedienbarkeit
Bei mobilen Geräten muss eine einwandfreie Touch-Bedienbarkeit gewährleistet sein. Mobile Nutzer sollten ohne komplizierte Wischgesten navigieren können. Gleichzeitig können zum Beispiel Fehlklicks vermieden werden mit Hilfe von größeren Touch-Zielen.
Sprachsteuerung
Eine weitere Möglichkeit für die Bedienung auf mobilen Geräten ist die Sprachsteuerung. Sprachassistenten wie Siri, Google Assistant & Co. werden häufig genutzt, um Webseiten zu steuern.
Automatische Formularausfüllung
Der Einsatz von Autovervollständigung bei Online-Formularen kann zudem das Ausfüllen mit den eigenen Daten erheblich erleichtern – zudem ist es effizient und zeitsparend.
Prinzip 3: Verständlichkeit
Neben physischen und sensorischen Barrieren rücken kognitive Einschränkungen stärker in den Fokus. Dazu gehören etwa Legasthenie, ADHS oder Demenz. Verständlichkeit ist ein weiterer wichtiger Aspekt barrierefreien Webdesigns.
Gliederung und Navigation
Dabei hilft ein kurzer Einstiegstext auf jeder Unterseite und eine übersichtliche Gliederung der Inhalte.
Verständlichkeit können Sie unter anderem fördern, indem Sie Menüpunkte und Überschriften eindeutig und klar formulieren. So verstehen User (mit Hilfe von Screenreadern), wo sie welche Inhalte finden.
Einfache Texte und Leichte Sprache
Texte sollten Sie so einfach wie möglich halten. Das heißt auch, schnell zum Punkt zu kommen. Sätze sind kurz und verständlich, komplexe Satzstrukturen und Fremdwörter werden vermieden.
Barrierefreies Webdesign erfordert aber auch, dass Informationen in Leichter Sprache und Gebärdensprache angeboten werden. Leichte Sprache ermöglicht es Menschen mit einer Lernbehinderung, kognitiven Einschränkungen oder geringen Deutschkenntnissen, die Inhalte zu verstehen.
Visuelle Unterstützung
Zudem kann die Verwendung von Icons, Symbolen und Illustrationen als visuelle Unterstützung erheblich beim Verstehen helfen und macht den Text greifbarer und erlebbar und somit eingänglicher.
Gleichzeitig sollte aber auch darauf geachtet werden, dass der Nutzer von irritierenden Animationen, Pop-ups und blinkende Elemente nicht vom Lesen abgelenkt wird.
Prinzip 4: Robustheit
Robust im Kontext von barrierefreiem Webdesign bedeutet, dass eine Website in vielen Webbrowsern und mit diversen Hilfsmitteln für Menschen mit Behinderung funktioniert.
Dafür müssen Sie alle Inhalte mit der Programmiersprache HTML strukturieren. Einzelne Textteile, wie Überschriften, Tabellen oder Links, werden so als solche gekennzeichnet und können von Screenreadern richtig ausgegeben werden. Programmieren Sie sauber nach Webstandards und verzichten Sie auf Barrieren im Code – z.B. durch fehlende ARIA-Rollen oder unklarer Fokusführung.
Design Trends
Inklusives Webdesign
Den Usern ein barrierefreies Webedesign zu bieten, ist nicht mehr ein schickes „Extra“, mit dem man sich hervorheben kann, sondern mittlerweile Pflicht für viele Websites und Apps – und damit ein Standard für gutes UX-Design. Aus den Vorgaben und Prinzipien des barrierefreien Webdesigns ergeben sich auch völlig neue Design-Trends.
Farbkontraste
Der aktuelle Webdesign Trend geht zu hohen Farbkontrasten – je stärker, desto besser. Natürlich spielt beim aktuellen Trend auch der immer beliebtere Dark Mode eine Rolle – auch hier sollten Farbkontraste funktionieren. So bleiben die Inhalte stets und für alle sichtbar.
Minimalismus
Der eher Minimalistische und klare Design-Trend erlaubt die Fokussierung auf die Inhalte durch weniger Ablenkung. Weniger ist manchmal auch mehr und so lohnt es sich auf das Wesentliche zu reduzieren. Dazu gehören eine einfache Navigation und sehr klare Strukturen der Seiteninhalte – d.h. kein unnötiger Schnickschnack.
Personalisierung
Der Trend entwickelt sich zur Anpassbarkeit – Nutzer können den Dark Mode oder High Contrast Mode auswählen, ihre individuellen Schriftgrößen personalisieren.
Umgangssprache
Zudem liegt eine einfache und umgängliche Sprache voll im Trend: Das Protzen mit Fachbegriffen und verschachtelten Sätzen ist von gestern. Durch die Verwendung von unterstützenden Bildern, Grafiken und Symbolen lassen sich die Aussagen im Text visuell erklären – so wird die Message zugänglicher, auch wenn das Thema komplex ist.
Mobile First
Mobile First und Touch-Optimierung wird immer mehr zum Standard – mehr als 60% der Internetnutzung erfolgt auf Mobilen Endgeräten. Gleichzeitig verwenden viele Nutzer mit motorischen Einschränkungen vermehrt Touchscreens. So geht der Trend zu einfacher Gestensteuerung ohne komplexes Swipen und touch-freundliche Buttons.
Checklisten und Online-Tools
Checklisten für barrierefreies Webdesign
Um sicherzustellen, dass Sie die wichtigsten Punkte für barrierefreies Webdesign beachtet haben, können Ihnen Checklisten helfen. Ebenso wie maschinelle Tests zur Überprüfung der Barrierefreiheit reichen sie allerdings nicht aus. Denn automatische Werkzeuge, wie webhint.io, Accessibility Insights oder axe, sind nicht fähig, die meisten Anforderungen verlässlich zu prüfen. Sowohl Checklisten für barrierefreies Webdesign als auch maschinelle Prüfverfahren sind aber gute Hilfsmittel zur Orientierung.
Fazit
Warum barrierefreies Webdesign?
Der aktuelle Trend zeigt: Barrierefreiheit wird zum Standard. Barrierefreies Webdesign ist keine lästige Verpflichtung, sondern ein Angebot, dass allen Website-Besucherinnen und -Besuchern hilft. Für einen Teil der User ist sie notwendig, einen weiteren Teil unerlässlich, aber für alle verbessert sie die Nutzererfahrung. Barrierefreies Webdesign erreicht mehr Menschen und verbessert die Benutzerfreundlichkeit von Websites.
Gesetzliche Vorgaben setzen klare Deadlines und Anforderungen. Ab Juni 2025 ist Barrierefreiheit kein „Nice-to-have“ mehr, sondern Pflicht auch für kommerzielle Websites (BFSG) – gleichzeitig profitieren diese auch davon, ihre Internetangebot inklusiver zu gestalten. Schließlich macht es das Internet inklusiver und wertvoller für alle.
Idealerweise konzipieren Sie Ihr Webdesign von Beginn an technisch und redaktionell barrierefrei. Denn gelegentlich lassen sich Barrierefreiheit und ein bestehendes Corporate Design nicht einwandfrei kombinieren, etwa weil sich die Textfarbe nicht stark genug von der Hintergrundfarbe abhebt.
Falls Sie eine bestehende Website umgestalten müssen oder möchten, unterstützt visual4 Sie dabei gerne. Melden Sie sich bei uns.
Team
Jetzt beraten lassen
Unser Certified Accessibility Expert Dennis Seid gestaltet und setzt Barrierefreiheit im Web gemäß BITV 2.0 um.
Lassen Sie sich beraten und machen Sie Ihre Website zukunftssicher.
Dennis Seid