Barrierefreies Webdesign

Zuletzt aktualisiert: Mai 24, 2024

Start // Lexikon // Barrierefreies Webdesign

Ein barrierefreies Webdesign gewährleistet, dass Deine Website für alle Menschen zugänglich ist, unabhängig davon, ob sie eine Behinderung oder ein anderes Handicap haben. Dies beinhaltet sowohl körperliche als auch technische Einschränkungen. Auch die Bedürfnisse älterer Nutzer:innen werden dabei berücksichtigt. 

In diesem Beitrag erklären wir Dir, was hinter barrierefreiem Webdesign steckt, welche rechtlichen und technischen Anforderungen erfüllt werden sollten und wie Du Deine Website auf Barrierefreiheit testen kannst.

Barrierefreies Webdesign - das Wichtigste in Kürze

  • Durch barrierefreies Webdesign wird der Zugang für alle Nutzer:innen ermöglicht, einschließlich Menschen mit körperlichen und technischen Einschränkungen.
  • Durch Barrierefreiheit wird die Nutzererfahrung für ein breites Spektrum von Besucher:innen verbessert und die Inklusion im digitalen Raum unterstützt.
  • Dabei werden verschiedene Einschränkungen/Behinderungen wie z.B. Seh- und Hörbehinderungen, motorische und kognitive Einschränkungen berücksichtigt.
  • Die Anforderungen an die Barrierefreiheit öffentlicher Webangebote sind durch gesetzliche Vorgaben, z. B. das Behindertengleichstellungsgesetz (BGG), definiert.
  • Zugänglichkeit, verständliche Inhalte, responsives Design und Benutzerunterstützung sind wichtige Elemente eines barrierefreien Webdesigns.
  • Beim Testen und Verbessern der Barrierefreiheit helfen zum Beispiel Online-Tools und manuelle Überprüfungen durch Expert:innen.
Infografik: Das muss beim barrierefreien Webdesign beachtet werden

Infografik: Das muss beim barrierefreien Webdesign beachtet werden

Was ist mit barrierefreiem Webdesign gemeint?

Deine barrierefreie Website sollte so gestaltet sein, dass Menschen mit unterschiedlichen Behinderungen sie problemlos nutzen können. Dazu gehören unter anderem Seh- und Hörbehinderungen, motorische Einschränkungen und kognitive Beeinträchtigungen. Deine Website sollte zudem einfach zu bedienen sein, sodass auch ältere Menschen oder Menschen mit einem eingeschränkten technischen Verständnis in der Lage sind, sie ohne Probleme zu nutzen.

Rechtliche Grundlagen der Barrierefreiheit

Nach dem Gesetz zur Gleichstellung behinderter Menschen (Behindertengleichstellungsgesetz - BGG) gilt eine Website als barrierefrei, wenn sie ohne fremde Hilfe und ohne besondere Erschwernis genutzt werden kann. Dies betrifft derzeit vor allem öffentliche Webangebote des Bundes.

Für welche Unternehmen ist eine barrierefreie Website verpflichtend?

Ob eine Verpflichtung besteht, eine barrierefreie Website zu erstellen, hängt in erster Linie von der Unternehmensart und den damit einhergehenden rechtlichen Verpflichtungen ab. Hier sind einige wichtige Bereiche, in denen eine barrierefreie Website oftmals Pflicht ist:

  • Öffentliche Institutionen: In vielen Ländern ist Barrierefreiheit für öffentliche Einrichtungen wie Behörden, staatliche Bildungseinrichtungen und andere staatlich finanzierte Organisationen gesetzlich vorgeschrieben. In Deutschland ist dies zum Beispiel durch das Behindertengleichstellungsgesetz (BGG) und die Barrierefreie Informationstechnik-Verordnung (BITV 2.0) geregelt.
  • Unternehmen, die an öffentlichen Ausschreibungen teilnehmen: Unternehmen, die öffentliche Aufträge erhalten (wollen), müssen ihre Webseiten teilweise barrierefrei gestalten, um die gleichen Standards wie öffentliche Einrichtungen zu erfüllen.
  • Großunternehmen und Konzerne: In einigen Ländern - z. B. innerhalb der Europäischen Union - müssen Konzerne ihre Websites und mobilen Anwendungen barrierefrei gestalten. Dies ist Teil der EU-Richtlinie über den barrierefreien Zugang zu den Websites und mobilen Anwendungen öffentlicher Stellen (eAccessibility-Richtlinie).
  • Kleinere Unternehmen: Für kleinere Unternehmen gibt es in den meisten Bereichen keine direkten gesetzlichen Vorgaben zur Barrierefreiheit. Aus Gründen der Inklusion, der Benutzerfreundlichkeit und um ein breiteres Publikum zu erreichen, ist es jedoch empfehlenswert, barrierefreie Webdesign-Ansätze zu verfolgen. Dies solltest Du Dir insbesondere dann zu Herzen nehmen, wenn Personen aus Deiner Zielgruppe barrierefreie Elemente benötigen. 

Barrierefreiheitsgesetz (BFSG) tritt ab 2025 in Kraft

Mit dem Barrierefreiheitsstärkungsgesetz - kurz BFSG - werden neue Maßstäbe gesetzt. Ab dem 28. Juni 2025 tritt eine wichtige Änderung bezüglich der Barrierefreiheit von B2C Websites in Kraft. Doch was bedeutet das genau? Wer ist betroffen? Wir klären auf!

Was ist das BFSG?

Beim BFSG handelt es sich um die deutsche Antwort auf das europäische Gesetz zur Barrierefreiheit (European Accessibility Act). Bereits am 16. Juni 2021 verabschiedet, zielt es darauf ab, die Barrierefreiheit digitaler Produkte und Dienstleistungen zu verbessern, indem es Unternehmen verpflichtet, barrierefreie Lösungen umzusetzen.

Wer ist von dem neuen Gesetz betroffen?

Grundsätzlich betrifft das BGG eine Vielzahl von Produkten und Dienstleistungen: von Computern und Mobiltelefonen über internetfähige Fernseher und E-Book-Reader bis hin zu Verkaufsautomaten. Digitale Dienste, also auch Websites und Online Shops, stehen jedoch besonders im Fokus.

Gibt es Ausnahmen?

Die neuen Anforderungen müssen jedoch nicht von jedem digitalen Anbieter erfüllt werden. Folgende Ausnahmen gelten:

  • Private Websites (also z.B. ein privater Blog oder ähnliches) unterliegen dem Gesetz nicht. 
  • Websites und digitale Produkte, die sich ausschließlich an Geschäftskunden (B2B) richten, sind vom BFSG nicht betroffen. 
  • Ebenfalls nicht unter das BFSG fallen Kleinunternehmen, die weniger als 10 Mitarbeiter:innen beschäftigen und einen Jahresumsatz von unter 2 Millionen Euro erzielen.

Nichteinhaltung des BFSG kann ernste Konsequenzen haben

Wer das BFSG bis zum Stichtag 28. Juni 2025 nicht erfüllt, riskiert empfindliche Strafen. Die Verwaltungsstrafen können sich auf bis zu 100.000 € belaufen. Es lohnt sich also, rechtzeitig die notwendigen Anpassungen vorzunehmen. Nicht nur, um Strafen zu vermeiden, sondern auch, um die eigene Website einer breiteren Zielgruppe zugänglich zu machen.

Alle Informationen zum BFSG findest Du hier

Wann ist eine Website barrierefrei?

Eine Website ist barrierefrei, wenn sie so gestaltet ist, dass alle Menschen ungeachtet körperlicher oder technischer Einschränkungen sie problemlos nutzen können. Einige wichtige Kriterien, die eine barrierefreie Website erfüllen sollte, sind im Folgenden aufgeführt.

Zugänglichkeit für Menschen mit unterschiedlichen Behinderungen

  • Für sehbehinderte Nutzer:innen sollte die Website mit Screenreadern kompatibel sein. Sie sollte alternative Texte (s. Alt-Tag) für Bilder anbieten und eine klare, kontrastreiche Farbgestaltung haben. 
  • Für hörbehinderte Nutzer:innen sollten Videos untertitelt oder transkribiert bereitgestellt werden.
  • Für User mit motorischen Einschränkungen sollte die barrierefreie Website vollständig über die Tastatur bedienbar sein.

Verständlicher Inhalt und leichte/einfache Sprache

  • „Leichte Sprache“ ist ein Konzept, das darauf abzielt, Texte so zu gestalten, dass sie für Menschen mit Leseschwierigkeiten oder Sprachbarrieren (z. B. auch Menschen, die keine Muttersprachler:innen sind) leichter verständlich sind.
  • Die Sprache, die auf der Website verwendet wird, sollte dabei klar und einfach sein. Verzichte auf lange, verschachtelte Sätze, nutze eine aktive Sprache und vermeide Fachjargon. 
  • Du kannst die leicht verständlichen Inhalte Deiner Website auch so zur Verfügung stellen, dass diese mit einem Klick auf „leichte Sprache“ aufrufbar sind.  
  • Erfahre mehr zum Thema Einfache Sprache im Lexikonbeitrag.

Responsives Webdesign

  • Deine Website sollte auf verschiedenen Geräten funktionieren. Dazu gehören Smartphones, Tablets und Desktop-Computer (s. hierzu auch unseren Beitrag zu den Themen mobile Endgeräte und mobile first)
  • Nutzer:innen sollte es ermöglicht werden, die Textgröße auf Deiner Website zu ändern. Dabei sollte die Funktionalität der Website nicht beeinträchtigt werden.
  • Deine Website sollte mit einer Vielzahl von Browsern (z. B. Google Chrome, Microsoft Edge, Firefox etc.) und unterstützenden Technologien (Screenreader etc.) kompatibel sein.

Feedback und Unterstützung

  • Um die Nutzung Deiner Website zu erleichtern, solltest Du klare Anleitungen und Unterstützung in Form von Infografiken, FAQ, Chats, Kontaktformularen und ähnlichem zur Verfügung stellen. 
  • Nutzer:innen sollten Kontakt zu Dir aufnehmen können, um auf Probleme mit der Barrierefreiheit aufmerksam machen zu können. So kannst Du Deine barrierefreie Website mit hilfreichem Nutzerfeedback stetig verbessern. 

Beachte: Barrierefreiheit ist ein sich wandelnder Prozess. Technologien und Userbedürfnisse entwickeln sich ständig weiter. Du solltest daher regelmäßig überprüfen, ob Deine Website diesen sich ändernden Anforderungen gerecht wird. Auch bei der Planung und Entwicklung einer Website ist es wichtig, von Anfang an barrierefreie Praktiken zu berücksichtigen.

Unsere Checkliste für barrierefreies Webdesign

Überprüfe mit unserer Checkliste für die digitale Barrierefreiheit, ob Deine Website die BFSG Anforderungen erfüllt. Trage hierzu Deine Daten in das Formular ein und erhalte die Checkliste und nützliche Tipps zur Umsetzung direkt per Mail. Die Barrierefreiheit-Checkliste ist in die Bereiche HTML, Farben & Kontraste, Verlinkungen, Seitentitel, Überschriften, Tabellen, Grafiken & Bilder und Sprache aufgeteilt. 

Dein Vorname
Deine E-Mail-Adresse

Wie kann ich überprüfen, ob meine Website barrierefrei ist?

Um zu überprüfen, ob eine Website barrierefrei ist, kannst Du folgende Tools nutzen:

  • WAVE (Web Accessibility Evaluation Tool): Scannt Deine Website systematisch und zeigt Anmerkungen zur Verbesserung der Barrierefreiheit an, die Du direkt umsetzen kannst. 
  • Barrierefreiheit Test von Experte.de: Testet 41 Merkmale in 8 Kategorien der Barrierefreiheit (z.B. Kontraste, Navigation, Alternativtexte). 
  • Pagespeed Insights von Google: Überprüft die Geschwindigkeit Deiner Webseiten auf allen Endgeräten.
  • Manuell überprüfen: Einige Zugänglichkeitsprobleme kannst Du durch eine manuelle Überprüfung feststellen (Website nur mit der Tastatur zu navigieren, die Website mit verschiedenen Screenreadern zu testen etc.)
  • Einholen von Feedback von Nutzer:innen: Da sie die Website aus ihrer eigenen Perspektive erleben, können Dir Nutzer:innen mit Einschränkungen wertvolles Feedback geben (z.B. durch Befragungen, Tests oder Interviews).
  • Konsultation von Expert:innen: Die Konsultation von Expert:innen für Barrierefreiheit ist besonders hilfreich. Sie können eine detaillierte Analyse durchführen und Verbesserungsvorschläge machen.

Barrierefreies Webdesign: Welche Nutzer:innen profitieren?

Eine barrierefrei zugängliche Website kommt vielen Internetusern zugute, nicht nur Menschen mit Behinderungen. Hier sind einige Personengruppen, für die eine barrierefreie Website von Vorteil ist:

  • Menschen mit Behinderungen: Dazu gehören Nutzer:innen mit Sehbehinderungen, die Screenreader verwenden, Menschen mit Hörbehinderungen, die auf Untertitel angewiesen sind, Menschen mit motorischen Beeinträchtigungen, die alternative Eingabemethoden benötigen, und Menschen mit kognitiven Beeinträchtigungen, die von einer klaren und einfachen Webstruktur profitieren.
  • Ältere Nutzer:innen: Mit zunehmendem Alter können Herausforderungen bei der Internetnutzung auftauchen: Die Sehkraft lässt nach, die Motorik ist eventuell eingeschränkt und das Hörvermögen nimmt ab. Ein barrierefreies Webdesign erleichtert älteren Menschen die Navigation und die Interaktion mit Deiner Website.
  • Vorübergehende Einschränkungen: Wer beispielsweise eine vorübergehende Handverletzung und somit Schwierigkeiten mit der Maus hat, profitiert von einer Website, die vollständig über die Tastatur bedient wird.
  • Nutzungskontexte: Untertitel bei Videos sind hilfreich, wenn sich eine Person in einer lauten Umgebung befindet und keine Kopfhörer verwenden kann. Untertitel sind auch hilfreich, wenn sich jemand in einer Umgebung befindet, in der Ruhe gefordert ist (z.B. Ruhebereich im Zug, Bibliothek, Krankenhaus etc.).
  • Langsame Internetverbindung: Barrierefreie Webseiten haben oft auch eine bessere Struktur und optimierte Inhalte, wodurch ein schnelleres Laden auf Geräten mit einer langsameren Verbindung möglich ist. Lies Dir hierzu auch unseren Beitrag über Bildoptimierung durch!
  • Suchmaschinen: Eine barrierefreie Webseite ist in der Regel suchmaschinenfreundlicher, da sie klare Strukturen, aussagekräftige Überschriften (s. Headline Struktur) und Alternativtexte für Bilder bietet. Diese Praktiken können Deine Rankings und Deinen Sichtbarkeitsindex bei Google und Co. erheblich verbessern. 

Kurz gesagt: Barrierefreies Webdesign verbessert die Nutzererfahrung für alle. Es macht das Internet insgesamt zugänglicher und inklusiver.

Fazit – bedenke die Barrierefreiheit!

Barrierefreies Webdesign ist ein wichtiger Bestandteil moderner Webentwicklung. Dabei geht es nicht nur um die Erfüllung gesetzlicher Vorgaben. Es geht auch darum, Inklusion und Barrierefreiheit im digitalen Raum zu fördern. Durch die Umsetzung von barrierefreiem Design stellst Du sicher, dass Dein Content für ein breites Spektrum von Nutzer:innen zugänglich ist, einschließlich Menschen mit Behinderungen, älterer Nutzer:innen, Menschen mit vorübergehenden Einschränkungen und Menschen in besonderen Nutzungskontexten.

Barrierefreies Webdesign hat nicht nur soziale und ethische Aspekte. Es bietet auch praktische Vorteile. Es verbessert die Nutzererfahrung für alle Besucher:innen der Webseite. Es erhöht die Reichweite und Sichtbarkeit im Internet und kann zur Suchmaschinenoptimierung beitragen. 

Du möchtest eine barrierefreie Website erstellen lassen? Kontaktiere uns gerne! Wir sind Deine Webdesign Agentur für anziehende Websites, die gefunden werden.

Weitere Webdesign und SEO Themen, die Dich interessieren könnten

In unserem Ratgeber und Lexikon teilen wir unser Wissen mit Dir. In unserem Online Marketing Podcast veröffentlichen wir zudem regelmäßig Tipps und Tricks zu aktuellen Themen aus erster Hand. 

Autoren-Infos

Ich bin Christopher, Senior Expert Design und Ausbilder bei den digitallotsen.

Meine Spezialgebiete sind Webdesign, Illustration und Design.

>