Alles, was du jetzt zu barrierefreien Webseiten wissen musst
Barrierefreiheit ist derzeit in aller Munde – und zwar nicht nur der barrierefreie Zugang zu Gebäuden & Co. für Menschen mit eingeschränkter Mobilität.
Vielmehr hat sich das Thema auch auf das World Wide Web ausgebreitet. Alle Menschen sollen Teilhabe an der digitalen Welt haben können.
Daher tritt mit dem 28.06.2025 das Barrierefreiheitsstärkungsgesetz (BFSG) in Kraft – auch in Österreich.
Daher zeigen wir dir hier, 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.
Hinweis: Um unseren Blogbeitrag optimal zu erleben, ist es hilfreich, wenn dir die folgenden Begriffe bereits bekannt sind. Falls nicht, klicke einfach auf die entsprechenden Links, um mehr in unserem Glossar darüber zu erfahren. Wir wünschen dir viel Erfolg und Freude bei deiner Weiterbildung!
Was sind barrierefreie Webseiten?
Barrierefrei heißt: zugänglich für alle. Und das ohne jedwede Installationen oder Einschränkungen.
Deine Website muss also für wirklich jeden Benutzer zugänglich und verständlich sein, eine Interaktion mit der Website muss möglich sein.
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: Geschwindigkeit, mit der man etwas verarbeiten kann, Lernschwierigkeiten, Nicht-Muttersprachler
- die Motorik: fehlende, aber auch gebrochene Körperteile, andere Einschränkungen, die die Motorik beeinträchtigen, Lähmungen
- Technische Probleme: auch kaputte Lautsprecher machen Untertitel bei Videos notwendig, ältere Browser können ohne Barrierefreiheit zu Problemen führen
All das zeigt, dass barrierefrei zugänglich gemachte Informationen für mehr Menschen wichtig sind, als man zuerst annimmt. Und: Barrierefreiheit ist nicht nur für Menschen mit dauerhaften Beeinträchtigungen gedacht – sondern auch für temporäre Einschränkungen (entzündetes Auge, gebrochener Arm etc.).
Barrierefreiheit im Web sorgt also für mehr Inklusion.
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. Stattdessen gewinnen sie weitere Vorteile:
- 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 zwei Bereiche.
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.
Ab 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 wohnen.
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:
- Wahrnehmbarkeit: Informationen & Website-Elemente müssen wahrgenommen werden können.
- Bedienbarkeit: Alle Elemente und die Seite an sich müssen bedient werden können.
- Verständlichkeit: Deine Website & deren Inhalte müssen einfach zu verstehen sein.
- Robustheit: Auch Hilfsmittel (z. B. Screenreader) müssen deine Seite korrekt lesen können.
Die genauen Kriterien, die deine Website ab dem 28.06.2025 erfüllen muss, findest du bei der Web Accessibility Initiative (WAI).
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
Nicht betroffen sind:
- 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)
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.
| Wichtig: Wir sind eine Online-Marketing-Agentur und keine Juristen. Alle hier genannten Inhalte und Informationen sind Ergebnis einer gründlichen Recherche, ersetzen jedoch keine Rechtsberatung. |
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 blinden Menschen 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 vergrößert.
Wichtig ist: Damit zum Beispiel Screenreader deine Seite lesen können, muss diese so programmiert sein, dass die Struktur für diese Geräte erkennbar ist.
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 durch diese Brille 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?
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.
| Wichtig: Prüfe immer sowohl die Desktop- als auch die Mobilversion deiner Website. |
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:
| Bereich | Tipps |
| Sprache |
|
| Aufbau |
|
| Elemente |
|
| Navigation |
|
| 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. |
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
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
Auf dem oberen Bild herrscht Chaos: Hier ist der CTA zu klein und die beiden Elemente (CTA und Video) liegen viel zu nah aneinander. Das macht ein barrierefreies Erleben der Webseite nicht möglich. Unten 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 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 ab 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.
| Du hast Fragen zu barrierefreien Webseiten? Dann nimm einfach Kontakt zu uns auf und lass dich beraten. Als Online-Marketing-Agentur wissen wir genau, worauf es bei barrierefreien Seiten ankommt. |
Quellen.
