Barrierefreie Webseiten: der große Leitfaden 

Infos & Maßnahmen für barrierefreie Websites

Barrierefreiheit ist derzeit in aller Munde – und zwar nicht nur die unangeschränkte Mobilität im öffentlichen Raum. Vielmehr hat sich das Thema auch auf die digitale Welt ausgebreitet. Alle Menschen sollen Teilhabe am World Wide Web haben können. 

Daher ist seit Juni 2025 das Barrierefreiheitsstärkungsgesetz (BFSG) in Kraft getreten – auch in Österreich. 

Hier zeigen wir dir, was das Gesetz besagt, wer betroffen ist, wie du prüfen kannst, ob deine Webseite barrierefrei ist und welchen Zusammenhang es zwischen Barrierefreiheit und Suchmaschinenoptimierung (SEO) gibt.

Was sind barrierefreie Webseiten?

Barrierefrei heißt: zugänglich für alle. Und das ohne jedwede Begrenzungen oder Einschränkungen.

Deine Website muss also für wirklich jeden Benutzer zugänglich und verständlich sein, eine gezielte und sinnvolle Interaktion mit der Website muss für jeden Menschen – mit oder ohne Behinderung – möglich sein. 

Wer ist von dem Gesetz (nicht) betroffen?

Das Gesetz besagt, dass Produkte, Dienstleistungen und Webseiten in Österreich und anderen Ländern barrierefrei sein müssen. Betroffen sind u.a. Hardware und Software, Bankdienstleistungen, der Online-Handel, Dienstleistungserbringer und Hersteller, Importeure sowie Händler.

Hier einige konkrete Beispiele für betroffene Produkte/Dienstleistungen:

  • Handys, Laptops, Tablets
  • Fernseher mit Zugang zum Internet
  • Geldautomaten
  • Router
  • E-Book-Reader
  • Ticketautomaten
  • Telefon- und Messenger-Dienstleistungen
  • Personenverkehr
  • Dienstleistungen im elektronischen Geschäftsverkehr
  • Webshops & viele Websites
  • Kontaktformulare
  • Masken für die Terminbuchung
Hanfd auf einer Computermaus

Nicht betroffen sind Webseiten von:

  • Kleinunternehmen, sofern sie weniger als 10 Mitarbeiter beschäftigen und der Jahresumsatz max. 2 Mio. Euro beträgt
  • Produkte, die schon vor dem 28.06.2025 auf dem Markt waren
  • Private Angebote
  • B2B-Angebote (rein geschäftliche Angebote)

Barrierefreiheit betrifft mehr Menschen, als man denkt

Bei dem Wort Barrierefreiheit denken die meisten zuerst an eingeschränkte Mobilität. Also z. B. an Menschen, die im Rollstuhl sitzen. Verlagert man dieses Thema in die digitale Welt, kommen einem als Erstes sehbeeinträchtigte oder blinde Menschen in den Sinn. 

In Bezug auf Webseiten bezieht es sich aber auf viel mehr Unterbereiche:

  • andere Aspekte des Sehens: Farbenblindheit, Rot-Grün-Schwäche, verletztes Auge
  • das Hören: Taubheit oder sonstige akustische Beeinträchtigung
  • das Verstehen: Schnelligkeit, mit der man etwas verarbeiten kann, Lernschwierigkeiten, Legasthenie, Nicht-Muttersprachler
  • die Motorik: fehlende, aber auch gebrochene Körperteile, andere Einschränkungen der Motorik (z. B. auch große Finger oder zittrige Hände), Lähmungen
  • Vorerkrankungen: Epilepsie (Sensitivität auf blitzende oder flackernde Lichter/Animationen)
  • Technische Probleme: auch kaputte Lautsprecher machen Untertitel bei Videos notwendig, ältere Browser können ohne Barrierefreiheit zu Problemen führen  

Barrierefreiheit ist also ein umfangreicheres Thema, als man zunächst vielleicht annimmt. 

Und: Barrierefreiheit betrifft mehr Menschen, als man zunächst glaubt. Barrierefreiheit ist nicht nur für Menschen mit dauerhaften Beeinträchtigungen oder Behinderungen gedacht – sondern auch für 

  • Menschen mit temporären Einschränkungen (entzündetes Auge, gebrochener Arm, etc.)
  • Senioren
  • Nicht-Muttersprachler

Digitale Barrierefreiheit sorgt also insgesamt für mehr Inklusion.

image 7

Digitale Barrierefreiheit hat das Ziel, mehr Inklusion zu schaffen und Menschen nicht aufgrund ihrer Behinderung auszuschließen.

Warum ist Barrierefreiheit bei Websites noch wichtig?

Unternehmen, die auf einen barrierefreien Internetauftritt setzen, sind nicht nur rechtlich auf der sicheren Seite und machen ihr Angebot allen zugänglich. Sie gewinnen auch weitere Vorteile:

  • Neue Kunden
    Menschen, die zuvor nicht mit deiner Website interagieren konnten, können dir nun Anfragen senden oder deine Produkte kaufen.
  • Besseres Image
    Du zeigst, dass dir Inklusion und die Teilhabe aller wichtig sind. Das trägt zu einem positiven Image bei, besonders da Inklusion immer wichtiger wird.  
  • SEO-Boost & bessere User Experience (UX)
    U. a. eine einfache Navigation, klare Strukturen und eine korrekte Überschriftenstruktur fallen gleich in drei Bereiche: Sie sind beim Thema Barrierefreiheit wichtig und gleichzeitig auch für SEO und die UX. So boostest du durch barrierefreie Websites gleich auch deine Sichtbarkeit.

Gesetze zur Online-Barrierefreiheit in Österreich

Generell gelten die Web Content Accessibility Guidelines (WCAG). Das sind weltweit geltenden Standards, nach denen sich Webdesigner, Redakteure & Co. richten sollten.

Seit dem 28.06.2025 sind barrierefreie Webseiten nun nicht mehr nur ein Standard, nach dem man sich richten sollte, sondern endgültig Pflicht – und das nicht nur für Menschen, die in Österreich leben.

Seiten müssen mindestens die AA-Kriterien einhalten – noch besser ist es, wenn deine Website AAA-Kriterien erfüllt.

Die Erfüllung der AA-Kriterien zahlt auf 4 Ziele ein:

  1. Wahrnehmbarkeit: Informationen & Website-Elemente müssen wahrgenommen werden können.
  2. Bedienbarkeit: Alle Elemente und die Seite an sich müssen bedient werden können.
  3. Verständlichkeit: Deine Website & deren Inhalte müssen einfach zu verstehen sein.
  4. Robustheit: Auch Hilfsmittel (z. B. Screenreader) müssen deine Seite korrekt lesen können.

Die genauen Kriterien, die deine Website seit dem 28.06.2025 erfüllen muss, findest du bei der Web Accessibility Initiative (WAI).

Ein Mann tippt auf seinem Computer an einem Arbeitstisch

Selbsttest: So prüfst du, ob deine Website barrierefrei ist

Woher weißt du, ob deine Website barrierefrei ist?

Zuallererst kannst du einen Selbsttest machen. Dazu versetzt du dich in eine Person mit wie auch immer gelagerten Einschränkungen hinein. 

Dann schaust du dir deine Webseite aus dieser Perspektive an. Dabei kannst du auch unsere weiter unten aufgeführte Checkliste nutzen.

Schreib dir dabei alle Punkte auf, bei denen Optimierungsbedarf besteht.

Hier ein paar Punkte zur Inspiration, was du testen kannst:

  • Sind komplizierte Produkte verständlich erklärt?
  • Kannst du mit einem Screenreader auf der Seite herausfinden, wie seriös dein Unternehmen ist?
  • Schaffst du es mittels Screenreader das Kontaktformular auszufüllen?
  • Kannst du dich nur mit der Tastatur in das Kundenportal/-konto einloggen?
  • Liest dir der Screenreader Texte, Videos und Alt-Tags von Bildern korrekt vor? 

Außerdem kann dir diese Liste dabei helfen, deine Website auf Barrierefreiheit zu prüfen:

1. Eindeutigkeit

Sind alle Elemente eindeutig benannt? Weiß man, was gemeint ist und wo man mit einem Klick hinkommt? 

Das gilt für:

  • das Menü & den Footer
  • alle Buttons
  • Formulare & deren Eingabefelder
  • Bilder
  • Überschriften

2. Verständlichkeit

Sind Informationen einerseits leicht zu finden und andererseits gut zu verstehen? Handelt jede Unterseite wirklich nur von einem Thema oder werden auf manchen Seiten mehrere Themen besprochen?

Das gilt für:

  • Sprache: Ist sie leicht verständlich?
  • Aufbau: Sind Texte strukturiert & erkennt man Elemente, die man anklickt?
  • Elemente: Sind Buttons, Icons & Co. eindeutig? Kann man sie gut erkennen?
  • Struktur: Ist die Webseite logisch strukturiert? Weiß man, was man wo findet?

3. Bedienung

Kannst du deine gesamte Internetseite nur mit der Tastatur bedienen? Dazu zählen die Navigation, Buttons, Cookie Banner, der Footer, Formulare etc.

Tasten, die dafür verwendet werden, sind:

  • Tabulator (Vorwärts)
  • Umschalt/Shift + Tabulator (Rückwärts)
  • Enter
  • Pfeile
  • Leertaste

4. Darstellung

Gibt es unterstrichene Textstellen, die aber kein Link sind? Solche Elemente solltest du entfernen, da sie die User verwirren können.

Hast du Rot-Grün-Kombinationen auf deiner Seite? Diese solltest du beseitigen, da deine Inhalte dann für Menschen mit Rot-Grün-Sehschwäche nicht barrierefrei sind.

Gibt es irgendwo Stellen, an denen man den Text nicht gut lesen kann, z. B. weil der Hintergrund zu wenig Kontrast aufweist?

Auch die Frage, ob die Schrift groß genug ist (mind. 14 Pixel) und vergrößert werden kann, fällt in diesen Bereich.

5. Mehrere Kanäle

Sind Bilder, Videos und Audiodateien über mehr als einen Kanal wahrnehmbar? Prüfe deine Seite auf diese Punkte:

  • Sind Bilder auch textlich verständlich (haben sie einen Alt-Tag)?
  • Sind Videos auch in verschriftlichter Form vorhanden (Untertitel in den Videos)?
  • Gibt es zu Audiodateien ein Transkript?

Bildunterschrift: Bei der digitalen Barrierefreiheit gibt es viele Faktoren zu bedenken. Wenn du jedoch deine Perspektive änderst, ist es gar nicht so schwer, nachzuvollziehen, welche Maßnahmen notwendig sind und warum. 

Tools: So prüfst du, ob deine Website barrierefrei ist

Dir reicht das nicht? Dann kannst du auch unterschiedliche Tools verwenden, um deine Website auf Zugänglichkeit (Accessibility) zu prüfen:

  • Lighthouse
    Viele unterschiedliche Tests möglich; ist in die Chrome Developer Tools integriert & fester Bestandteil von Google Chrome.
  • WAVE
    Prüft die Accessibility insgesamt. Als Online-Tool und als Chrome-Erweiterung verfügbar.
  • BITV-Test

Basiert auf den Web Content Accessibility Guidelines (WCAG) und beinhaltet 60 Prüfschritte.

  • Siteimprove
    Website wird ebenfalls nach WCAG geprüft, die Ergebnisse bekommst du per Mail.
  • LanguageTool
    Prüft, ob deine Seite einfache Sprache verwendet.
  • Color-Contrast-Analyser
    Prüft Farbkontraste
  • NVDA
    Prüft die Kompatibilität mit Screenreadern. 

Mit welchen Hilfsmitteln muss meine Website funktionieren?

Bisher haben wir schon über “Hilfsmittel” geredet, für die Websites zugänglich sein müssen. Doch welche sind das genau? Hier findest du eine Auflistung:

  • Screenreader (akustische Darstellung):
    Sie werden von Menschen mit eingeschränkten Sehfähigkeiten genutzt und lesen ihnen die Inhalte vor. Dazu zählen neben Texten auch Grafiken, Call-to-Action-Buttons und Bilder. Sie erkennen aber auch Links und machen es blinden Menschen möglich, Formulare auszufüllen.
  • Braille-Zeilen (taktile Darstellung):

Sie sind für blinde Menschen eine Alternative zum Screenreader. Inhalte werden mithilfe einer Lochmasken-Schiene in Braille-Schrift wiedergegeben.

  • Tastatursteuerung
    Es gibt viele spezielle Tastaturen, die für unterschiedliche Bedürfnisse gemacht sind (Bedienung mit dem Kopf, einhändige Bedienung, sehr große/kleine Tasten etc.). Auch diese müssen deine Seite richtig lesen können.
  • Spracheingabe
    Computer können aber auch mittels Spracherkennung bedient werden. Die Ermöglichung dessen ist ebenfalls Teil der Barrierefreiheit.
  • Software für Vergrößerungen
    Damit wird das Computerbild auf die benötigte Größe skaliert.
image 8 e1755008273929

Wichtig ist: Damit zum Beispiel Screenreader deine Seite lesen können, muss diese so programmiert sein, dass die Struktur und die Inhalte für diese Geräte eindeutig erkennbar sind.

Was ist, wenn deine Website in Zukunft nicht barrierefrei ist?

Für die Überprüfung der Barrierefreiheit wird mit dem 28.06.2025 eine Marktüberwachungsbehörde gegründet. Diese prüft Webseiten auf ihre Barrierefreiheit und nimmt Mahnungen und Abstrafungen vor.

Nicht barrierefreie Websites können mit Bußgeldern in Höhe von bis zu 80.000 Euro konfrontiert werden.

In der EU ist sogar eine Sperrung der Website möglich. 

Checkliste & Tipps für die barrierefreie Website-Gestaltung

Du willst nun einen barrierefreien Zugang zu deiner Website und den dort vorhandenen Informationen möglich machen?

Dann findest du hier unsere Checkliste für mehr Barrierefreiheit bei digitalen Inhalten:

  • Kontraste:
    Achte auf ausreichend große Kontraste zwischen Vordergrund und Hintergrund.
  • Überschriftenstruktur
    Diese sollte eine logische Reihenfolge aufweisen & Überschriften sollten als solche gekennzeichnet sein (nicht nur gefettet). Es gilt: Jeder Text sollte nur eine Hauptüberschrift haben (H1), danach folgen Unterüberschriften (H2-H6).
  • Responsives Design
    Websites müssen auch mobil einwandfrei funktionieren. Prüfe daher immer auch die Mobilversion deiner Webseite und passe ggf. Elemente an.
  • Anderssprachige Begriffe kennzeichnen
    Nutzt du Anglizismen? Um für Screenreader einen barrierefreien Zugang zu ermöglichen, musst du diese im HTML-Code als englischsprachige Begriffe auszeichnen (außer Wörter, die schon fest in unserem Sprachgebrauch verankert sind, wie Social Media). Sind diese nicht ausgezeichnet, spricht der Screenreader die Begriffe nicht richtig aus.
  • ALT Tags
    Prüfe, ob alle Bilder, Logos, Icons, Social-Media-Elemente & Videos Alt-Tags haben.
  • Verständliche Sätze
    Versteht man bei jedem Satz, was du meinst? Oder muss man als User 3x überlegen?
  • HTML-Code

Nicht nur Überschriften sollten im HTML-Code als solche gekennzeichnet sein, sondern auch Abkürzungen. Das HTML-Element dafür ist <abbr>.

Hier noch einige weitere Tipps für einen barrierefreien Zugriff auf deine Homepage:

BereichTipps
SpracheKeine Schachtelsätze, Möglichst keine Fremdworte oder Anglizismen (falls doch, sollten diese auch im HTML Code als solche ausgewiesen sein), Fremdwörter erklären oder weglassen
AufbauTexte durch Überschriften strukturierenElemente, auf die man gerade klickt, hervorhebenSinnvolle Klickreihenfolgen (z. B. von links oben nach rechts unten)
ElementeVerwirrende Elemente entfernenElemente nicht zu klein machenGenug Abstand zwischen einzelnen Elementen lassen
Navigationsollte leicht zu verstehen seineine Navigation nur mit der Tastatur muss möglich sein

Tipp: Gehe von groß zu klein. Das heißt: Nimm erst die Dinge in Angriff, die direkt auf vielen Seiten Verbesserungen herbeiführen.Deine Textgröße ist auf allen Unterseiten zu klein? Dann pass diese in den globalen Einstellungen an und schon ist sie auf allen Unterseiten angepasst. Dein Logo hat keinen Alt-Tag, kommt aber auf vielen Seiten vor? Dann nimm das mit als Erstes in Angriff. Und so weiter.

Ältere Person bedient Computer und deutet auf ein Bild auf dem Bildschirm

Um sich im digitalen Raum zurechtzufinden, benötigt es eine Menge von Fähigkeiten – Sehen, Hören, Feinmotorik, u. v. m. 

Praxisnahe Beispiele

Um dir nun noch zu zeigen, wie sich nicht vorhandene Barrierefreiheit auf Leser auswirken kann, haben wir hier ein paar praxisnahe Beispiele von nicht-barrierefreien vs. barrierefreien Webseiten für dich:

1. Verständlichkeit

“Das Haus, das ich gekauft habe und das in Salzburg liegt, hat durchaus eine schöne Farbe, auch wenn es – unter Umständen – in den nächsten Jahren, aber dann von einem Profi, einen neuen Anstrich gebrauchen könnte.”

Dieser Satz löst Schachtelsatz-Alarm aus. Und mal ehrlich: Er ist auch für Muttersprachler schwer zu verstehen. Vermeide daher solche Formulierungen. Die Leserlichkeit wird es dir danken.

2. Kontraste

image
image 1

Du siehst: Im unteren Bild ist die Schrift viel besser zu lesen. Somit kann auch der Inhalt schneller erfasst werden – und das nicht nur von Menschen mit einer Sehbeeinträchtigung.

3. Elemente


image 2
image 3

Auf dem unteren Bild herrscht Chaos: Hier ist der Button zu klein und die beiden Elemente (Button und Video) liegen viel zu nah aneinander, sodass User sich leicht vertippen können. Das macht ein barrierefreies Erleben der Webseite nicht möglich. Rechts hingegen wurde alles richtig gemacht und der barrierefreie Zugang wird ermöglicht.

Barrierefreiheit betrifft nicht nur Webseiten

Nicht nur Webseiten müssen barrierefrei sein. Die gleichen Anforderungen, die ab dem 28.06.2025 an deine Homepage gestellt werden, musst du auch in diesen digitalen Bereichen erfüllen:

  • PDF-Dokumente
  • Formulare
  • Social-Share-Elemente
  • Buttons, mit denen man interagieren kann

All diese Elemente müssen barrierefrei gestaltet sein.

Was du zusätzlich noch machen musst

Um die Inklusion zu stärken, müssen Websites barrierefrei sein. Darüber hinaus brauchst du auf ebendieser aber auch eine „Erklärung zur Barrierefreiheit”. Darin musst du darüber informieren:

  • wie du Barrierefreiheit auf deiner Homepage sicherstellst
  • welche Bereiche nicht barrierefrei sind

Außerdem brauchst du eine Kontaktmöglichkeit, über die Barrieren gemeldet werden können.

Fazit zu barrierefreien Webseiten

Barrierefreiheit im Web ist ein riesiges Thema. Ein Thema, das schnell überfordernd wirken kann. 

Und doch muss es umgesetzt werden, da die Barrierefreiheit im Web seit dem 28.06.2025 endgültig auch gesetzlich geregelt ist.

Achte also auf ausreichend Kontraste, logische und klare Strukturen und einfache Sprache, wenn du deine Webseite barrierefrei gestalten willst. Prüfe, ob deine Internetpräsenz auch mit Hilfsmitteln wie Screenreadern funktioniert und ob deine Seite auch nur mit der Tastatur bedienbar ist.

Das kostet natürlich Zeit und du musst dich gut mit dem Thema beschäftigen. Doch ein barrierefreier Zugang zu deiner Website bringt dir auch Vorteile: 

Du zeigst, dass dir Inklusion wichtig ist, du boostest dein SEO und kannst im besten Fall Kunden gewinnen, die vorher deine Website einfach nicht ausreichend bedienen konnten, um sich über dein Angebot zu informieren.

Quellen.

Teilen

Hungrig nach mehr? Hol dir unsere Neuigkeiten direkt ins Mailfach.

Inhaltsverzeichnis
Der KOMMA99 Newsletter.
Online Marketing Wissen, Trends & Tipps – kostenlos für dich.