Barrierefreiheitsgesetz: Wie wir unsere Website barrierefreier machen

Postservice.at hat die eigene Website im August 2026 auf Barrierefreiheit geprüft und die Befunde umgesetzt. Vier Dinge waren zu reparieren: zu heller Hilfstext, Links die sich nur durch Farbe vom Fließtext abheben, Icon-Buttons ohne Namen für Screenreader und Tabellen ohne echte Spaltenköpfe. Der schwerste Befund hatte den kleinsten Fix: Ein einziger Grauton lag mit 2,43:1 weit unter der WCAG-Grenze von 4,5:1 und steckte an 175 Stellen im Code. Dieser Beitrag dokumentiert, was wir gefunden haben, wie wir es gelöst haben und wie Sie dieselben Prüfungen in etwa 20 Minuten auf Ihrer eigenen Website durchführen.

Vorweg die ehrliche Einordnung: Wir haben das nicht getan, weil uns eine Behörde dazu gezwungen hat. Wir haben es getan, weil ein Teil unserer Besucher unsere Hinweistexte schlicht nicht lesen konnte.

Was verlangt das Barrierefreiheitsgesetz von Websites?

Das österreichische Barrierefreiheitsgesetz (BaFG) gilt seit 28. Juni 2025 und setzt die EU-Richtlinie 2019/882 um, international bekannt als European Accessibility Act. Es verpflichtet Anbieter bestimmter Produkte und Dienstleistungen dazu, diese barrierefrei anzubieten. Betroffen sind unter anderem Dienstleistungen im elektronischen Geschäftsverkehr, also klassische Webshops, außerdem Bankdienstleistungen für Verbraucher, E-Books, Telekommunikationsdienste und Buchungsdienste im Personenverkehr.

Für Websites bedeutet das konkret: Wenn Ihre Website Teil einer erfassten Dienstleistung ist, muss sie wahrnehmbar, bedienbar, verständlich und robust sein. Der technische Maßstab dafür ist die europäische Norm EN 301 549, die für Web-Inhalte auf die Web Content Accessibility Guidelines (WCAG) verweist, praktisch in der Version 2.1 auf Konformitätsstufe AA.

Zuständig für die Marktüberwachung ist das Sozialministeriumservice. Verstöße können mit Verwaltungsstrafen geahndet werden, für große Unternehmen bis zu 80.000 Euro, für Kleinst- und Mittelbetriebe sind niedrigere Beträge vorgesehen.

Gilt das Barrierefreiheitsgesetz auch für Ihre Website?

Für viele Gründerinnen und Gründer lautet die Antwort: rechtlich vermutlich nein, praktisch trotzdem ja. Kleinstunternehmen, die Dienstleistungen anbieten oder erbringen, sind von den Barrierefreiheitsanforderungen des BaFG ausgenommen. Als Kleinstunternehmen gilt, wer weniger als zehn Personen beschäftigt und einen Jahresumsatz von höchstens 2 Millionen Euro oder eine Jahresbilanzsumme von höchstens 2 Millionen Euro aufweist.

Damit fällt ein großer Teil der Einzelunternehmen und kleinen GmbHs in Österreich aus der Pflicht heraus. Wichtig ist aber die Einschränkung: Die Ausnahme gilt für Dienstleistungen, nicht für Produkte. Und sie ist eine Ausnahme von der gesetzlichen Pflicht, keine Aussage darüber, ob Ihre Website benutzbar ist.

Uns hat weniger die Rechtslage überzeugt als eine Zahl aus dem Alltag: Rund jeder zwölfte Mann hat eine Rot-Grün-Sehschwäche, das sind etwa 8 Prozent. Dazu kommt jeder, der auf dem Handy in der Sonne steht, jeder mit einer Lesebrille, die gerade woanders liegt, und jeder mit einem drei Jahre alten Display bei halber Helligkeit. Barrierefreiheit ist in der Praxis vor allem Lesbarkeit unter schlechten Bedingungen.

Befund 1: Warum war unser Hilfstext unlesbar?

Der schwerwiegendste Befund war ein einziger Grauton. Unser Token für Hilfstext war `#9EA7B5`, ein helles Blaugrau, das auf weißem Hintergrund ein Kontrastverhältnis von 2,43:1 erreicht. Die WCAG verlangen für normalen Fließtext mindestens 4,5:1. Wir lagen also nicht knapp daneben, sondern bei gut der Hälfte des Mindestwerts.

Verwendet wurde dieser Ton an 175 Stellen in 61 Dateien, und zwar ausgerechnet dort, wo er weh tut: in den erklärenden Zeilen unter Überschriften, in Hinweisen unter Formularfeldern und in den Kurzbeschreibungen unserer Tools. Also überall dort, wo eigentlich die hilfreiche Information steht.

Ersetzt haben wir ihn durch `#686E77`, ein neutraleres und deutlich dunkleres Grau mit 5,14:1 auf Weiß. Der Ton wirkt im Layout immer noch zurückgenommen, aber er ist lesbar.

Der Fall, der uns überrascht hat

Ein zweiter Grauton war lehrreicher als der erste. Unsere Sekundärfarbe `#657286` erreicht auf weißem Hintergrund 4,88:1 und besteht die Prüfung damit problemlos. Auf unserem Off-White `#F7F5F2`, mit dem viele Abschnitte hinterlegt sind, sinkt derselbe Ton auf 4,48:1 und fällt durch. Zwei Hundertstel unter der Grenze, aber durchgefallen ist durchgefallen.

Das ist die Lektion, die wir am wenigsten erwartet hatten: Kontrast ist keine Eigenschaft einer Farbe, sondern eines Farbpaars. Eine Textfarbe, die auf Weiß funktioniert, kann auf einem leicht getönten Abschnitt scheitern. Wir haben den Ton auf `#626F82` abgedunkelt, was auf Weiß 5,10:1 und auf dem Off-White 4,69:1 ergibt, also auf beiden Untergründen Reserve lässt.

Denselben Fehler hatten wir bei Grün. Unser Bestätigungsgrün `#34C759` kommt als Schrift auf hellem Grund nur auf 2,22:1. Als Häkchen-Symbol neben einem beschrifteten Punkt ist das vertretbar, als Textfarbe nicht. Wir haben deshalb einen zweiten Token eingeführt: `#217F39` mit 5,05:1 auf Weiß, ausschließlich für Grün, das echten Text trägt. Flächen und Badges mit weißer Schrift behalten das hellere Grün.

Befund 2: Reicht Farbe allein, um einen Link zu erkennen?

Nein. Wenn sich ein Link im Fließtext nur durch seine Farbe vom umgebenden Text unterscheidet, ist er für Menschen mit Farbsehschwäche nicht als Link erkennbar. Die WCAG behandeln das als eigenes Kriterium, unabhängig vom Kontrastwert: Farbe darf nie das einzige Mittel sein, um Information zu vermitteln.

Unser Burgunderrot hat gegenüber weißem Hintergrund einen völlig ausreichenden Kontrast von 7,43:1. Der Haken lag woanders: Gegenüber dem schwarzen Fließtext daneben war es für einen Teil der Besucher kaum zu unterscheiden. Ein Link, den man nicht als Link erkennt, wird nicht geklickt.

Die Lösung ist unspektakulär: Links im Textfluss sind jetzt dauerhaft unterstrichen, nicht mehr erst beim Überfahren mit der Maus. Geändert haben wir das an genau zwei Stellen im Code, in der Funktion, die unsere Artikel aus Markdown rendert, und im Cookie-Hinweis. Damit sind alle rund 980 Links im Fließtext unserer Blogartikel erfasst. Navigation, Buttons und Kacheln bleiben ohne Unterstreichung, weil sie durch Position und Form ohnehin eindeutig als klickbar zu erkennen sind.

Befund 3: Warum brauchen Icon-Buttons einen Namen?

Ein Button, der nur ein Symbol enthält, hat für einen Screenreader keinen Text zum Vorlesen. Genau das war auf unserer Startseite der Fall, aber nur auf schmalen Bildschirmen. Die Umschalter über dem Leistungsbereich zeigen am Desktop Symbol und Beschriftung. Unterhalb der Handy-Breite blendet das Layout die Beschriftung aus, damit die Leiste in eine Zeile passt. Übrig bleibt ein Button, der auf dem Bildschirm ein Icon zeigt und für einen Screenreader leer ist.

Das ist der tückische Teil daran: Am Entwicklungsrechner im breiten Fenster war alles in Ordnung. Der Fehler existierte nur in der mobilen Ansicht, also genau dort, wo die meisten Besucher sind.

Die Reparatur ist ein Attribut pro Button. Ein `aria-label` gibt der Schaltfläche einen Namen, der vorgelesen wird, ohne dass sich am sichtbaren Design irgendetwas ändert. Wir setzen dafür dieselbe Beschriftung ein, die am Desktop ohnehin sichtbar ist, damit beide Varianten nicht auseinanderlaufen. Wichtig ist, dass der Name beschreibt, wohin der Button führt, und nicht wie das Symbol aussieht.

Befund 4: Was Tabellen und Überschriften mit Barrierefreiheit zu tun haben

Struktur ist für Screenreader das, was Layout für sehende Nutzer ist. Zwei Punkte haben wir korrigiert.

Erstens die Vergleichstabelle: In unserer Gegenüberstellung von Virtual Office und klassischem Büro standen die Spaltenüberschriften zwar in der Kopfzeile, aber ohne die Angabe, wofür sie gelten. Erst damit kann ein Screenreader beim Vorlesen einer Zelle die zugehörige Spaltenüberschrift mit ansagen. Der Unterschied ist der zwischen "Ja" und "Virtual Office: ja".

Dazu kam ein Detail, das man leicht übersieht: Die Zelle links oben war leer. Optisch ist das richtig, dort steht nichts. Für einen Screenreader ist eine leere Überschriftenzelle aber ein Loch in der Tabelle. Wir haben sie mit dem Wort "Kriterium" beschriftet und diese Beschriftung visuell ausgeblendet. Vorgelesen wird sie, gesehen wird sie nicht, das Layout bleibt Pixel für Pixel identisch.

Zweitens die Überschriften-Hierarchie: Viele Screenreader-Nutzer springen von Überschrift zu Überschrift, statt eine Seite von oben nach unten zu lesen. Das funktioniert nur, wenn die Ebenen lückenlos aufeinander folgen. Auf unserer Preisseite waren die Paketnamen als H3 ausgezeichnet, obwohl sie direkt auf die H1 der Seite folgen. Damit fehlte die Ebene dazwischen. Wir haben sie auf H2 gehoben. Sichtbar ändert sich dabei nichts, weil unsere Schriftgrößen ohnehin über CSS-Klassen kommen und nicht an der Überschriftenebene hängen. Das ist der Punkt, an dem Barrierefreiheit und sauberer Code dasselbe sind: Die Überschriftenebene beschreibt die Gliederung, nicht die Schriftgröße.

Wie prüfen Sie Ihre eigene Website?

Für die vier Befunde aus diesem Artikel brauchen Sie keine kostenpflichtigen Werkzeuge und keine Agentur. Diese drei reichen und kosten zusammen nichts.

So gehen wir vor, und so würden wir es Ihnen empfehlen:

1. Lighthouse laufen lassen, auf Startseite, einer Unterseite und einem Formular. Der Accessibility-Score allein sagt wenig, die Liste der Befunde darunter dagegen viel.
2. Farbtokens sammeln statt Seiten abklappern. Fast alle Kontrastfehler stammen aus wenigen zentral definierten Farben. Bei uns gingen sämtliche Kontrastbefunde auf drei Werte zurück: zwei Grautöne und ein Grün. Prüfen Sie diese Werte einmal im Kontrast-Checker, statt hundert Screenshots zu vergleichen.
3. Jede Farbe gegen jeden Hintergrund prüfen, auf dem sie tatsächlich vorkommt. Weiß allein genügt nicht, wie unser Off-White-Fall zeigt.
4. Die Tabulator-Taste benutzen. Klicken Sie in die Seite und drücken Sie nur noch Tab. Wenn Sie den Fokus verlieren oder nicht sehen, wo Sie gerade sind, haben Sie eine Barriere gefunden.
5. Auf dem Handy in die Sonne gehen. Das ist kein Witz, sondern der schnellste Kontrasttest, den es gibt.

Wichtig zur Einordnung: Automatische Werkzeuge finden nach gängiger Einschätzung nur einen Teil der tatsächlichen Barrieren, typischerweise etwa ein Drittel. Alt-Texte, die zwar vorhanden, aber sinnlos sind, oder eine Überschriftenlogik, die technisch stimmt und inhaltlich nicht, erkennt kein Prüfprogramm.

Was das mit Ihrer Gründung zu tun hat

Die meisten Kundinnen und Kunden von Postservice.at betreiben eine eigene Website, oft einen Shop oder eine Landingpage für Beratung. Für diese Website gibt es in Österreich eine kurze Liste an Pflichten, die man am besten in einem Aufwasch erledigt: ein vollständiges Impressum, eine Datenschutzerklärung und, je nach Geschäftsmodell, die Barrierefreiheit nach BaFG.

Das Impressum ist dabei der Punkt mit der klarsten Rechtslage und dem geringsten Aufwand. Welche Angaben das E-Commerce-Gesetz und das Mediengesetz verlangen, steht in unserem Beitrag zur Impressumspflicht in Österreich. Wenn Sie es nur schnell erledigen wollen, führt Sie unser Impressum-Generator Feld für Feld durch die Pflichtangaben, kostenlos und ohne Anmeldung. Die wichtigste Angabe darin ist eine ladungsfähige Geschäftsadresse. Wer von zu Hause arbeitet und die Privatadresse nicht im Impressum stehen haben möchte, findet bei Postservice.at eine Geschäftsadresse in 1010 Wien ab 49 Euro netto pro Monat. Für Selbstständige, die überwiegend online sichtbar sind, haben wir die Anforderungen auf unserer Seite für Creator zusammengefasst.

Was wir gelernt haben

Vier Erkenntnisse nehmen wir aus dem Audit mit.

Der Aufwand liegt im Finden, nicht im Reparieren. Die eigentlichen Änderungen waren drei Hex-Werte, zwei Zeilen für die Unterstreichung, eine Handvoll Attribute und ein paar Überschriftenebenen. Zusammen kaum 100 geänderte Zeilen. Die Zeit ging für das Prüfen, Messen und Zählen drauf. Zentrale Tokens sind der Hebel. Weil unsere Farben an einer Stelle definiert sind, hat das Ändern von zwei Zeilen alle 175 Fundstellen auf einmal erledigt. Wer Farbwerte direkt in die Komponenten schreibt, sucht dieselben Fehler einzeln zusammen. Das ist das stärkste Argument für Design-Tokens, das wir kennen, und es hat nichts mit Barrierefreiheit zu tun. Barrierefreiheit ist zu 90 Prozent gutes Handwerk. Kein einziger unserer vier Befunde erforderte eine Designentscheidung gegen die Ästhetik. Der dunklere Grauton sieht nicht schlechter aus als der hellere, er ist nur lesbar. Helle Grautöne sind eine Designgewohnheit, kein Designziel. Sehr heller Hilfstext wirkt im Entwurf auf einem kalibrierten Monitor im abgedunkelten Raum elegant. Auf einem drei Jahre alten Telefon bei Sonnenlicht ist er weg. Wenn Sie einen einzigen Punkt aus diesem Artikel mitnehmen: Prüfen Sie Ihren hellsten Grauton.

Häufige Fragen

Ab wann gilt das Barrierefreiheitsgesetz in Österreich?

Das Barrierefreiheitsgesetz (BaFG) gilt seit 28. Juni 2025. Es setzt die EU-Richtlinie 2019/882 um, den European Accessibility Act. Für Dienstleistungen, die vor diesem Datum mit bestehenden Produkten erbracht werden, sowie für Dienstleistungsverträge, die vor dem 28. Juni 2025 geschlossen wurden, gelten Übergangsfristen bis längstens 28. Juni 2030.

Muss meine Website als Einzelunternehmer barrierefrei sein?

In den meisten Fällen nicht verpflichtend. Kleinstunternehmen, die Dienstleistungen anbieten oder erbringen, sind vom BaFG ausgenommen. Als Kleinstunternehmen gilt, wer weniger als zehn Personen beschäftigt und höchstens 2 Millionen Euro Jahresumsatz oder Jahresbilanzsumme erreicht. Die Ausnahme gilt allerdings nur für Dienstleistungen, nicht für Produkte, und sie befreit nicht von den übrigen Website-Pflichten wie Impressum und Datenschutzerklärung.

Welchen Kontrast muss Text auf einer Website haben?

Normaler Fließtext benötigt nach WCAG 2.1 Stufe AA ein Kontrastverhältnis von mindestens 4,5:1 gegenüber dem Hintergrund. Für großen Text, ab 18 Punkt oder ab 14 Punkt in Fettschrift, genügen 3:1. Entscheidend ist immer das Paar aus Textfarbe und tatsächlichem Hintergrund: Unser Ton `#657286` erreicht auf Weiß 4,88:1 und besteht, auf unserem Off-White `#F7F5F2` nur 4,48:1 und fällt durch.

Welche Norm gilt für barrierefreie Websites nach dem BaFG?

Der technische Maßstab ist die europäische Norm EN 301 549. Für Web-Inhalte verweist sie auf die Web Content Accessibility Guidelines (WCAG), praktisch in der Version 2.1 auf Konformitätsstufe AA. Wer die harmonisierten Normen einhält, dem wird die Erfüllung der Anforderungen vermutet.

Wie kann ich meine Website kostenlos auf Barrierefreiheit prüfen?

Mit Lighthouse, das in Chrome bereits eingebaut ist (Entwicklertools öffnen, Reiter Lighthouse, Kategorie Accessibility), der kostenlosen Browser-Erweiterung axe DevTools und einem webbasierten Kontrast-Checker für einzelne Farbpaare. Diese Kombination findet Kontrastfehler, fehlende Button-Namen und Strukturprobleme. Automatische Werkzeuge erkennen aber nur einen Teil der Barrieren, typischerweise etwa ein Drittel, den Rest findet nur ein manueller Test mit Tastatur und Screenreader.

Welche Strafen drohen bei Verstößen gegen das Barrierefreiheitsgesetz?

Verstöße können mit Verwaltungsstrafen von bis zu 80.000 Euro geahndet werden. Für Kleinstunternehmen und KMU sind geringere Beträge vorgesehen. Marktüberwachungsbehörde ist das Sozialministeriumservice.

Reicht es, wenn Links auf meiner Website farblich hervorgehoben sind?

Nein. Farbe darf nach den WCAG nicht das einzige Mittel sein, um Information zu vermitteln. Ein Link im Fließtext braucht ein zweites Erkennungsmerkmal, in der Regel eine Unterstreichung. Das gilt unabhängig davon, wie hoch der Kontrast der Linkfarbe gegenüber dem Hintergrund ist, denn ausschlaggebend ist die Unterscheidbarkeit vom umgebenden Text.

Barrierefreiheit ist Lesbarkeit für alle

Wir haben an einem Tag vier Befunde behoben und dabei vor allem eines festgestellt: Das meiste davon war kein Zugeständnis an eine Vorschrift, sondern eine Verbesserung für jeden Besucher. Dunklerer Hilfstext hilft nicht nur Menschen mit Sehbehinderung, sondern auch dem Gründer, der am Bahnsteig auf dem Handy unsere Preise vergleicht. Unterstrichene Links helfen nicht nur bei Farbsehschwäche, sondern jedem, der eine Seite überfliegt.

Wenn Sie gerade eine Website aufbauen: Prüfen Sie Ihren hellsten Grauton, bevor Sie ihn an 175 Stellen einsetzen. Und erledigen Sie die Website-Pflichten in einem Zug. Für den Teil mit dem Impressum brauchen Sie zehn Minuten und unseren Impressum-Generator, für die passende Geschäftsadresse dazu ist Postservice.at ab 49 Euro netto pro Monat da, monatlich kündbar.

Quellen

• Sozialministerium: Barrierefreiheitsgesetz
• Sozialministeriumservice: Allgemeine Informationen zum Barrierefreiheitsgesetz
• Barrierefreiheitsgesetz (BaFG) im Rechtsinformationssystem des Bundes (RIS)
• Richtlinie (EU) 2019/882 (European Accessibility Act) auf EUR-Lex
• W3C: Web Content Accessibility Guidelines (WCAG) 2.1
• W3C: Erfolgskriterium 1.4.3 Kontrast (Minimum)
• W3C: Erfolgskriterium 1.4.1 Benutzung von Farbe

Alle Angaben mit Stand 13. August 2026. Die genannten Kontrastwerte haben wir mit der WCAG-Formel für relative Leuchtdichte selbst nachgerechnet. Dieser Beitrag ist eine allgemeine Information und ersetzt keine Rechtsberatung.