Digitale Barrierefreiheit
Menschen interagieren mit Web-Inhalten auf verschiedenen Wegen. Neben dem Standardbrowser nutzen manche eigene Software wie Screen-Reader, andere passen ihre Browser oder Betriebssysteme an oder verwenden spezielle Pointing-Devices. Das kann schon mit kleinen Schritten anfangen, wie einer Veräfnderung der Standard-Schriftgröße im Browser. Eine barrierefreie Webseite versucht zum einen, bestimmte Bedienkonzepte zu unterstützen, und zum anderen aber auch insgesamt eine gute und einfache Struktur zu bieten, sodass auch Menschen mit sehr individuellen Arbeitsabläufen keine Überraschungen erleben.
Rechtlicher Rahmen und Standards
Rechtlich gesehen gewinnt Accessibility in Österreich durch zwei EU-Richtlinien und die daraus entstandenen Gesetze an Bedeutung. Zuerst kam das Web-Zugänglichkeits-Gesetz (WZG) von 2019, das die Richtlinie 2016/2102 umsetzt und die Zugänglichkeit von Webseiten und mobilen Anwendungen bestimmter öffentlicher Stellen regelt. Später, im Jahr 2023, wurde auch das Barrierefreiheitsgesetz (BaFG) verabschiedet, das die Richtlinie 2019/882 umsetzt und sich an Anbieter bestimmter Produkte und Dienstleistungen richtet. Das umfasst nicht nur Webseiten, sondern auch andere Software und sogar bestimmte Hardware. Das BaFG ist in seinen wesentlichen Bestimmungen seit Juni 2025 anzuwenden, wobei es je nach Anwendungsbereich Ausnahmen und Übergangsregelungen gibt. Andere EU-Länder haben ähnliche Gesetze in Einklang mit den entsprechenden Richtlinien verabschiedet.
Für wen ergeben sich gesetzliche Pflichten?
Für öffentliche Stellen gelten das WZG auf Bundesebene und entsprechende Landesgesetze. Sie müssen ihre erfassten Webseiten und Apps barrierefrei gestalten und unter anderem eine Barrierefreiheitserklärung veröffentlichen. Die Österreichische Forschungsförderungsgesellschaft (FFG) prüft Webseiten und Apps des Bundes auf Barrierefreiheit und unterstützt öffentliche Stellen bei der Umsetzung. Eine Übersicht bietet sie auf digitalbarrierefrei.at.
Das BaFG betrifft auch private Unternehmen, wenn sie eines der erfassten Produkte oder eine erfasste Dienstleistung anbieten. Dazu zählen beispielsweise Online-Shops für Verbraucher*innen, E-Books und Bankdienstleistungen für Verbraucher*innen. Die Unternehmensgröße allein entscheidet also nicht darüber, ob eine Webseite unter das Gesetz fällt; zuerst kommt es auf das Angebot an.
Für Dienstleistungen gibt es eine Ausnahme für Kleinstunternehmen: Sie müssen weniger als zehn Personen beschäftigen und entweder einen Jahresumsatz von höchstens 2 Millionen Euro oder eine Jahresbilanzsumme von höchstens 2 Millionen Euro haben. Beide Voraussetzungen – Beschäftigtenzahl und mindestens eine der beiden finanziellen Grenzen – müssen erfüllt sein. Für Unternehmen, die erfasste Produkte herstellen, importieren oder verkaufen, gilt diese pauschale Ausnahme nicht.
Welche Angebote erfasst sind und welche Ausnahmen und Übergangsregeln gelten, erklärt das Sozialministeriumservice zum BaFG. Dort finden sich auch die Details zur Ausnahme für Kleinstunternehmen.
Technische Standards und Qualitätssiegel
In Bezug auf Webseiten orientieren sich die technischen Anforderungen an den international anerkannten Web Content Accessibility Guidelines (WCAG), die von der Web Accessibility Initiative (WAI) des World Wide Web Consortium (W3C) veröffentlicht und aktualisiert werden. Die aktuelle veröffentlichte Version ist WCAG 2.2, während WCAG 3.0 noch als Arbeitsentwurf entwickelt wird. Dieser Leitfaden konzentriert sich auf Konformitätsstufe AA, an der sich die rechtlichen Anforderungen im Wesentlichen orientieren. Dazu müssen auch die Anforderungen der Stufe A erfüllt werden.
Die europäische Norm EN 301 549 behandelt die Barrierefreiheit von Webseiten, Software und Geräten. Für Webseiten decken sich ihre Anforderungen weitgehend mit den WCAG, an einzelnen Stellen gehen sie darüber hinaus. Ein Beispiel: Auf Webseiten, deren Hauptzweck das Abspielen von Videos mit Ton ist, müssen sich Untertitel und Audiodeskriptionen mit genauso wenigen Bedienschritten einschalten lassen wie die wichtigsten Player-Funktionen, etwa Start und Pause.
Daneben gibt es noch das von der Österreichischen Computer Gesellschaft (OCG) entwickelte Web Accessibility Certificate Austria (WACA), ein unabhängiges Qualitätssiegel, das die Umsetzung von Accessibility-Anforderungen anhand der WCAG überprüft. Rechtlich besitzt es jedoch keine Verbindlichkeit und ersetzt keine behördliche Prüfung. Die Einhaltung der gesetzlichen Anforderungen wird von den jeweils zuständigen Stellen kontrolliert, unter anderem durch stichprobenartige Überprüfungen.
Was genau steht nun in den WCAG? Die folgenden Abschnitte geben einen groben Überblick über die Anforderungen der WCAG 2.2 auf Konformitätsstufe AA. Grundsätzlich werden hier vier Prinzipien unterschieden: Wahrnehmbarkeit, Bedienbarkeit, Verständlichkeit und Robustheit. Die ersten drei Bereiche lassen sich auch anhand der sichtbaren Inhalte und der Bedienung nachvollziehen. Dazu geben die Abschnitte jeweils einfache Checks für die eigene Webseite. Robustheit nimmt eine etwas andere Rolle ein: Hier geht es vor allem darum, ob die Webseite auch technisch mit Browsern und Hilfsmitteln wie Screenreadern zusammenarbeitet. Das lässt sich von außen weniger leicht beurteilen.
Wahrnehmbarkeit
Wahrnehmbarkeit betrifft die Darstellung und Erkennbarkeit von Bildern, Texten und Multimedia-Inhalten. Für nicht-dekorative Bilder muss eine passende Textalternative verfügbar sein, während rein dekorative Bilder von assistiven Technologien ignoriert werden können. Bei Audio- und Videoinhalten müssen je nach Art des Mediums Transkripte, Untertitel oder Audiodeskriptionen angeboten werden, damit die enthaltenen Informationen auch ohne die jeweilige Sinneswahrnehmung zugänglich sind.
Bilder und Alternativtext
Menschen, die blind sind oder eine starke Sehbehinderung haben, verwenden häufig Screenreader. Diese machen Inhalte und Bedienelemente einer Webseite über Sprache oder eine Braillezeile zugänglich. Bilder brauchen deshalb eine Textalternative, wenn sie Informationen oder eine Funktion vermitteln. Bei Bildern, die über ein <img>-Element eingebunden sind, wird die Textalternative im alt-Attribut hinterlegt und oft „Alt-Text“ genannt. Sie wird normalerweise nicht zusätzlich auf der Seite angezeigt. Kann ein Bild nicht geladen werden, kann der Browser stattdessen den Alternativtext anzeigen.
<img
src="team-foto_workshop.jpg"
alt="Gruppenfoto unseres Teams nach dem Workshop"
>Das alt-Attribut ist aber nicht die einzige Möglichkeit, eine Textalternative bereitzustellen. Wird eine Grafik anders eingebunden, etwa als direkt eingebettetes SVG, können dafür auch Elemente wie <title> und <desc> verwendet werden. Wichtig ist, dass die Beschreibung der Grafik korrekt zugeordnet und für assistive Technologien zugänglich ist.
Welche Beschreibung passt, hängt vom Zweck des Bildes im jeweiligen Zusammenhang ab:
- Informative Fotos und Portraits: Beschreiben, was für das Verständnis wichtig ist. Bei einem Portrait kann das etwa die Identität der abgebildeten Person sein, sofern sie nicht bereits im direkt zugehörigen Text genannt wird.
- Bilder mit Text: Relevante Wörter müssen auch als Text zugänglich sein. Ein Siegel mit der Aufschrift „DSGVO konform“ braucht beispielsweise diese Information als Textalternative, sofern sie nicht bereits gleichwertig daneben steht. Neue Inhalte möglichst als echten Text statt als Text im Bild gestalten.
- Bilder als Bedienelemente: Entscheidend ist die Funktion. Eine Lupe, die eine Suche auslöst, braucht eine zugängliche Benennung wie „Suchen“, nicht nur eine Beschreibung ihres Aussehens. Bei einem Bild innerhalb eines Links oder Buttons ist die Benennung des gesamten Bedienelements zu berücksichtigen.
- Diagramme und Grafiken: Die relevante Information braucht eine Textalternative. Bei einfachen Diagrammen kann ein Alt-Text genügen; bei komplexen Daten ist oft eine ergänzende Beschreibung oder Datentabelle nötig.
Die Beschriftungen benennen die Balken. Um ihre Werte zu vergleichen, muss man aber die Balkenhöhen erkennen können. Eine unsichtbare Textalternative allein genügt nicht: Auch die sichtbaren Balken müssen die Kontrastanforderungen erfüllen.
Eine Textalternative ersetzt nicht den nötigen Kontrast der Grafik (mehr dazu im Abschnitt Farbkontrast): Menschen, die das Diagramm visuell lesen, müssen die relevanten Flächen und Linien weiterhin erkennen können. Ein unsichtbarer Alt-Text hilft ihnen dabei nicht. Sind dagegen alle Informationen bereits als gut lesbare Beschriftungen und Werte sichtbar, müssen die Diagrammflächen selbst nicht zusätzlich die Kontrastanforderung erfüllen.
Rein dekorative HTML-Bilder erhalten in der Regel einen leeren Alternativtext: alt="". Damit können assistive Technologien sie überspringen. Das Attribut einfach wegzulassen ist keine gleichwertige Lösung, weil dann beispielsweise der Dateiname vorgelesen werden kann. Auch wenn die relevante Bildinformation bereits vollständig in einem direkt zugehörigen Text steht, kann ein leerer Alternativtext sinnvoll sein, um Wiederholungen zu vermeiden. Eine Bildunterschrift allein reicht dafür nicht automatisch aus: Sie muss tatsächlich alle benötigten Informationen abdecken. Bei funktionalen Bildern muss die Aktion oder das Linkziel weiterhin zugänglich benannt bleiben.
Für die Entscheidung hilft der Alt-Text-Entscheidungsbaum der WAI.
Darstellung und Vergrößerung
Webseiten müssen auch auf einem schmalen Gerät mit einer verfügbaren Breite von 320 Pixeln funktionieren, grundsätzlich ohne dass man zum Lesen zusätzlich horizontal scrollen muss. Ausnahmen gibt es für Inhalte, die eine zweidimensionale Darstellung benötigen, etwa große Datentabellen oder Karten. Die Darstellung muss sowohl im Hoch- als auch im Querformat funktionieren, sofern eine bestimmte Orientierung nicht wesentlich für die Anwendung ist.
Zusätzlich zur Breite ist die verfügbare Höhe wichtig: Im Querformat kann ein Fenster beispielsweise nur 320 Pixel hoch sein. Auch dann müssen alle Inhalte und Funktionen erreichbar bleiben. Gerade mobile Menüs machen hier häufig Probleme, wenn sie höher als das Fenster werden und sich nicht scrollen lassen. Die 320 Pixel Höhe sind eine praktische Testgröße für das Querformat, kein eigener WCAG-Grenzwert.
Für diese beiden Bildschirmtests wird ohne zusätzliche Vergrößerung gearbeitet, also bei 100 % Browser-Zoom. Die Anforderung an die schmale Darstellung gilt aber ebenso, wenn der verfügbare Platz durch Zoom kleiner wird.
Texte müssen außerdem bis auf 200 % vergrößerbar sein, ohne dass Inhalte oder Funktionen verloren gehen. Wenn die Webseite bereits bei kleinen Viewports funktioniert, verursacht der normale Browser-Zoom häufig keine zusätzlichen Probleme. Moderne Browser übernehmen dabei viel, die Gestaltung kann trotzdem Probleme verursachen: etwa wenn größerer Text in einem Feld mit fester Höhe abgeschnitten wird. Eine schmale Darstellung allein zeigt nicht zuverlässig, ob auch die Textvergrößerung funktioniert. Die entsprechenden Einstellungen müssen nicht direkt von der Webseite angeboten werden; ihre Nutzung darf durch die Umsetzung aber nicht verhindert werden.
Die Geräteansicht lässt sich etwa in Chrome, Edge oder Safari simulieren. Wenn der Browser eine reine Textvergrößerung anbietet, ist auch diese ein hilfreicher Check.
Farbkontrast
Ausreichender Kontrast macht Texte besser erkennbar. Gemeint ist das Verhältnis der relativen Leuchtdichte von Vordergrund und Hintergrund, nicht allein der Unterschied zwischen zwei Farbtönen. Zwei verschiedenfarbige Flächen können ähnlich hell sein und dadurch einen zu geringen Kontrast aufweisen. Bei eingeschränktem Kontrastsehen kann das Lesen dadurch erheblich erschwert oder unmöglich werden.
Vier Farbpaare zeigen unterschiedliche Lesbarkeit: Blau auf mittlerem Lila hat weniger Kontrast als Blau auf Weiß.
Auf Weiß: #dedfff: 1,3 zu 1; #8c8ce8: 3,0 zu 1; #3939d1: 7,8 zu 1; #1d1d69: 14,7 zu 1; #000000: 21,0 zu 1.
AA für normalen Text: Buchstaben 6 bis 13 von links.
Auf Grün: #ffffff: 5,5 zu 1; #ffbfbf: 3,6 zu 1; #ff8080: 2,3 zu 1; #ff4040: 1,6 zu 1; #ff0000: 1,4 zu 1.
AA für normalen Text: Buchstaben 1 bis 2 von links.
Auf Schwarz: #232368: 1,5 zu 1; #5a5a8e: 3,3 zu 1; #9191b4: 6,9 zu 1; #c8c8d9: 12,7 zu 1; #ffffff: 21,0 zu 1.
AA für normalen Text: Buchstaben 6 bis 13 von links.
Auf Grün wird der Verlauf von Weiß zu Rot nicht automatisch kontrastreicher. Der Hintergrund bestimmt mit, wie gut die Buchstaben erkennbar sind.
Weiter muss der Kontrast ausreichend sein. Für normalen Text gilt ein Mindestkontrast von 4,5:1, für großen Text und bestimmte grafische Elemente reichen 3:1. Informationen dürfen außerdem nicht ausschließlich durch Farbe vermittelt werden. Links sollten deshalb beispielsweise unterstrichen oder anderweitig ausreichend gekennzeichnet werden. Auch Texteigenschaften wie Zeilenabstände müssen innerhalb bestimmter Grenzen anpassbar sein, ohne dass Inhalte abgeschnitten werden. Text sollte deshalb grundsätzlich als echter Text und nicht als Bild eingebunden werden.
Als großer Text gilt dabei Text ab 18 Punkt in normaler Schrift oder ab 14 Punkt in Fettschrift. Das entspricht 24 beziehungsweise ungefähr 18,7 Pixeln. Die Mindestwerte sind Grenzwerte: Ein rechnerischer Kontrast von 4,49:1 erfüllt beispielsweise eine Anforderung von 4,5:1 nicht.
Großer Text · mindestens 3:1
Beispiel: 4,5:1
Normaler Text · mindestens 4,5:1
Beispiel: 7,0:1
Weitere Hinweise stehen im Leitfaden.
Weitere Hinweise stehen im Leitfaden.
Weitere Hinweise stehen im Leitfaden.
Ausreichender Kontrast allein garantiert noch keine gute Lesbarkeit. Schriftgestaltung, Vergrößerbarkeit und individuelle Farbeinstellungen bleiben wichtig. Manche Menschen bevorzugen auch weniger starke Kontraste; die Webseite sollte entsprechende persönliche Einstellungen unterstützen.
Zum Prüfen eignet sich beispielsweise der WebAIM Contrast Checker. Dabei die tatsächlichen Vordergrund- und Hintergrundfarben verwenden, einschließlich relevanter Zustände von Links oder Bedienelementen. Die W3C-Erläuterung zu Textkontrast erklärt Grenzwerte und Ausnahmen genauer.
Struktur und ergänzende Inhalte
Ein weiterer wichtiger Punkt ist die Struktur der Inhalte. Überschriften, Listen, Tabellen und andere semantische Elemente müssen so ausgezeichnet werden, dass ihre Bedeutung auch unabhängig von der visuellen Darstellung erkennbar ist. Die Reihenfolge der Inhalte muss dabei sinnvoll bleiben. Anweisungen dürfen sich außerdem nicht ausschließlich auf visuelle Eigenschaften wie Farbe, Form oder Position beziehen.
Auch eingeblendete Inhalte wie Tooltips müssen berücksichtigt werden. Wenn sie durch Hover oder Tastaturfokus erscheinen, müssen sie unter bestimmten Bedingungen wieder ausgeblendet werden können, mit dem Mauszeiger erreichbar sein und sichtbar bleiben, solange sie benötigt werden.
Was man selbst einfach überprüfen kann
- Fenstergrößen testen: Die unter Darstellung und Vergrößerung beschriebenen schmalen und niedrigen Fenster ohne Zoom ausprobieren. Bleibt alles erreichbar? Besonders geöffnete mobile Menüs bis zum letzten Eintrag und zum Schließen-Button prüfen.
- Text vergrößern: Auf 200 % vergrößern: Bleiben Beschriftungen, Eingabefelder und Bedienelemente vollständig lesbar und bedienbar?
- Kontrast messen: Text- und Hintergrundfarbe mit einem Kontrastprüfer vergleichen. Auch kleine Beschriftungen und Texte auf farbigen Flächen berücksichtigen, ausdrücklich auch in der mobilen Ansicht und in geöffneten mobilen Menüs. Dort können andere Farben und Hintergründe verwendet werden als in der Desktop-Ansicht. Unterschiedliche Farben allein garantieren keinen ausreichenden Kontrast.
- Bilder und Medien prüfen: Vermitteln die Textalternativen die wesentlichen Bildinformationen? Videos mit relevanter Tonspur ohne Ton ansehen: Sind Sprache und wichtige Geräusche durch Untertitel verständlich? Bei aufgezeichneten Audioinhalten wie Podcasts prüfen, ob ein passendes Transkript vorhanden und leicht zu finden ist. Für eine vollständige Prüfung von Videoinhalten sind auch visuelle Informationen zu berücksichtigen, die gegebenenfalls eine Audiodeskription brauchen.
Bedienbarkeit
Bedienbarkeit beschäftigt sich mit der Interaktion mit einer Webseite. Eine zentrale Anforderung ist, dass grundsätzlich sämtliche Funktionen auch über eine Tastatur zugänglich sein müssen. Die Reihenfolge der Tastaturnavigation muss nachvollziehbar sein und der aktuelle Fokus sichtbar bleiben. Außerdem dürfen Benutzer nicht in einzelnen Elementen stecken bleiben, ohne diese wieder mit der Tastatur verlassen zu können. Das gilt auch in der mobilen Ansicht: Ein mobiles Menü muss sich mit der Tastatur öffnen, bedienen und schließen lassen. Fokusmarkierungen müssen auch dort gut sichtbar sein und ausreichend Kontrast zum jeweiligen Hintergrund haben.
Sichtbarer Tastaturfokus
Ein Fokus-Indikator zeigt, welches interaktive Element gerade über die Tastatur angesteuert wird. Wird beispielsweise mit Tab zu einem Button gewechselt, macht eine sichtbare Markierung deutlich, welcher Button beim anschließenden Drücken der Eingabetaste aktiviert wird. Fehlt diese Rückmeldung, kann die Orientierung verloren gehen, obwohl sich technisch weiterhin zwischen den Elementen wechseln lässt.
Ein gut erkennbarer Rahmen ist eine mögliche Gestaltung. Für selbst gestaltete Fokusmarkierungen gilt auf Stufe AA grundsätzlich ein Mindestkontrast von 3:1 zu den angrenzenden Farben. Die Markierung muss auch bei Links innerhalb eines Absatzes und vor unterschiedlichen Hintergründen sichtbar bleiben. Vorhandene Fokusmarkierungen des Browsers sollten deshalb nicht ohne einen geeigneten Ersatz entfernt werden.
Mehr über Wahrnehmbarkeit und Bedienbarkeit erfahren. Weitere Hinweise stehen unter Quellen & Werkzeuge.
Weitere Hinweise bieten die W3C-Erläuterungen zum sichtbaren Fokus und zum Kontrast von Bedienelementen und Zuständen.
Navigation und Eingabemethoden
Auch die Navigation innerhalb der Webseite muss sinnvoll aufgebaut sein. Wiederkehrende Bereiche wie die Hauptnavigation müssen übersprungen werden können, beispielsweise durch einen Skip-Link zum Hauptinhalt. Seiten sollen aussagekräftige Titel, Überschriften und Linkbeschriftungen besitzen. Außerdem sollen grundsätzlich mehrere Möglichkeiten bestehen, einzelne Seiten eines Webauftritts zu finden, beispielsweise über eine Navigation und eine Suchfunktion.
Die Bedienung muss auch mit unterschiedlichen Eingabemethoden funktionieren. Komplexe Touch-Gesten und Drag-and-Drop-Interaktionen müssen grundsätzlich durch einfachere Zeigereingaben ersetzt werden können. Aktionen sollen möglichst nicht bereits beim Drücken eines Elements unwiderruflich ausgelöst werden. Bedienelemente müssen außerdem ausreichend große oder ausreichend voneinander entfernte Klick- beziehungsweise Touchflächen besitzen. WCAG 2.2 AA sieht dafür grundsätzlich eine Mindestgröße von 24 × 24 Pixeln vor, wobei verschiedene Ausnahmen bestehen.
Auch Sprachsteuerung und bewegungsbasierte Eingaben werden berücksichtigt. Sichtbare Beschriftungen müssen im zugänglichen Namen eines Bedienelements enthalten sein, damit es beispielsweise durch das Aussprechen seiner Beschriftung ausgewählt werden kann. Funktionen, die durch Bewegungen des Geräts ausgelöst werden, müssen grundsätzlich auch anders bedienbar sein.
Ein weiterer Aspekt betrifft zeitliche Einschränkungen und bewegte Inhalte. Zeitlimits müssen unter bestimmten Bedingungen angepasst oder verlängert werden können. Automatisch laufende Animationen, Slider und aktualisierte Inhalte müssen gegebenenfalls pausiert oder gestoppt werden können. Blitzeffekte können epileptische Anfälle auslösen und sind deshalb durch die WCAG begrenzt. Ob ein Effekt die zulässigen Grenzen einhält, muss fachlich geprüft werden.
Was man selbst einfach überprüfen kann
- Die Maus beiseitelegen: Mit Tab zum nächsten Bedienelement wechseln, mit Shift+Tab zurück. Ist immer sichtbar, wo der Fokus liegt? Ist die Reihenfolge nachvollziehbar, und lässt sich jedes Element wieder verlassen? Auch wichtige Informationen, die bei Maus-Hover erscheinen, müssen über die Tastatur erreichbar sein.
- Mobile Menüs mit der Tastatur testen: Die schmale Ansicht aufrufen oder eine externe Tastatur am Mobilgerät verwenden. Lassen sich Menü-Button, Untermenüs, Links und Schließen-Button erreichen und bedienen? Bleibt der Fokusrahmen auf allen Hintergründen sichtbar und ausreichend kontrastreich? Werden fokussierte Einträge bei geringer Fensterhöhe in den sichtbaren Bereich gescrollt?
- Bedienelemente ausprobieren: Links mit Enter aktivieren, Buttons mit Enter und Leertaste, Checkboxen mit der Leertaste. Aufklappbare Bereiche öffnen und schließen. In Auswahlmenüs, Radiobutton-Gruppen und Reitern die passenden Pfeiltasten verwenden. Popup-Menüs und Dialoge auf ihre Bedienung mit Escape prüfen.
- Bewegung und Zeitlimits beobachten: Lassen sich automatisch laufende Slider oder Animationen pausieren, stoppen oder ausblenden, wenn dies erforderlich ist? Das betrifft insbesondere Bewegungen, die länger als fünf Sekunden laufen und neben anderen Inhalten angezeigt werden, sofern sie nicht wesentlich sind. Wird vor dem Ablauf eines Zeitlimits eine Möglichkeit zum Verlängern angeboten, soweit erforderlich?
Verständlichkeit
Verständlichkeit betrifft sowohl die Inhalte als auch das Verhalten einer Webseite. Zunächst muss die Sprache der Seite und gegebenenfalls einzelner fremdsprachiger Abschnitte technisch ausgezeichnet sein, damit beispielsweise Screen Reader die passende Aussprache verwenden können.
Die Bedienung soll außerdem vorhersehbar und konsistent sein. Wenn ein Element den Fokus erhält oder eine Eingabe verändert wird, darf dadurch nicht unerwartet eine größere Änderung des Kontextes ausgelöst werden. Wiederkehrende Navigationselemente und Funktionen sollen auf verschiedenen Seiten in einer konsistenten Reihenfolge erscheinen und gleich bezeichnet werden. Das gilt auch für wiederkehrende Hilfefunktionen.
Besonders wichtig ist Verständlichkeit bei Formularen. Eingabefelder müssen passende Beschriftungen oder Anweisungen besitzen. Werden Fehler erkannt, müssen diese verständlich beschrieben und nach Möglichkeit Korrekturvorschläge angeboten werden. Bei rechtlich oder finanziell relevanten Eingaben sowie bestimmten Änderungen gespeicherter Daten müssen außerdem geeignete Möglichkeiten zur Überprüfung, Korrektur oder zum Rückgängigmachen vorhanden sein.
Mit WCAG 2.2 wurden zusätzliche Anforderungen an die Authentifizierung und wiederholte Dateneingaben eingeführt. So sollen Benutzer Informationen, die sie innerhalb eines Prozesses bereits eingegeben haben, grundsätzlich nicht erneut eingeben müssen. Auch die Anmeldung darf nicht ausschließlich von kognitiven Aufgaben wie dem Merken eines Passworts oder dem Lösen eines Rätsels abhängig sein, ohne eine zugängliche Alternative oder Unterstützung bereitzustellen.
Was man selbst einfach überprüfen kann
- Formulare absichtlich unvollständig ausfüllen: Wird verständlich beschrieben, welches Feld ein Problem hat und wie es korrigiert werden kann? Bleiben bereits gemachte Eingaben erhalten?
- Auf Vorhersehbarkeit achten: Führt das Fokussieren eines Elements oder das Ändern einer Auswahl unerwartet zu einer neuen Seite oder einem anderen Kontext? Sind Navigation, Bezeichnungen und Hilfefunktionen auf verschiedenen Seiten konsistent?
- Einen Vorgang vollständig durchgehen: Lassen sich wichtige Angaben vor dem endgültigen Absenden überprüfen und korrigieren? Werden Daten innerhalb desselben Ablaufs unnötig erneut verlangt? Unterstützt die Anmeldung beispielsweise Passwortmanager und das Einfügen von Zugangsdaten?
Robustheit
Eine robuste Webseite funktioniert mit unterschiedlichen Browsern und Hilfsmitteln wie Screenreadern. Entscheidend ist, dass diese die Inhalte und Bedienelemente zuverlässig erkennen und wiedergeben können.
Interaktive Elemente müssen so umgesetzt sein, dass ihr Name, ihre Funktion und ihr aktueller Zustand programmatisch erkannt werden können. Ein Button soll also nicht nur wie ein Button aussehen, sondern auch von einem Screen Reader als solcher erkannt werden. Bei komplexeren Elementen wie aufklappbaren Menüs muss außerdem erkennbar sein, ob sie gerade geöffnet oder geschlossen sind.
Auch dynamische Änderungen müssen berücksichtigt werden. Wenn beispielsweise nach dem Absenden eines Formulars eine Erfolgsmeldung erscheint, muss diese von assistiven Technologien erkannt werden können, ohne dass Benutzer den Fokus manuell darauf setzen müssen.
Grundsätzlich ist es deshalb sinnvoll, vorhandene HTML-Elemente und etablierte Webstandards zu verwenden. Native HTML-Elemente bringen bereits viele Accessibility-Funktionen mit, die bei selbst entwickelten Komponenten erst zusätzlich implementiert werden müssten.
Ob das zuverlässig funktioniert, lässt sich durch bloßes Ansehen nicht feststellen. Dafür braucht es eine technische Prüfung und Tests mit assistiven Technologien, möglichst gemeinsam mit Menschen, die diese im Alltag verwenden.
Glossar
| Kürzel | Name | Bedeutung |
|---|---|---|
| W3C | World Wide Web Consortium | Organisation, die Webstandards entwickelt, darunter die WCAG. |
| WAI | Web Accessibility Initiative | Initiative des W3C für Barrierefreiheit im Web; entwickelt Guidelines und unterstützende Materialien. |
| WCAG | Web Content Accessibility Guidelines | Internationale Richtlinien mit überprüfbaren Anforderungen an die Barrierefreiheit von Web-Inhalten. |
| WZG | Web-Zugänglichkeits-Gesetz | Österreichisches Bundesgesetz zur Barrierefreiheit von Websites und mobilen Anwendungen des Bundes und weiterer erfasster öffentlicher Stellen. |
| BaFG | Barrierefreiheitsgesetz | Österreichisches Gesetz mit Barrierefreiheitsanforderungen für bestimmte Produkte und Dienstleistungen; setzt die EU-Richtlinie 2019/882 um. |
| FFG | Österreichische Forschungsförderungsgesellschaft | Prüft Webseiten und Apps des Bundes auf Barrierefreiheit und unterstützt öffentliche Stellen bei der Umsetzung. |
| OCG | Österreichische Computer Gesellschaft | Österreichischer Verein für Informatik, der das WACA-Zertifikat mitentwickelt hat. |
| WACA | Web Accessibility Certificate Austria | Unabhängiges Zertifikat für Barrierefreiheit im Web auf Grundlage der WCAG; ersetzt keine gesetzlichen Pflichten. |
Quellen & Werkzeuge
- EN 301 549, Abschnitt 7.3: Bedienelemente für Untertitel und Audiodeskription
- WCAG 2.2: Robustheit und Kompatibilität
- WAI: Textalternativen für nicht-textuelle Inhalte
- WAI: Alt-Text-Entscheidungsbaum
- WAI: Schmale Darstellung und Umbruch (Reflow)
- WAI: Textvergrößerung
- WAI: Sichtbarer Tastaturfokus
- WebAIM: Keyboard Accessibility
- WAI: Kontrast von Bedienelementen und Link-Unterstreichungen
- WAI: Mindestkontrast für Text
- WebAIM Contrast Checker
- Global Accessibility Awareness Day: Aktionstag zur Sensibilisierung für digitale Barrierefreiheit.