Barrierefreie Websites: So machst du deine Seite fit

Das Internet ist für viele ein wichtiger Dreh- und Angelpunkt im Alltag geworden, daher sollte es auch für alle barrierefrei zugänglich sein. Aber was bedeutet „Barrierefreiheit“ eigentlich im Zusammenhang mit Webseiten? Und warum ist es so wichtig, dass deine Webseite nicht nur schick aussieht, sondern auch von Menschen mit Handicaps genutzt werden kann?

In diesem Artikel bekommst du alle wichtigen Infos zum Thema barrierefreie Websites. Im Anschluss weißt du genau, worauf du achten musst und mit welchen praktischen Schritten du am besten beginnst, deine Webseite barrierefreier zu gestalten.

Warum Barrierefreiheit für alle wichtig ist?

Stell dir vor, du gehst in ein Restaurant, aber die Tür ist zu schmal für deinen Rollstuhl. Unangenehm, oder? Ähnlich fühlen sich Menschen mit Behinderungen, wenn sie auf eine nicht barrierefreie Webseite stoßen.

Barrierefreiheit im Web bedeutet, dass alle Menschen, unabhängig von ihren körperlichen oder geistigen Fähigkeiten, uneingeschränkt und ohne Unterstützung auf Inhalte zugreifen können.

Und jetzt kommt das Tolle: Barrierefreiheit ist nicht nur gut für deine BesucherInnen, sondern auch für dein SEO! Suchmaschinen lieben klare Strukturen und verständliche Inhalte – genau das, was auch für die barrierefreie Gestaltung von Webseiten wichtig ist.

Was ist der European Accessibility Act (EAA), das Barrierefreiheitsstärkungsgesetz (BFSG) bzw. das Barrierefreiheitsgesetz (BFG)?

Der European Accessibility Act gilt europaweit. Jedes Land ist verpflichtet diesen in nationales Recht umzusetzen. In Deutschland , ist das Barrierefreiheitsstärkungsgesetz die nationale Umsetzung des EAA in nationales Recht für Deutschland. In Österreich wird der EAA im Barrierefreiheitsgesetz national festgelegt. Inhaltlich gibt es keine wesentlichen Unterschiede.

Ab wann und wofür gilt die Verpflichtung zur Barrierefreiheit?

Die Gesetze zur Barrierefreiheit in Europa treten Ende Juni 2025 in Kraft. Es gibt für Webseiten keine Übergangsfrist. Betroffen sind u.a. alle neu erstellten Webseiten, aber auch Webseiten die ergänzt oder geändert werden.

Ausgenommen ist deine Webseite also eigentlich nur, wenn du sie (inklusive des Inhaltes) nicht aktualisierst. Aber seien wir mal ehrlich, das ist für eine normale Webseite echt unwahrscheinlich.

Ausschlaggebend ist für die Gültigkeit der EAA, dass Dienstleistungen oder Produkte innerhalb der Europäischen Union verkauft werden.

Hier einige Beispiele:

• Verkauf von Produkten oder Dienstleistungen in der EU
• Erbringung professioneller Dienstleistungen (Ärzte, Rechtsanwälte, Finanzberater, Immobilienberater)
• Anbieter von Unterhaltungs- und Mediendiensten

Gehört deine Webseite dazu? Vermutlich…

Die wichtigsten Punkte, die beachtet werden müssen

• Wahrnehmbarkeit
  Hierzu gehören die Alternativtexte von Bildern, Untertitel und Audio Transkripte sowie Kontrast und Lesbarkeit.
  
  
• Bedienbarkeit
  Die Tastatur-Navigation, zeitgesteuerte Inhalte sollten gesteuert werden können (um Verwirrung zu vermeiden) und Navigationshilfen wie Breadcrumb-Navigation fallen in diesen Bereich.
  
  
• Verständlichkeit
  Texte sollen in einfacher Sprache verfasst und die Bedienung soll vorhersehbar sein. Eingabehilfen wie Autovervollständigung bzw. klare Fehlermeldungen bei Formularen gehören in diesen Bereich.
  
  
• Robustheit
  Webseiten sollen so gestaltet sein, dass sie mit unterschiedlichen Browsern genutzt werden können und mit Assistenztechnologie (z.B. Eingabehilfen oder Screenreader) kompatibel sind.
  
  
• Technische Anforderungen
  Hier gibt es seitens der Page Builder schon ganz viele Dinge, die automatisch berücksichtigt werden.
  
  
• Prozessanforderungen
  Es soll eine regelmäßige Überprüfung auf Barrierefreiheit erfolgen, Barrieren müssen gemeldet werden können (z.B. über Formular oder spezielle E-Mailadresse), Verantwortliche sollen sensibilisiert und geschult werden.

Außerdem sind Dokumentation und Transparenz wichtig: Die Bemühungen zur Barrierefreiheit können z.B. durch eine Erklärung zur Barrierefreiheit auf der Webseite transparent gemacht werden.  

Welche Folgen sind bei Nichteinhaltung zu erwarten?

Wie der European Accessibility Act (EAA) durchgesetzt werden wird ist noch nicht  ganz klar. Über die Sanktionen bei Verstoß entscheidet das jeweilige EU Mitgliedsland selbst. Es wird von Verwarnungen, über Strafen (bis zu 80.000 Euro), den Entzug von Förderungen bis zur Einstellung einer Webseite wohl verschiedene Folgen geben.

Ausnahme Kleinstunternehmen – gilt sie auch für dich?

Nach den harten Fakten nun die „gute Nachricht“. Da für kleinere Unternehmen die Umstellung hohen Aufwand bedeutet, gilt hier die Ausnahme für sogenannte Kleinstunternehmen.

Als Kleinstunternehmen werden Unternehmen definiert, die weniger als 10 Mitarbeiter haben und deren Jahresumsatz 2 Millionen Euro nicht überschreitet.

Na? Bist du nun entspannter? 😀 Trotzdem empfehle ich dir, dich möglichst früh mit dem Thema Barrierefreiheit zu beschäftigen. Zum ersten möchtest du wahrscheinlich wachsen und die Grenzen werden meines Erachtens im Laufe der Zeit sinken. Zweitens hat es auch viele Vorteile barrierefrei online zu sein!

Deine Vorteile, wenn du deine Webseite barrierefrei gestaltest

• Bessere Userexperience (Nutzererlebnis)
  BesucherInnen auf deiner Webseite sollen sich wohl fühlen, gut zurecht finden und positive Erfahrungen haben – Barrierefreiheit fördert dies!
  
  Ein spannender Fun Fact, den ich letztens in einem Webinar mit Mina Nabinger, erfahren habe: 88% würden teurer auf einer barrierefreien Webseite Produkte oder Dienstleistungen kaufen, als auf einer nicht barrierefreien Webseite. Cool, oder?
  
  
• Größere Reichweite
  Barrierefreie Webseiten haben 3-4 Mal größere Reichweite. Das kommt daher, dass Personen mit Behinderung gerne weiter teilen, wenn sie gute Erfahrungen im Web machen.
  
  
• Mehr Kundenzufriedenheit und Loyalität
  Kunden die mit unseren Werten konform gehen, entwickeln mehr Bindung zu uns. Gibt es etwas besseres als das Gefühl der Bestätigung, dass Menschen uns wichtig sind und wir ihre Werte vertreten?
  
  
• Innovationsförderung
  Wusstest du, dass die Schreibmaschine, aus der sich unser heutiges Keyboard entwickelt hat, ursprünglich für eine Person mit Behinderung entwickelt wurde?
  
  
• Bessere Webseiten-Ladezeit
  Barrierefreier Code ist sauberer Code, dies hat wiederum positive Auswirkungen auf die Ladezeit deiner Webseite und somit auf dein SEO (Suchmaschinenoptimierung).

Technische Grundlagen der Barrierefreiheit – die WCAG-Richtlinien

Jetzt wird’s technisch, aber keine Sorge, ich nehme dich an die Hand, wie immer, wenn es um die Technik geht. 😉

Die Web Content Accessibility Guidelines (WCAG) sind die Bibel der Barrierefreiheit im Web. Sie bieten klare Richtlinien, die von der Textgröße über die Farbkontraste bis hin zur Strukturierung von Inhalten reichen.

Es gibt drei Stufen: A, AA und AAA – je höher, desto besser. Für die meisten Webseiten reicht es aus, AA-Konformität anzustreben.

A ist grundlegend, AA ist der globale Standard und die Stufe AAA ist für spezielle Software, also nicht wirklich für Webseiten. Die Stufe AA hat 50 Erfolgskriterien (alle der Stufe A plus die der Stufe AA).

Ein Beispiel:

Unter 1.2.2. Untertitel (Level A) ist festgelegt, dass Videos Untertitel haben sollen, damit auch gehörlose Menschen die Inhalte erfassen können.

7 praktische Tipps zu mehr Barrierefreiheit

Jetzt geht’s los! Unabhängig davon, ob du rechtlich verpflichtet bist, finde ich es wichtig, dass du deine Webseite möglichst nach und nach barrierefreie für die BesucherInnen gestaltest. Daher empfehle ich dir kleine Dinge zu beachten und umzusetzen, einfach Schritt für Schritt.

Hier sind einige Tipps, mit denen du deine Webseite zugänglicher machen kannst:

1. Strukturierte Inhalte
   Nutze Überschriften (H1, H2, H3) und strukturiere sie „richtig“ und sinnvoll. Also z.B. nur eine H1 Überschrift je Seite. Strukturen helfen nicht nur Suchmaschinen, sondern auch Nutzern, die auf Screenreader angewiesen sind, den Inhalt deiner Seite besser zu erfassen. Listen und Absätze sorgen für eine klare Gliederung.
   
   
2. Alt-Texte für Bilder
   Bilder ohne Alternativtext sind wie leere Bilderrahmen. Ein Alt-Text beschreibt den Inhalt des Bildes für blinde oder sehbehinderte BesucherInnen. Beschreibe, was auf dem Bild zu sehen ist, und warum es wichtig ist.
   
   
3. Tastaturnavigation ermöglichen
   Nicht jeder benutzt eine Maus. Sorge dafür, dass alle interaktiven Elemente wie Links und Formulare mit der Tastatur bedient werden können.
   Hast du schon mal versucht, deine Webseite nur mit der Tastatur zu bedienen? Probiere es aus und erzähl mir in den Kommentaren von deinen Erfahrungen!
   
   
4. Kontrastverhältnisse verbessern
   Dein schickes Farbschema könnte für Menschen mit Sehbehinderungen eine echte Herausforderung sein. Verwende ein Tool wie den Contrast Checker, um sicherzustellen, dass dein Text gut lesbar ist.
   
   Faustregel: Dunkler Text auf hellem Hintergrund ist immer eine gute Wahl.
   
   
5. Barrierefreie Formulare
   Formulare sind oft die Stolpersteine auf Webseiten. Achte darauf, dass alle Felder klar beschriftet sind und Fehlermeldungen verständlich formuliert werden. Vermeide es, rein visuelle Hinweise zu verwenden – nicht jeder kann sie sehen.
   
   
6. Responsive Design
   Achte darauf, dass deine Webseite auf unterschiedlichen „Devices“ (z.B. Desktop und Mobiltelefon) gut dargestellt wird, dass die Schriftgröße gut zu lesen ist und dass Buttons leicht getippt werden können bzw. ausreichende Größe und Distanz zu anderen Elementen haben.
   
   
7. Breadcrumb-Navigation
   Nutze auf deiner Webseite sogenannte Breadcrumbs und erleichtere so BesucherInnen zu erkennen, wo sich sich gerade befinden. Hier findest du Tipps zur Verwendung der Breadcrumb-Navigation

Am besten suchst du dir einen Punkt aus und setzt diesen auf deiner Webseite um. Im nächsten Schritt den nächsten Punkt usw. So wird deine Webseite bis 2025 fast von alleine immer barrierefreier.

3 Tool -Tipps für dich

Zum Glück musst du das Rad nicht neu erfinden. Es gibt jede Menge Tools, die dir helfen, deine Seite barrierefrei zu machen bzw. zu überprüfen:

• WAVE (Web Accessibility Evaluation Tool): Eine Browser-Erweiterung, die dir zeigt, wo noch Nachholbedarf besteht.
• Contrast Checker: Prüft, ob deine Farbkombinationen den WCAG-Standards entsprechen.
• AI Alt Text Generator: Hier kannst du ein Bild hochladen und die KI erstellt dir einen Alt Text

Zum Nachlesen und weiterführende Links

Fazit

Barrierefreiheit im Web ist keine Raketenwissenschaft – es ist einfach eine Frage der Rücksichtnahme und ein bisschen technisches Know-how. Und denk daran: Wenn deine Seite barrierefrei(er) ist, profitieren nicht nur Menschen mit Behinderungen, sondern auch Suchmaschinen und letztlich deine Reichweite. Also, leg los und mach deine Webseite fit für alle BesucherInnen!

Deine