Barrierefreie Website: die Checkliste zum BFSG

Das BFSG setzt den European Accessibility Act der EU in deutsches Recht um, das BaFG tut dasselbe für Österreich. Für Websites zählt vor allem der elektronische Geschäftsverkehr: der Verkauf von Waren oder Dienstleistungen an Verbraucher über das Internet. Erfasst sind ausserdem unter anderem Bankdienstleistungen, E-Books, Personenbeförderung und Telekommunikation.

Dienstleister, die Kleinstunternehmen sind, fallen nicht darunter: weniger als 10 Beschäftigte und höchstens 2 Millionen Euro Jahresumsatz oder Jahresbilanzsumme. Wer nur an andere Unternehmen verkauft, ist in einer anderen Lage, weil es um Dienstleistungen für Verbraucher geht. Das BFSG sieht bei Verstössen Bussgelder von bis zu 100.000 Euro vor.

Ob Ihr Angebot erfasst ist und ab wann, klärt Ihre Rechtsberatung. Der Rest dieses Ratgebers ist die technische Seite.

Das Gesetz beschreibt die Anforderungen allgemein. In der Praxis wird eine Website an der europäischen Norm EN 301 549 gemessen, und für Webinhalte verweist diese Norm auf WCAG 2.1 auf Stufe AA: Inhalte, die man wahrnehmen, bedienen und verstehen kann, so gebaut, dass Hilfsmittel wie Screenreader sie lesen können.

Dienstleister müssen ausserdem erklären, wie ihr Angebot die Anforderungen erfüllt. Meist geschieht das mit einer Erklärung zur Barrierefreiheit auf der Website, von jeder Seite aus verlinkt, zusammen mit einer Möglichkeit, Barrieren zu melden.

Legen Sie die Maus weg und gehen Sie Ihren wichtigsten Weg durch, etwa Produktseite, Warenkorb und Kasse oder das Kontaktformular:

• Jeder Link, jede Schaltfläche, jedes Menü und jedes Formularfeld ist mit der Tabulatortaste erreichbar und mit Enter oder Leertaste bedienbar
• Sie sehen jederzeit, wo der Tastaturfokus steht
• Jedes Menü, jedes Pop-up und das Cookie-Banner lässt sich mit der Tastatur wieder verlassen, ohne hängenzubleiben
• Der Fokus springt in der Reihenfolge, in der die Seite aufgebaut ist

Prüfen Sie, was jemand von der Seite hat, der den Bildschirm nicht sieht oder den Ton nicht hört:

• Jedes Bild mit Information hat eine Textalternative, die sagt, was es zeigt oder bewirkt; rein dekorative Bilder sind für Screenreader ausgeblendet
• Videos mit Sprache haben Untertitel, Audiodateien eine Abschrift
• Nichts blinkt öfter als dreimal pro Sekunde, und bewegte Inhalte lassen sich anhalten

Prüfen Sie, ob Menschen mit Sehschwäche oder Farbenblindheit den Text lesen können:

• Fliesstext hat ein Kontrastverhältnis von mindestens 4,5 zu 1 zu seinem Hintergrund, grosser Text mindestens 3 zu 1
• Information steht nie nur in der Farbe, etwa ein Pflichtfeld, das nur rot markiert ist
• Die Seite funktioniert auch bei 200 Prozent Zoom, und auf einem schmalen Handybildschirm muss nichts seitlich gescrollt werden

Wer mit dem Screenreader arbeitet, bewegt sich über den Aufbau durch die Seite, darum muss der Aufbau die Bedeutung tragen:

• Jede Seite hat einen Titel, der sagt, was sie ist, und eine Hauptüberschrift
• Die Überschriften folgen einer logischen Ordnung, sodass man mit dem Screenreader von Überschrift zu Überschrift springen kann
• Die Sprache der Seite ist im Code hinterlegt, damit der Text mit der richtigen Aussprache vorgelesen wird
• Link- und Schaltflächentexte sind für sich verständlich: nicht fünf Links, die alle "hier klicken" heissen

Hier verlieren nicht barrierefreie Websites Bestellungen von Menschen, die sie abschliessen wollten:

• Jedes Feld hat eine sichtbare Beschriftung, die beim Tippen sichtbar bleibt
• Fehler werden als Text beim Feld beschrieben, mit dem, was stattdessen gilt
• Zeitlimits lassen sich abschalten oder verlängern
• Die ganze Kasse, mit Zahlungsschritt und allfälligem Bestätigungscode, funktioniert mit Tastatur und Screenreader

Die letzten beiden Punkte sind Dokumente, kein Code:

• Eine Erklärung zur Barrierefreiheit ist veröffentlicht und von jeder Seite aus verlinkt
• Die Erklärung nennt einen Weg, Barrieren zu melden, und jemand beantwortet diese Meldungen

Beginnen Sie mit dem Tastaturdurchgang oben, auf Ihren drei wichtigsten Seiten. Zoomen Sie dann auf 200 Prozent und öffnen Sie die Website auf dem Handy. Hören Sie sich zuletzt eine Seite mit dem Screenreader an, der in Ihrem Gerät eingebaut ist: VoiceOver bei Apple, die Sprachausgabe bei Windows, TalkBack bei Android.

Automatische Prüfwerkzeuge, etwa die Barrierefreiheitsprüfung in den Entwicklertools von Chrome, sind ein guter erster Durchgang: Sie finden fehlende Textalternativen, schwachen Kontrast und fehlende Beschriftungen schnell. Ob eine Textalternative sinnvoll ist oder eine Kasse vorgelesen verständlich bleibt, können sie nicht beurteilen. Ein gutes automatisches Ergebnis ist darum noch keine Konformität.

Zuerst die Wege, die Umsatz bringen und Kundschaft beantworten: Kasse, Buchung und Kontaktformular. Darin machen Tastaturbedienung, Formularbeschriftungen und Fehlermeldungen sowie der Kontrast meist den grössten Unterschied.

Ein Overlay-Skript, das eine Werkzeugleiste auf die Seite legt, ändert nichts an dem, was die Norm prüft, und nichts an der Erfahrung der Menschen, für die das Gesetz gemacht ist. Befunde werden im Code behoben, oder sie sind nicht behoben.

Wenn Sie die vollständige Messung nach EN 301 549 und WCAG 2.1 AA wollen, mit priorisiertem Bericht und Behebung zum Festpreis, lesen Sie unsere Seite zur barrierefreien Website nach BFSG. Jede neue Website, die wir bauen, erfüllt die Grundlage: was jede Website enthält.