Barrierefrei – Design für alle
Ziel ist, die Website für alle User zugänglich zu machen, niemand soll ausgeschlossen werden.
Von einer barrierefreien Website profitieren alle User.
Ziel ist, die Website für alle User zugänglich zu machen, niemand soll ausgeschlossen werden.
Von einer barrierefreien Website profitieren alle User.
1
Von einer Barriere ist immer dann zu sprechen, wenn es nicht mehr weiter geht oder ein User nicht mehr weiter weiß. Auch User ohne Einschränkungen scheitern schnell an einer Website, wenn die Navigation keine klaren Auswahlmöglichkeiten bietet, wenn die Ladezeiten unerträglich lang sind oder wenn ein Button missverständlich beschriftet ist. Formulare können sich ebenfalls als Stolperfallen erweisen. In allen diesen Fällen ist der Zugang zur gewünschten Information oder zum erfolgreichen Abschluss einer Aktion erschwert oder unmöglich.
Im Vordergrund steht also die Zugänglichkeit. Im englischen Sprachraum ist statt von Barrierefreiheit von Accessibility die Rede, das beschreibt die Aufgabe zutreffender. Beim deutschen Begriff barrierefrei schwingt der absolute Anspruch an hundertprozentige Erfüllung mit. Das schafft nur unnötige Hürden für alle, die sich mit dem Thema auseinandersetzen wollen und dazu beitragen möchten, das Internet zu einem freien und inklusiven Ort zu machen.
Auf dieser Seite finden alle, die sich den wichtigen Themen Barrierefreiheit und Zugänglichkeit annähern möchten, einen Überblick über die wichtigsten Konzepte sowie über mögliche Stolperfallen. Hier könnt ihr auch erfahren, wie es sich anfühlt, eine Website nur mit der Tastatur zu bedienen.
2
Der erste Schritt ist, den User nicht nur als potenzielle Interessentin oder als Käuferin in den Mittelpunkt zu stellen, sondern als Individuum mit unterschiedlichen Fähigkeiten, Besonderheiten und Einschränkungen.
Viele Betreiberinnen und Betreiber von digitalen Angeboten betreiben erheblichen Aufwand, um Zielgruppen, Bedürfnisse und Wünsche zu erfassen und richten ihr Angebot entsprechend aus. Es ist selbstverständlich, sich über demografische Merkmale wie Alter, Geschlecht, Wohnumfeld, Kaufkraft und Ernährungsgewohnheiten Gedanken zu machen. Dabei wird schnell übersehen, dass reale Menschen weitere Eigenschaften mitbringen:
blind Arm im Gips gehörlos falsche Brille eingesteckt motorisch eingeschränkt seheingeschränkt individuelle Farbenwahrnehmung
Als Basis für die Zugänglichkeit einer Website sind die folgenden Punkte wichtig:
Darauf aufbauend, lassen sich die Erfordernisse an die Barrierefreiheit für weitere User umsetzen. Die genannten Punkte sind übrigens auch Voraussetzung für eine gute User Experience (UX). Die Benutzererfahrung entscheidet darüber, wie lange und wie gern sich jemand auf einer Website aufhält.
Zuerst ein kleines Beispiel, das für fast alle User eine Barriere darstellt. Sie sind in einer Sackgasse gelandet:
Möchten Sie den Vorgang
wirklich abbrechen?
Bei gering veränderter Wortwahl sollte es ohne Probleme weitergehen:
Möchten Sie den Vorgang
wirklich abbrechen?
Zur Verständlichkeit einer Website gehört auch, dass interaktive Elemente wie Buttons und Links so gestaltet und benannt sind, dass ihre Funktion sofort erkennbar ist und der User vorher weiß, welche Aktion er damit auslöst und wohin ihn das führt.
Viele Menschen denken, ein Webdesigner oder eine Webdesignerin beschäftigt sich mit dem Aufsetzen einer hübschen Oberfläche, wobei Stil und Farbgebung dem Thema, der Zielgruppe und dem Unternehmen entsprechen soll – das ist dann alles.
Dabei wird übersehen, dass die hübsche Oberfläche nur eine Variante ist, den Inhalt zu repräsentieren. Insgesamt haben die User drei Möglichkeiten, die Inhalte wahrzunehmen:
Die eigentliche Aufgabe beim Webdesign ist also, den Inhalt für alle Kanäle aufzubereiten und wahrnehmbar zu machen.
Die visuelle Wahrnehmung ist die am häufigsten verbreitete. Als Webdesigner habe ich große Freiheiten, die Inhalte oben und unten, links und rechts anzuordnen. Mir stehen eine zweidimensionale Fläche und ein breites Farbspektrum zur Verfügung. Ich muss nur die übliche Leserichtung berücksichtigen und kann mit auffallender Gestaltung von einigen Elementen die Aufmerksamkeit der User lenken und auch einmal zum Blick von rechts nach links einladen. Über Schriftgrößen kann ich ebenfalls Aufmerksamkeit und Lesereihenfolge steuern.
Die akustische und haptische Wahrnehmung gelingt mit geeigneten Tools, aber ich muss dafür sorgen, dass die Inhalte über diese Tools wahrgenommen werden können. Die Reihenfolge bei akustischer und haptischer Wahrnehmung ist linear.
Für das Verständnis von Barrierefreiheit ist wichtig zu wissen, dass eingeschränkte User häufig auf Assistenz-Technologien zurückgreifen. Für Blinde ist ein Screenreader unerlässlich, der Inhalte oder Teilbereiche einer Website vorliest und dabei auch die relevanten Funktionen der Elemente übermittelt. Das gilt für
Damit dies alles gelingt, ist eine saubere und eindeutige Struktur des Seitenquelltextes Voraussetzung. Ein Screenreader geht dabei genauso vor wie die Algorithmen von Suchmaschinen: am Anfang steht die Analyse des Seitenquelltextes, es folgt die Zerlegung in logische Teilbereiche. Suchmaschinen entscheiden auch über die Qualität des Quelltextes, ob eine Website eher oben oder unten in den Suchergebnissen erscheint.
3
Wer für Inklusion und digitale Teilhabe für alle eintritt, findet breite Unterstützung mit klar definierten Richtlinien und Anleitungen. Niemand muss das Rad neu erfinden.
Der internationale Standard Web Content Accessibility Guidelines WCAG 2.0 definiert die Anforderungen an Barrierefreiheit und ist in einer EU-Norm umgesetzt. Dieser Standard sieht bewusst mehrere Stufen für die Erfüllung der Barrierefreiheit vor, um die Einstiegshürden bei der Umsetzung nicht zu hoch zu setzen.
In Deutschland gilt ab Juni 2025 das Barrierefreiheitsstärkungsgesetz. Es macht vielen Unternehmen und Organisationen die Einhaltung der Barrierefreiheit für digitale Angebote Pflicht. Schon seit mehreren Jahren gilt dies für öffentliche Verwaltungen, Regierungsorgane und Behörden.
5
Es ist technisch möglich, einen Button im Quellcode nicht als Button, sondern als kleine farbige Fläche anzulegen und mit der gewünschten Aktion zu verknüpfen. Das Ergebnis sieht aus wie ein Button, funktioniert wie ein Button, ist aber keiner. Für sehende Menschen ist das kein Problem, für alle anderen schon: Screenreadern und anderen Assistenz-Tools fehlt die Information, dass an dieser Stelle ein Button ist. Daher kann der User ihn nicht wahrnehmen.
Bei korrektem Einsatz der Elemente wie Formular, Button, Link, Überschrift und Liste vermittelt ein Screenreader den Usern die Bedeutung, die dahintersteht. So wissen sie, wo sie gerade sind und können vorher abschätzen, was sie mit einer angebotenen Aktion wirklich auslösen.
Sehende Menschen erkennen Überschriften einfach daran, dass die Buchstaben größer und auffälliger sind, also lenken sie ihren Blick dorthin in der Annahme, dort eine wichtige Information zu finden. Bei Interesse lesen sie den Text darunter, ansonsten scrollen sie zur nächsten Überschrift oder Zwischenüberschrift. Wie diese auffälligen Buchstaben eigentlich zustande kommen und was dahintersteht, ist ihnen egal. Sie finden Orientierung durch die visuelle Wahrnehmung.
Für barrierefreien Quelltext ist eine saubere Struktur der Überschriften essentiell, für sie sind sechs Ebenen vorgesehen. Die Hauptüberschrift bekommt die Bezeichnung h1, alle weiteren Überschriften sind mit den Bezeichnungen h2 bis maximal h6 je nach Wichtigkeit eingestuft. h1 darf nur einmal vorkommen und sollte ganz oben stehen. Alle anderen Ebenen können beliebig oft verwendet werden, müssen aber sauber abgestuft sein.
Als einfaches Beispiel ist hier die Überschriften-Struktur dieser Seite abgebildet, dann wird vieles klarer:
<h1>Barrierefrei – Design für alle</h1>
<h2>Inhalt</h2>
<h2>Was bedeutet Barriere im Internet?</h2>
<h2>Grundsätzliche Herangehensweise …</h2>
<h3>Die Zielgruppendefinition größer denken</h3>
<h3>Verständlichkeit</h3>
<h3>Gutes Webdesign sorgt für Wahrnehmbarkeit …</h3>
<h2>Standards und gesetzliche Pflichten</h2>
<h2>Checkliste Barrierefreiheit</h2>
Screenreader lesen auch die Nummern der Ebene vor, zum Beispiel:
„Überschrift Ebene 2: Inhalt“
und User können über die Tastatur direkt von einer Überschrift zur nächsten springen.
So kann sich jemand zuerst einmal alle h2-Überschriften der Reihe nach vorlesen lassen, bei Interesse in einen Abschnitt hineinspringen, um zu erfahren, was es dort gibt und jederzeit wieder zur nächst höheren Ebene zurück gehen oder die Leserichtung nach oben umkehren.
Die Überschrift zum Inhaltsverzeichnis ist als h2 im Quellcode angelegt, auch wenn sie visuell deutlich kleiner ist als die anderen h2-Überschriften. Auf dem Desktop ist das Inhaltsverzeichnis links von der Hauptüberschrift Barrierefrei – Design für alle angeordnet – wobei ich den sehenden Usern die Lesereihenfolge selbst überlasse. Auf Smartphones ist die Reihenfolge vertauscht und entspricht der Abfolge im Quellcode.
6
Viele von euch werden das abgebildete Wappen des Schweizer Kantons Tessin so wahrnehmen: Die eine Hälfte ist rot und die andere Hälfte ist blau.
Ganz einfach – kann man jetzt denken, Rot und Blau sind schließlich bekannte Grundfarben, sie lassen sich gut auseinanderhalten! Aus dem sogenannten Farbkontrast entsteht die Wahrnehmung, dass die eine Hälfte des Wappens sich deutlich von der anderen Hälfte unterscheidet.
Einige von euch sehen dasselbe Wappen eher so wie in der zweiten Abbildung, die beiden Hälften sind kaum unterscheidbar. Menschen mit Farbenfehlsichtigkeit oder abweichender Farbwahrnehmung bietet der Farbkontrast keine Informationen, sie sind auf den Helligkeitskontrast angewiesen.
Stellen wir uns einmal vor, auf einer fiktiven Website ist ein Textabschnitt mit dem Hinweis ergänzt:
Weitere Informationen finden Sie unten in der grünen Box.
Der User scrollt also nach unten und findet dort mehrere farbigen Boxen mit Informationen. Wissen alle User sofort, welche Box gemeint ist?
Tagesgericht 1
Linsen mit Spätzle
Tagesgericht 2:
Seelachs mit Kartoffeln
gegründet: 2004
Anzahl der Mitarbeitenden: 16
Rechtsform: GmbH
Alle sicherlich nicht, denn die Farbbeschreibung hilft manchen nicht weiter.
Tagesgericht 1
Linsen mit Spätzle
Tagesgericht 2:
Seelachs mit Kartoffeln
gegründet: 2004
Anzahl der Mitarbeitenden: 16
Rechtsform: GmbH
Farbe kann also nicht als alleiniger Informationsträger eingesetzt werden. Wer alle Menschen erreichen möchte, muss weitere Erkennungs- und Unterscheidungsmöglichkeiten anbieten.
7
Um diese Frage zu beantworten, muss die in Frage kommende Website gründlich analysiert werden. Hilfreich für die Analyse sind
Wenn sich der Quellcode als problematisch erweist, ist eine Neuproduktion des Webauftritts wahrscheinlich aus Kostengründen zu empfehlen. Dasselbe gilt, wenn die Website kein Responsives Design aufweist.
In allen anderen Fällen sollten die festgestellten Probleme priorisiert und nach Machbarkeit sowie geschätztem Aufwand bewertet werden.
Es sind einige Plugins für Barrierefreiheit verfügbar. Voraussetzung für den Einsatz ist die Kompatibilität mit dem eingesetzten WordPress-Theme. Was sie wirklich leisten und ob sie zuverlässig funktionieren oder neue Probleme verursachen, muss geprüft werden. In Einzelfällen können sie durchaus sinnvoll sein, aber das Rundum-sorglos-Wundermittel sind sie aktuell noch nicht. Es bleibt spannend, denn die Entwicklung wird sicher weitergehen!