Roots48 logo

NA?
AUCH SCHON
BARRIEREFREI?

NOCH NICHT?

Laut BFSG müssen Webseiten ab Juni 2025
(für B2C) barrierefrei sein.

Barrierefreiheit Illustration

JETZT
CHECKLISTE PER
E-MAIL
ANFORDERN!

ACTUNG:

Stichtag 28. Juni 2025

HÄUFIGE BARRIEREN
DARAUF IST ZU ACHTEN!

Barrierefreiheit ist nicht nur für Menschen mit Behinderung oder Krankheit gedacht. Es gibt viele Situationen, in denen jeder von uns auf barrierefreie Websites angewiesen ist.


Diese Einschränkungen können in verschiedenen Phasen zu Problemen bei der Nutzung deiner Website führen:


Visuelle Einschränkungen:
  • - leichte bis starke Sehschwäche
  • - Blindheit
  • - Farbenblindheit
  • - hohe Sonneneinstrahlung
  • - Dunkelheit

Menschen, die situativ oder dauerhaft visuell eingeschränkt sind, hilfst du mit einer klaren Website-Struktur. Durch Unterteilungen, Abstände und Überschriften schaffst du eine Orientierung.

Situativ Zeitweise Permanent
Sehen Sonne
blendet		 Grauer
Star		 Blind
Hören Öffentlicher Ort
ohne Kopfhörer		 Lautsprecher
defekt		 Taub
Geschicklichkeit Alkohol-
einfluss		 Display
gebrochen		 Zitternde Hände
(Parkinson)
Physische
Beweglichkeit		 Baby im
Arm		 Gebrochener
Arm		 Nur einen
Arm
Mental Stress Nicht-Mutter-
sprachler		 Konzentrations-
schwierigkeiten

TEXTGESTALTUNG UND
BARRIEREFREIHEIT

Nicht zu kleine Schrifgrößen. Kein Uppercase bei längeren Texten.

Close Mark

Lorem ipsum dolor sit amet consectetur adipisicing elit. Alias omnis eaque, distinctio fuga consectetur quisquam doloremque. Expedita consectetur, vitae excepturi reiciendis alias possimus cupiditate quibusdam vero, consequuntur saepe atque omnis.

Check Mark

Lorem ipsum dolor sit amet consectetur adipisicing elit. Reprehenderit nemo obcaecati necessitatibus ipsam deserunt excepturi voluptate dolore pariatur repellat ipsum illum quo ducimus, nihil laborum cupiditate sed ullam sit molestiae.

Ausreichend Kontrast zwischten Text- und Hintergrundfarbe

Close Mark

Lorem ipsum dolor sit amet consectetur adipisicing elit. Alias omnis eaque, distinctio fuga consectetur quisquam doloremque. Expedita consectetur, vitae excepturi reiciendis alias possimus cupiditate quibusdam vero, consequuntur saepe atque omnis.

Check Mark

Lorem ipsum dolor sit amet consectetur adipisicing elit. Reprehenderit nemo obcaecati necessitatibus ipsam deserunt excepturi voluptate dolore pariatur repellat ipsum illum quo ducimus, nihil laborum cupiditate sed ullam sit molestiae.

Links nicht nur farbig markieren. Links unterstreichen.

Close Mark

Lorem ipsum dolor sit amet consectetur adipisicing elit. Alias omnis eaque, distinctio fuga consectetur quisquam doloremque. Expedita consectetur, vitae excepturi reiciendis alias possimus cupiditate quibusdam vero, consequuntur saepe atque omnis.

Check Mark

Lorem ipsum dolor sit amet consectetur adipisicing elit. Alias omnis eaque, distinctio fuga consectetur quisquam doloremque. Expedita consectetur, vitae excepturi reiciendis alias possimus cupiditate quibusdam vero, consequuntur saepe atque omnis.

Achte bei deinen Bedienelementen außerdem auf deutliche Farbkontraste und auf eine passende Größe. Deine Schrift sollte gut lesbar sein – das betrifft die Schriftart selbst aber auch ihre Farbgebung und Größe.


Setze Bilder oder Graphiken ein, die den Text ergänzen und zusätzliche Informationen leichter zugänglich machen. Bei deinen Bildern solltest du außerdem immer alt-Tags setzen, da vor allem blinde User sogenannte Screenreader nutzen, die diese Alternativtexte auslesen können.

FARBKONTRASTE

Farbkombinationen mit unterschiedlichen Grauschatierungen

Close Mark
Schlechte Farbkombinationen
Check Mark
Gute Farbkombinationen
Auditive Einschränkungen:
  • - Taubheit
  • - Beeinträchtigung des Gehörs
  • - laute Umgebung oder Störgeräusche
  • - kaputte Lautsprecher

Du möchtest Audio-Inhalte auf deiner Website zur Verfügung stellen? Dann gibt es einige Möglichkeiten, um Barrierefreiheit für eingeschränkte Personen zu schaffen. Bei Videos, in denen gesprochen wird, solltest du immer Untertitel hinzufügen.
Noch besser: Du verzichtest auf Sprache in deinen Videos, sodass diese stumm geguckt werden können. In einem kurzen Text zum Video kannst du den Inhalt beschreiben, was für viele Nutzer hilfreich ist.

Technische Einschränkungen:
  • - Verwendung assistiver Hilfsmittel
  • - ältere Browser oder Endgeräte
  • - Verwendung eines kleinen Displays
  • - geringe Bandbreite und lange Ladezeiten

Nicht jeder User hat jederzeit einen idealen Zugriff auf das Internet. Das beginnt schon mit der ortsunabhängigen Nutzung am Smartphone, die einige Herausforderungen mit sich bringt. Auf dem kleinen Display sollten alle Inhalte gut erkennbar und strukturiert sein. Am besten optimierst du deine Website in erster Linie für das Smartphone, da die meisten Nutzer ihre Recherche mobil durchführen.

Motorische Einschränkungen:
  • - gebrochene oder fehlende Körperteile
  • - Unfall
  • - Lähmung
  • - schlechte Feinmotorik (z. B. im Alter)
  • - Alkoholeinfluss
  • - keine Hand frei

Gerade bei motorischen Einschränkungen ist es wichtig, dass du deine User mit deinem Webdesign unterstützt. Achte auf großzügige Abstände und darauf, dass Buttons und Links groß genug sind, um angeklickt werden zu können. Rechne damit, dass deine Nutzer nicht von Anfang an wissen, wie sie deine Seite bedienen können und beuge Fehlern vor. Wenn du eine Suchfunktion integrieren möchtest, hilft beispielsweise eine Autovervollständigung.

Mentale Einschränkungen:
  • - Lernschwierigkeiten
  • - Verständnisschwierigkeiten
  • - Sprachbarrieren
  • - Stress

ACTUNG: Stichtag 28. Juni 2025


Sollten Onlineshops und Webseiten, die in den Geltungsbereich fallen, nach dem 28.06.25 nicht barrierefrei sein, ist mit erheblichen Sanktionen und Bußgeldern zu rechnen.

CHECK-
LISTE
BARRIERE-
FREIHEIT

Barrierefreiheit Illustration 2