Barrierefreies Webdesign - ein Gewinn für alle
Vorteile und Nutzen von barrierefreiem Webdesign
Inhaltsverzeichnis
Folgende Themen werden hier besprochen:
- Barrierefreie Nutzung digitaler Inhalte
- Barrierefreies Webdesign oder eher barrierearm?
- Optimale Schriften und Schriftgrößen für barrierefreies Webdesign
- Links und Titel-Tags
- ALT-Texte für Bilder
- Nutzen und Vorteile durch barrierefreies Webdesign
- Gibt es barrierefreies JavaScript?
Barrierefreie Nutzung digitaler Inhalte
In den nächsten Zeilen möchte ich Ihnen einmal anhand einiger Beispiele schildern, worum es bei barrierefreiem Webdesign eigentlich geht und worin die Vorteile für alle liegen. Da in diesen Zeilen englische Begriffe, Auszeichnungskürzel und Fremdwörter benutzt werden, habe ich diese mit einem leicht gepunkteten Unterstrich versehen. Wenn Sie mit Ihrem Mauszeiger drüber fahren, erscheint eine Erklärung zu diesem Begriff.
Beim Besuch von Web-Seiten treffen wir zunehmend auf moderne Medienformate, wie zum Beispiel: Videos, Musik-Dateien, Flash-Applikationen oder Kontaktformulare. Unter Umständen müssen dazu Zusatzprogramme wie der Flash-Player oder der QuickTime-Player geladen und installiert werden. Geschieht dies nicht, können entsprechende Inhalte nicht dargestellt werden. Somit hat der Betreiber einer Website einige potenzielle Kunden vergrault. Um die Problematik und deren Lösung besser zu verstehen, tauchen wir doch einmal gemeinsam etwas tiefer in die Materie ein. Es lohnt sich für Sie.
Barrierefreies Webdesign oder eher barrierearm?
Oft weisen barrierefreie Webseiten ein sehr schlichtes und einfaches Design auf. Auf Laufschriften, aufwendige Grafiken und automatische Bildwechsel, die durchaus einen Mehrwert bieten können, wird verzichtet. Da bei einem Produktverkauf aber die Optik mit entscheidet, muss man hier den idealen Kompromiss finden — nicht immer ein leichter Weg.
Um barrierefreie Webseiten zu erstellen, sollten Inhalte um eine alternative Beschreibung (Produkt- oder Dienstleistungsbeschreibungen als PDF oder als WORD-Dokument) oder um eine Sprachdatei ergänzt werden. Auch die Möglichkeit, eine Seite invertiert – also mit weißer Schrift auf schwarzem Hintergrund – anzuschauen, erleichtert das Erfassen der Inhalte enorm. Bei barrierearmen Webseiten versucht man zumindest die bekanntesten Annehmlichkeiten wie ein Kontaktformular (mit JavaScript) oder eine automatische Schriftgrößenanpassung (per CSS-Steuerungsdatei) anzubieten.
Bilder sagen oft mehr als tausend Worte. Was aber, wenn diese nicht erfasst werden können? Für diesen Fall gibt es die Möglichkeit, sich den Text „vorlesen“ zu lassen. Dazu wird eine abspielbare Audio-Datei im .wav-Format hinterlegt. Leider hat sich hier noch kein Standard wirklich durchgesetzt.
Blinde Menschen benutzen zur Erfassung von Web-Inhalten einen sogenannten „Screenreader“. Hierbei wird besonders deutlich, dass in diesem Fall nur Textinhalte relevant sind. Sämtliche Grafiken verfehlen somit ihre verkaufsfördernde Wirkung.
Optimale Schriften und Schriftgrößen für barrierefreies Webdesign
Textinhalte sollten mühelos zu erfassen sein. Dazu wird die Skalierung von Textinhalten „flexibel“ gestaltet. Aus festen Pixel-Angaben werden individuell veränderbare „em's-Angaben“. Beispiel: Eine 16 Pixel große Schrift entspricht genau einem Wert von „einem em“.
Des Weiteren achtet man auf einen maximalen Schriftkontrast — also, schwarze Schrift auf weißem Hintergrund. Um die Leserlichkeit aufzuwerten, haben sich im Internet sogenannte „serifenlose Schriftarten“ bewährt. Dazu zählen: Arial, Verdana und einige andere mehr.
Beispiel:
Hier ein Schrift-Beispiel der serifenlosen Schriftart: Arial
Hier ein Schrift-Beispiel der serifenhaltigen Schriftart: New Times Roman
An diesem Beispiel erkennt man wunderbar, dass für die Texterkennung an Bildschirmen offensichtlich die Schriftart „Arial“ am besten geeignet ist. In Printmedien jedoch ist die serifenhaltige Schriftart „New Times Roman“.
Links und Titel-Tags
Link-Texte sollten bei barrierefreiem Webdesign bestenfalls selbsterklärend sein, oder gängige Oberbegriffe enthalten. Zusätzlich kann man in den optional zu setzenden Title-Tags eine kurze Seitenbeschreibung der nächsten Seite integrieren. So kann der Besucher schon im Vorfeld entscheiden, ob sich der Besuch der nächsten Seite lohnt.
ALT-Texte für Bilder
Da Bilder/Fotos, von blinden Menschen nicht erfasst werden können, sollte für technische Hilfsmittel wie ein Screenreader zumindest ein sogenannter „ALT-Text“ (Alternativtext) verfasst werden. Hier kann man in einem Satz kurz beschreiben, was auf dem Bild zu sehen ist. Zusätzlich bietet sich noch die Verwendung eines Title-Tag, für erweiterte Informationen an.
Nutzen und Vorteile durch barrierefreies Webdesign
Barrierefreies Webdesign bedeutet, dass man sich mit den Belangen aller Menschen auseinandersetzt. Die Besonderheiten im Web berücksichtigt und klar verständliche Informationen bereitstellt. Automatisierte Abläufe werden nur spärlich eingesetzt, alternative Informationen bereitgestellt.
Damit Ihre Website ein Gewinn für alle wird, möchte ich Ihnen hier kurz die Vorteile nennen:
- Bei barrierefreien Webseiten können Inhalte deutlich schneller erfasst werden
- Das nutzt nicht nur körperlich eingeschränkten Menschen, sondern jedem
- Strukturierte Daten helfen auch den Suchmaschinen, Inhalte besser zu verarbeiten
- Bei barrierefreien Webseiten macht der erneute Besuch, noch mal so viel Spaß
Barrierefreies JavaScript?
Ob es tatsächlich barrierefreies JavaScript gibt, ist auch unter Profis umstritten. Möchte man als Besucher einen speziellen Benutzungs-Service genießen, kommt man um JavaScript schwer herum. Benutzer, die JavaScript in ihrem Browser deaktiviert haben, können einige Funktionen nicht sehen, beziehungsweise, nicht ausführen. Der Service am Mensch und an seinen Kunden endet hier abrupt.
Wenn Sie Fragen zum Thema barrierefreies Webdesign haben, oder Ihren vorhandenen Webauftritt einmal bewertet haben möchten, freue mich auf Ihren Anruf oder eine E-Mail.
5/5