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.

1

Was bedeutet Barriere im Internet?

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

Grundsätzliche Herangehens­weise, um Zugänglichkeit zu gewährleisten

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.

Die Zielgruppen­definition größer denken

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:

  • schnelle Ladezeit
  • durchdachte und einheitliche Navigation
  • klare Benutzerführung durch eindeutige und überschaubare Auswahlmöglichkeiten
  • saubere Struktur der Inhalte, die Orientierung bietet
  • verständliche Texte

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.

Verständlichkeit

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?

AbbrechenOK

Bei gering veränderter Wortwahl sollte es ohne Probleme weitergehen:

Möchten Sie den Vorgang
wirklich abbrechen?

Nein, fortfahrenJa, 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.

Gutes Webdesign sorgt für Wahrnehmbarkeit der Inhalte

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:

  • visuell
  • akustisch
  • haptisch

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.

Und noch ein Vorteil: eine barrierefreie Website ist suchmaschinen-freundlich!

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

  • gliedernde Elemente, die Orientierung geben wie Überschriften, Zwischenüberschriften und Listen mit Aufzählungspunkten sowie für
  • Elemente, die eine Aktion auslösen können. Das sind zum Beispiel Links, Buttons und Menüpunkte.

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

Standards und gesetzliche Pflichten

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.

4

Checkliste Barrierefreiheit

An Hand der folgenden Punkte könnt ihr prüfen, ob eure eigene Website bereits die wichtigsten Anforderungen an Barrierefreiheit erfüllt.

Ansonsten helfe ich euch gern weiter.

Kontraste

Für gute Lesbarkeit sind hohe Kontraste zwischen Textfarbe und Hintergrundfarbe auschlaggebend. Das gilt auch für Buttons und alle weiteren bedienbare Elemente. Das heißt nicht, dass alles Schwarz auf Weiß dargestellt werden muss, ein durchdachtes Farbkonzept hilft bei der Orientierung und bietet einen Wiedererkennungswert für eure Website.

Der Kontrast zwischen zwei Farben ist technisch messbar, für die Auswahl der Farben helfen Tools wie Contrast Checker. Sie geben das Ergebnis in einem Verhältnis an, akzeptable Werte liegen oberhalb von 4,5 : 1.

Einige Beispiele mit Angabe der Kontrastverhältnisse,
die beiden letzten kommen nicht in Frage:

Das

21 : 1

gutes Ergebnis

ist

11 : 1

gutes Ergebnis

ein

8,7 : 1

gutes Ergebnis

bunter

1,6 : 1

schlechtes Ergebnis

Text

1,2 : 1

schlechtes Ergebnis

Entscheidend für die Lesbarkeit ist der Helligkeitskontrast. Daneben gibt es noch den Farbkontrast. Weiter unten ist gezeigt, dass der Farbkontrast nicht relevant ist.

Schriftbild

Für das problemlose Lesen von Texten sind wichtig:

  • Schriftgröße: sie sollte mindestens 16 Pixel betragen (und das ist schon ziemlich klein, wie ihr an diesem Einschub sehen könnt). Ich verwende im Fließtext auf dieser Seite 20 Pixel.
  • Zeilenabstand: sollte das 1,5-fache von der Textgröße betragen, ich verwende hier das 1,65-fache
  • Zeilenlänge: sollte maximal 80 Zeichen betragen. In voller Desktopbreite enthält die längste Zeile dieser Seite 95 Zeichen.

Soweit zu festen Werten. Ganz entscheidend für die Lesbarkeit von Texten ist allerdings die verwendete Schriftart. Das beste Regelwerk nützt nichts, wenn die Schriftart an sich nicht für den Einsatz auf Webseiten geeignet ist. Zu diesem Thema findet ihr eine anschauliche Darstellung auf leserlich.info. Es lohnt sich, dort zu stöbern! Simulationen zeigen, wie gut oder wie schlecht seheingeschränkte Menschen Texte in unterschiedlichen Schriftarten wahrnehmen.

Steuerung über die Tastatur

Für User mit motorischen Einschränkungen ist die Bedienung mit Maus oder Touchscreen oft nicht möglich. Wichtig für die Barrierefreiheit einer Website ist, dass alle Elemente über die Tastatur erreichbar sind. Auch User ohne motorische Einschränkungen steuern Anwendungen gern mit der Tastatur, wenn sie es zum Beispiel von Bürosoftware gewohnt sind.

Die wichtigste Taste ist die Tab-Taste, mit ihr können alle Menüpunkte, Links und Buttons angesprungen werden. Zum Aktivieren einer gewünschten Aktion dient in der Regel die Enter-Taste, die Steuerung innerhalb von Auswahllisten gelingt mit den Pfeiltasten.

Zur Tastatursteuerung gehört auch die visuelle Hervorhebung des aktiven Elementes. Diese Rückmeldung teilt dem User mit, wo er sich gerade befindet und bietet ihm die notwendige Orientierung.

Tab-Taste auf der Tastatur

Das könnt ihr auf dieser Website gern ausprobieren.

Zu Best Practice bei der Tastatursteuerung gehört:

  • sinnvolle Tab-Reihenfolge: Sie muss dem logischen Aufbau der Seite entsprechen und den Absichten der User folgen.
  • Inhalte überspringen: Damit nicht jedes Mal beim Aufrufen einer Unterseite das gesamte Menü durchgegangen werden muss, sollte eine Abkürzung zum Hauptinhalt angeboten werden. Sinnvoll ist es auch, Formulare überspringbar anzulegen.

Bildschirminhalt vergrößern über die Zoom-Funktion

Das ist die einfachste Methode, eine Website auf Barrierefreiheit zu testen. Mit der Tastatur löst die Tastenkombination Strg plus + den stufenweisen Zoom aus, auf Smartphones ist das Symbol AA zuständig. Bei jedem Zoomschritt könnt ihr nicht nur feststellen, wie der Text vergrößert wird, sondern auch wie das gesamte Seitenlayout sich dem Responsiven Design annähert. Die Barrierefreiheit ist erfüllt, falls bei 200 % Vergrößerung kein Text verschwindet oder abgeschnitten ist, es zu keinen Überlappungen kommt und alle weiteren Elemente wie Menüpunkte, Buttons und Formulare erreichbar und benutzbar sind.

Aussagekräftige Beschreibungen für Bilder und Grafiken

Der Alternativ-Text (das sogenannte alt-Attribut) sollte die Bildaussage präzise in Worten ausdrücken, damit er für blinde Menschen vom Screenreader vorgelesen werden kann. Oft wird der Alternativtext vernachlässigt und ist nicht ausgefüllt. Für dekorative Grafiken ohne Informationsgehalt kann der Alternativtext leer gelassen werden.

Der Alternativtext hat ebenfalls große Bedeutung für Suchmaschinen, die hier gezielt nach relevanten Keywords für Suchanfragen suchen. Bei Optimierung für Suchmaschinen (SEO) kann es zu Zielkonflikten mit den Erfordernissen an die Barrierefreiheit kommen. Blinde User haben wenig Interesse an sich wiederholenden Keywords, ihnen müssen Bildinhalt und Bildaussage vermittelt werden.

Beispiel für Alternativtext

Angenommen, dieses Bild ist in einem längeren Text über den Frankfurter Hauptbahnhof eingebunden. Alle User wissen also, um welches Gebäude es gerade geht.

Morgenlicht fällt durch das Glasdach der Bahnsteighalle des Frankfurter Hauptbahnhofs auf Gleis 7 und auf einen bereitgestellten ICE

Google hat aber den Blick von außen, daher sollte der Alternativtext im Hinblick auf Suchmaschinenoptimierung (SEO) noch einmal das Gebäude als Keyword nennen:

Bahnsteighalle Frankfurt (Main) Hauptbahnhof

Gut möglich, dass Google dann den Text in die Suchergebnisse aufnimmt, wenn jemand danach sucht. Menschen, die schon auf dieser Seite sind, müssen nicht erst auf diese Seite gebracht werden und brauchen eine genauere Beschreibung, damit sie sich das Bild vorstellen können:

Morgenlicht fällt durch das Glasdach der Halle auf den fast menschenleeren Bahnsteig und bildet kräftige Schatten auf den bereitgestellten ICE.

Mit 142 Zeichen ist diese Beschreibung an der Obergrenze der Empfehlungen für angemessene Textlänge.

Wer sowohl für SEO als auch für die eigenen User einen Beitrag leisten möchte, könnte zu diesem Ergebnis kommen:

Morgenlicht fällt durch das Glasdach der Bahnsteighalle des Frankfurter Hauptbahnhofs auf Gleis 7 und auf einen bereitgestellten ICE.

Mit 132 Zeichen sind alle Interessen bedient, aber von der Bildstimmung geht ein Teil verloren.

Korrekte Beschriftung von Formular-Eingabefeldern

Der Trend zu reduziertem Design ist völlig in Ordnung, solange dabei nicht übertrieben wird. Alle Eingabefelder von Formularen brauchen eine klare Beschriftung, die auch nach dem Eintrag bestehen bleibt. Minimalistische Designs machen es oft so, füllt bitte einmal die Felder zur Probe aus:



Sobald das Feld ausgefüllt ist, ist die Beschriftung verschwunden.

Sind in einem Formular mehrere Eingabefelder auszufüllen, verliert man rasch den Überblick, was eigentlich wohin gehört. Wenn euer Formular sich so verhält, ist es nicht barrierefrei.

Damit das Formular barrierefrei ist, muss die Beschriftung außerhalb des Eingabefeldes stehen und im Quellcode mit ihm verknüpft sein. Damit ist gewährleistet, dass die User mit dem Eingabefeld komfortabel arbeiten können, egal ob sie es per Touchscreen, Maus, Tastatur, Screenreader oder Spracheingabe tun. Für die Maus wird dadurch auch die Beschriftung anklickbar und der Cursor springt sofort in das Eingabefeld.

Für weitere Formular-Elemente wie Checkboxen oder Radio-Buttons ergibt sich immer eine flüssige und unkomplizierte Handhabung, da es genügt, den relativ langen Text anzuklicken und nicht die kleinen Kästchen selbst. Auf Touchscreens ist das eine große Hilfe.

Probiert einmal aus:



Gewünschte T-Shirt-Größe



Keine ablenkenden Animationen oder Hintergrundvideos

Bewegte Inhalte wie Bilderkarussells oder Ticker sollen spätestens nach 5 Sekunden stoppen oder es muss eine Möglichkeit geben, sie mit der Maus oder Tastatur anzuhalten.

Videos müssen untertitelt sein

Für schwerhörige und gehörlose User ist das essentiell. Für alle anderen ist das äußerst sinnvoll, wenn gerade kein Kopfhörer zur Hand ist, aber sich andere Personen im Raum aufhalten, die man nicht stören möchte.

Aussagekräftige und eindeutige Titel aller Seiten und Unterseiten

Die Titel sind wichtig, um mehrere geöffnete Seiten im Browser unterscheiden zu können. Screenreader lesen immer als erstes den Titel vor, um den Usern eine schnelle Orientierung zu geben. Der Titel sollte aus zwei Bestandteilen bestehen: eine kurze Beschreibung der aktuellen Seite, gefolgt von der allgemeinen Bezeichnung des Webangebotes. Als Beispiel sei der Titel für diese Seite genannt:

Barrierefreie Website erstellen – Christof Deinhard Webdesign

5

Barrierefreier Quellcode

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.

Screenreader lesen auch die Bezeichnung von gliedernden und aktivierbaren Elementen vor

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.

Überschriften müssen richtig eingesetzt werden

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.

Beispiel

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

Farben als Barriere

Stolperfalle Farbkontrast

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.

Das Wappen des Kantons Tessin ist senkrecht in Rot und Blau unterteilt

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.

Das Wappen des Kantons Tessin in Graustufen

Stolperfalle Farbhinweis

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