Aufgrund der auslaufenden Übergangsfrist des Behindertengleichstellungsgesetzes sind in den letzten Wochen viele Unklarheiten zum Thema Barrierefreiheit aufgetreten.
Trotz Vorträgen und zahlreichen Aussendungen seitens der Wirtschaftskammer und der Fachgruppen mangelt es nach wie vor an konkreten Anforderungen für die Barrierefreiheit von Websites.
Internationale Richtlinien
Im Allgemeinen stützt sich das Österreichische Gesetz auf die internationalen Web Content Accessibility Guidelines (kurz WCAG) der W3C.
Diese Richtlinien beschreiben den Umgang mit nahezu jeder Form von Inhalt auf Websites sowie Vorschläge zur technischen Umsetzung. Aus Sicht von Webdesignern und Entwicklern sind diese Richtlinien schon schwer zu verstehen, für Betreiber einer Website in den meisten Fällen völlig nutzlos.
Prinzipien der Barrierefreiheit im Web
Was sind nun die wesentlichen Aspekte der Barrierefreiheit auf die Sie bei Ihrer Website achten müssen, wie können Sie Ihre Website überprüfen und was können Sie verbessern?
Die erweiterte Zielgruppe
In erster Linie sollten Sie den barrierefreien Zugang zu Ihrer Website als Chance sehen zusätzliche Kunden damit erreichen zu können. Die Richtlinien beziehen sich nämlich auf einen großen Anteil unserer Bevölkerung. Es geht dabei um Einschränkungen verschiedener Arten:
- visuell
- auditiv
- motorisch
- sprachlich
- kognitiv
- neurologisch
in verschiedenen Ausprägungen und Kombinationen.
Dazu zählen auch altersbedingte Einschränkungen des Sehens oder Hörens, wie sie bei einem Großteil älterer Menschen auftreten.
Die vier Prinzipien der Barrierefreiheit
Aus der oben angeführten Zielgruppe resultieren die vier Eckpfeiler:
- Wahrnehmbarkeit: Die Informationen auf Ihrer Website müssen je nach Ausgabeform sichtbar, hörbar oder tastbar sein.
- Bedienbarkeit: Der Benutzer muss die Möglichkeit haben innerhalb der Website zu navigieren.
- Verständlichkeit: Sowohl die Information als auch die Bedienung müssen für den Benutzer verständlich sein.
- Robustheit: Die Inhalte müssen „robust“ genug sein um von unterschiedlichsten Geräten interpretiert werden zu können.
Inhalte der Website für unterschiedliche Ausgabeformen anpassen
Abhängig davon ob eine Website auf einem Bildschirm in normaler Größe, stark vergrößert, über einen Screenreader oder eine Braillezeile ausgegeben wird sind unterschiedliche Darstellungen der Inhalte zu bedenken.
1. Ausgabe von Text
Text ist in den meisten Fällen der wichtigste Inhalt und die Art von Inhalt, die sich am besten an verschiedene Ausgabeformate anpasst. Trotzdem ist vieles zu beachten.
1.1. Schriftgröße
Jeder moderne Browser bietet die Möglichkeit die Darstellung zu vergrößern. Laut Anforderung soll es möglich sein die Schriftgröße zu verdoppeln ohne dabei den Inhalt oder die Funktion zu zerstören.
Testen Sie Ihre Website:
Drücken Sie auf der Tastatur Strg + ( Cmd + auf Mac ) um zu vergrößern bzw Strg 0 um wieder zur Originalgröße zu kommen.
Ist Ihre Website bei 200% noch verwendbar?
1.2. Kontrast
Sorgen Sie für ausreichenden Kontrast zwischen Schriftfarbe und Hintergrund. Für normalen Text wird ein Kontrastverhältnis von 4,5:1 empfohlen, für großen Text wie zB Überschriften reicht 3:1.
Testen Sie Ihre Website:
Unter dem Folgenden Link können Sie das Kontrastverhältnis zwischen Vordergrund und Hintergrund Ihrer Website berechnen.
Color Contrast Ratio Calculator
1.3. Schriftfarbe
Denken Sie an farbenblinde Besucher Ihrer Website und vermeiden Sie Elemente nur durch Farbe hervorzuheben. Wenn beispielsweise Links im Text nur durch die Farbe hervorgehoben werden und weder Helligkeitsunterschied noch eine zusätzliche Hervorhebung vorkommt sind nicht erkennbar.
Testen Sie Ihre Website:
Laden Sie einen Screenshot Ihrer Website auf der folgenden Website hoch und experimentieren Sie mit verschiedenen Filtern. Können Sie alle wichtigen Elemente erkennen?
Color Blindness Simulator
1.4. Struktur
Geben Sie jeder Seite eine Aussagekräftige Überschrift und formatieren Sie diese als Überschrift 1. Somit beschreibt diese den Inhalt der Seite.
Weitere Überschriften definieren Sie hierarchisch als Überschriften 2 und 3 um eine logische Gliederung zu schaffen.
Zusammengehörige Inhalte sollen auch im Quelltext gruppiert werden. Wenn Sie Ihre Website von einem Screenreader vorlesen lassen, sind keine Formatierungen mehr sichtbar, die einen Zusammenhang symbolisieren. Der reine Inhalt muss für sich sprechen.
2. Ausgabe von Bildern
In vielen Fällen tragen Bilder einen wesentlichen Teil der Information. Können diese nicht angezeigt werden, müssen Sie entsprechend reagieren.
2.1. Alternativtext
Ist das Bild für den Inhalt relevant braucht es einen Alternativtext. Dieser wird in einen sogenannten alt-Tag geschrieben und soll den Inhalt des Bildes so gut wie möglich beschreiben.
2.2. Dekoration und Formatierung
Für Bilder die nur der Dekoration oder Formatierung dienen und keinen wesentlichen Inhalt transportieren kann der Alternativtext leer gelassen werden. Somit wird dieses in der Sprach- oder Braille-Ausgabe ignoriert.
Testen Sie Ihre Website:
Sie können in Ihrem Browser Bilder deaktivieren um zu sehen bei welchen Bildern ein Alternativtext angezeigt wird.
Bilder deaktivieren in Chrome
Bilder deaktivieren in Firefox
3. Video und Audio
Sollten Sie Videos auf Ihrer Seite verwenden können Sie diese mit einem Untertitel für gehörlose Menschen zugänglich machen. Für sehbehinderte Menschen besteht hingegen die Möglichkeit einer akustischen Bildbeschreibung oder eines Alternativtextes, der den Inhalt des Videos beschreibt.
Für den Fall, dass Sie Musik auf Ihrer Website ausgeben die länger als drei Sekunden dauert, achten Sie darauf, dass diese unabhängig von der Lautstärkeeinstellung des Computers leiser gestellt oder deaktiviert werden kann.
Bei der Verwendung eines Screenreaders kann es durch die Musik sonst dazu kommen, dass der Inhalt nicht mehr hörbar ist.
Bedienung der Website über die Tastatur
Die Navigation innerhalb der Website sollte über die Tastatur bedienbar sein.
Das bedeutet beispielsweise, dass man mit der Tabulator Taste von Link zu Link sowie auch zu Eingabefeldern springen kann und mit den Pfeiltasten scrollen.
Testen Sie Ihre Website:
Versuchen Sie ohne Maus zu den Kontaktinformationen Ihrer Website zu kommen, sodass ein Interessent Sie anrufen kann.
Achten Sie auch ganz besonders auf Formulare. Sind diese ohne Maus bedienbar?