Digitale Barrierefreiheit

Der Easy Check hilft, einen ersten Überblick über die digitale Barrierefreiheit von Webseiten zu erhalten. Zehn zentrale Aspekte werden dazu manuell geprüft. Im Folgenden werden die einzelnen Prüfschritte kurz erklärt und die zentralen Ergebnisse der Analyse unserer Webseite beschrieben. Grundlage ist die Anleitung der W3C WAI zur Vorgehensweise (https://www.w3.org/WAI/test-evaluate/preliminary/). Es wurden die jeweils empfohlenen Tools zur Prüfung der einzelnen Kategorien verwendet. 

Anforderung: Der Titel der einzelnen Unterseiten soll den Inhalt der Seite aussagekräftig bezeichnen. Seitentitel sollen dem Nutzenden Orientierung bieten: zwischen den Unterseiten der gerade besuchten Webseite, aber auch gegenüber weiteren geöffneten Tabs im Browser. Der Seitentitel wird sichtbar, wenn mit dem Curser über den Tab in der Browserleiste gefahren wird. 

Ergebnis: Zunächst waren bei unseren Seitentiteln nur die Schlagwörter der jeweiligen (Unter)Seite hinterlegt. Beispielsweise "Wassererlebnis", "Familienferien" oder "Veranstaltungen". Die Zuordnung zu uns als Urlaubsort fehlte. Diese Verbesserung wurde bereits vorgenommen, sodass die Seiten nun wie folgt betitelt sind: "Veranstaltungen - Immenstaad".

Anforderung: Für Bilder, die dem inhaltlichen Verständnis oder der Interaktion dienen, ist ein alternativer Text zu hinterlegen. Dieser wird vom Screenreader vorgelesen. Bilder, die lediglich zur optischen Aufwertung der Webseite eingesetzt werden, sind mit alt=" " zu kennzeichnen. 

Ergebnis: Hier besteht aktuell leider keine konsequente Umsetzung. Viele Bilder auf unserer Webseite dienen als Teaser für weiterführende Informationen. Hier ist ein alternativer Text irreführend, da die Teaser bereits Textbausteine enthalten, die vom Screenreader vorgelesen würden. Eine Ausgabe der z.T. sehr ausführlichen Alternativtexte sorgt hier möglicherweise für Verwirrung. Auf einer touristischen Webseite stellt sich darüber hinaus die Frage, welche Bilder dem Verständnis dienen und welche nur zur optischen Verschönerung beitragen, soll der Besucher doch die Urlaubsstimmung fühlen können. Bilder, die wir neu in unsere Datenbank hochladen, versuchen wir korrekt mit alternativen Bildtexten zu hinterlegen. 

Anforderung: Alles, was auf der Webseite wie eine Überschrift aussieht, sollte auch im Markup als solche ausgewiesen sein. Der Seitentitel entspricht i.d.R. Hierarchieebene h1. Es sollten im Verlauf keine Hierarchieebenen übersprungen werden (h1, h2, h3 ...).

Ergebnis: Grundsätzlich ist die Überschriftenstruktur auf unserer Webseite einheitlich gestaltet. H1 entspricht auch auf den Unterseiten unserer Webseite dem Seitentitel. Nicht alle eingebetteten Teaser für weiterführende Informationen, die wie Überschriften aussehen, sind auch als solche gekennzeichnet.

Anforderung: Webseiten haben bei normaler Textgröße einen Mindestkontrast von i.d.R. 4.5:1 aufzuweisen.

Ergebnis: Unser Corporate Design (türkis auf weiß) erfüllt die Vorgabe des Mindestkontrastes nicht. Dies zieht sich dementsprechend durch die gesamte Webseite. Ein weiteres Problem stellen die Teaser aus Bild und Text dar: Hier muss mehr darauf geachtet werden, dass nicht zu helle Schrift auf hellen Bildern steht.

Anforderung: Bei Vergrößerung des Textes treten keine Überschneidungen von Bildern/Textelementen auf. Buttons o.Ä. bleiben nutzbar. Es muss nicht horizontal gescrollt werden, um alle Zeilen lesen zu können.

Ergebnis: Das Zoomen funktioniert auf den meisten Unterseiten überschneidungsfrei. Auf der Seite der Unterkunftssuche verschieben sich allerdings einige Buttons und Formfelder.

Anforderung: Mittels Tastaturbedienung können alle relevaten Elemente bedient werden, z.B. Drop-Down-Menüs. Die Reihenfolge bei der Navigation mittetls Tastatur ist logisch und einheitlich aufgebaut. Der Nutzer muss durch Hervorhebung klar erkennen können, an welcher Stelle auf der Website er sich jeweils befindet.

Ergebnis: Die Navigation mittels Tastatur folgt einer logischen Reihenfolge. Die Hervorhebung erfolgt durch Änderung der Schriftfarbe und farbliche Einrahmung des betreffenden Wortes bzw. Teasers. Die Hervorhebung im Kontaktformular erfolgt allerdings nur sehr schwach (schwarze Linie im unteren Textfeldbereich). Das Kästchen, in dem der Haken zur Akzeptanz der Datenschutzerklärung gesetzt werden muss, wird überhaupt nicht hervorgehoben. Im Bestellformular erfolgt die Hervorhebung durch einen blauen Rahmen. Der Button "Prospekte bestellen" ist allerdings kaum hervorgehoben.

Anforderung: Automatisch startende Bewegtbilder/blinkende Elemente oder sich ständig aktualisierende Informationen, die länger als fünf Sekunden dauern, müssen angehalten werden können.

Ergebnis: Auf unserer Webseite sind derartige Elemente nicht vohanden.

Anforderung: Multimediale Inhalte können mit der Tastatur bedient werden. Videos müssen untertitelt sein, wobei die automatisch erstellten Untertitel unzureichend. Wenn möglich Transkripte/Audiodeskriptionen verfügbar.

Ergebnis: Videos befinden sich auf unserer Webseite einmal im Rahmen der "Immenstaader Flüsterpost" und der Videos von "Leo Lustig". Bei letztereren wird nicht gespochen, sondern nur Musik gespielt. Bei den Videos im Rahmen der Immenstaader Flüsterpost erfolgt nur eine automatische Untertitelung auf YouTube.