Webdesign, Tutorials und mehr - Webmasterpro.de

Webmasterpro » Artikel » Entwicklung » HTML » Barrierefreiheit

Barrierefreiheit

Exzellenter Artikel

Was ist eigentlich "Barrierefreiheit"?

Barrierefreiheit (englisch: accessibility) beschreibt die uneingeschränkte Nutzung von Websites unabhängig von körperlichen oder technischen Möglichkeiten. Dabei ist barrierefrei nicht nur behindertengerecht, sondern auch altersgerecht. Eine gute Webseite sollte auch stets barrierefrei sein. Wer also gutes Webdesign schaffen will, sollte sich dem Themenfeld "Barrierefreiheit" auf keinen Fall verschließen.

Die technischen Barrieren betreffen vor allem die viele möglichen Ausgabegeräte und -konfigurationen mit denen man Webseiten betrachten kann.

Viele Regierungen und öffentliche Einrichtungen schreiben bei einer Ausschreibung für eine Webseite die strikte Beachtung von Barrierefreiheit und Webstandards vor.

WCAG

Die Web Content Accessibility Guidelines (WCAG) sind Richtlinien der Web Accessibility Initiative (WAI) des World Wide Web Consortium (W3C), um die Erstellung barrierefreier Websites zu regeln. Solche Websites sind dann auch für Menschen mit sensorischen und motorischen (und in gewissem Rahmen mentalen) Einschränkungen zugänglich, d.h. sie können die angebotenen Informationen erfassen und notwendige Eingaben tätigen. Die WCAG sind der Kern zahlreicher Spezifikationen, die die WAI zur Förderung eines barrierefreien Internets erarbeitet hat.

In Deutschland steckt die praktische Umsetzung dieser Richtlinien noch im Anfangsstadium und wird seit 2002 durch die gesetzliche Verankerung in der Barrierefreie Informationstechnologie-Verordnung (BITV) gefördert.

Barrieren

Folgend sind mögliche Barrieren aufgeführt von denen die ersten körperlicher und die letzte technischer Natur ist.

Dazu werden jeweils Anforderungen an das barrierefreie Webdesign beschrieben, mit denen die Barrieren verringert werden können.

Sehstörung

Beispiele: Rot-Grün-Blindheit, Blau-Gelb-Blindheit, Farbblindheit

Hilfe: Schriftvergrößerung im Browser, Bildschirmlupen

Problem: Kleine Schriften und Bilder sind schlecht zu lesen und besonders helle Flächen können blenden (wie z.B. ein komplett weißer Hintergrund). Bei Farbblindheit gehen Farbinformationen verloren, was besonders zum Problem wird wenn gleich helle Farben verwendet wurden. Bei mangelhaft umgesetzter Schriftvergrößerung kann der Inhalt nicht mehr auf die Seite passen: Das Design wird dabei oft zersprengt und mühsames horizontales Scrollen wird nötig.

Anforderungen:

• Schrift:
  
  • Groß und skalierbar (Verwendung von px oder em)
  • Flexibles Design, das sich an die Größe des Inhaltsbereichs, der Fenstergröße und der Auflösung anpasst (Pixelgenaues Design ist nicht barrierefrei)
  • Keine Schriftgrafiken (da i. d. R. keine Schriftvergrößerung möglich ist)
  • Kontrastreich zum Hintergrund (Farbblindheit)
  • Klare, schnörkellose Fonts (besonders Fließtext am besten serifenlos)
  • Keine blinkenden oder animierten Texte
  • Markierung physisch statt farbig (also fett oder kursiv)
• Vermeidung von Captchas - Alternativen: Akustische Captchas, Rechencaptchas

Blindheit

Problem: Keine visuelle Wahrnehmung

Hilfe: "Screenreader" (aber: nur Wiedergabe reinen Textes d.h. keine Bilder, Animationen, Videos, Flash-, Javascript-, Java-Applikationen)

Anforderungen:

• Semantisch korrekter Einsatz der strukturierenden HTML-Elemente mit sinnvoller Struktur und Gliederung:
  • Einhaltung von Überschrifthierarchien: (h1, h2, h3,...)
  • Absätze (p) und Listen (ul, ol, li)
  • Tabellen nur für wirklich sinnvoll tabellarisch darstellbare Daten
  • ...
• Aussagekräftige Alternativinhalte für multimediale Seitenelemente:
  
  • alt-Attribute für Bilder (dieser Text wird dann statt Bildern dargestellt): Präsentationsgrafiken sollten leere alt-Attribute (alt="") besitzen, Grafiken mit informativen Wert dagegen den Inhalt wiedergeben
  • Echte alternativen zu Flash bieten, nicht nur eine Benachrichtigung
  • Inhalt Videos und Animationen beschreiben
• Trennung von Inhalt und Design
• möglichst Vermeidung von Text in Grafiken
• Verwendung von Meta-Informationen, z. B. zur Festlegung der Sprache (<meta name="language" content="de">)

Motorische Einschränkung

Problem: eingeschränkte Kontrolle über Körperbewegungen. Je nach Art kann es somit zu sehr ruckartigen oder langsamen/schwerfälligen Mausbewegungen führen: Klicks auf kleine Schaltflächen schwierig auszuführen (besonders Flash-Seiten sind diesbezüglich anfällig)

Hilfen: Tastaturen werden statt Mäuse benutzt, spezielle Tastaturen

Anforderungen:

• Schaltflächen und Verlinkungen dürfen nicht zu klein im anklickbaren Bereich ausfallen
• Beispielsweise eine Navigation sollte nicht über die komplette Seite verteilt sein, da es zu unnötig weiten Mauswegen führt
• Alle Felder sollten sinnvoll/logisch mit der Tastatur erreichbar sein (Pfeiltasten)
• Bei Formularen sollten Beispielangaben vorhanden sein, da Ziffern durch Mehrfachtastendruck (z.B. @) eine Hürde darstellen können
• Dynamische Drop-Down-Menüs: Zeitverzögert, damit sich der Nutzer erlauben kann, auch vom Feld "abzurutschen"
• Verzicht auch auf unnötige Javascript-, Flash-, etc. -Spielereien
• Keine Forderung von Doppelklicks

Gehörlosigkeit

Problem: Akustische Signale sind nicht wahrnehmbar

Anforderungen:

• es darf keine Information rein als akustischen Ausgabe vorhanden sein
• die Sounds sollten durch optische Effekte unterstützt werden (z.B. Buttons: Mouseover-Effekt)
• Videoclips mit (optionalem) Untertitel oder Gebärdensprache

Kognitive Einschränkung

Problem: Barrieren, die durch geistige Fähigkeiten bedingt sind - nicht explizit auf geistig Behinderte bezogen

Anforderungen:

• für Unwissende auf einem bestimmten Themengebiet muss die Website trotzdem in der Bedienung verständlich sein
• Verzicht auf unnötige Fremdwörter und komplizierten Satzbau
• Verständliche und klare Seitenstruktur und Navigation
• Vermeidung von Linkbezeichnungen wie "hier klicken" - exakte Bezeichnungen lassen sich schneller lokalisieren und prägen sich besser ein und erleichtern dadurch den späteren wiederholten Besuch
• Zeichen- und Rechtschreibprüfung in Formularen wegen Tippfehlern und zur Hilfe bei Legasthenikern

Plattformabhängigkeit

Problem: Abhängigkeit der Darstellung von der Plattform (d.h. Software, Hardware, Monitor, Auflösung, Betriebssystem, installierte Farbpalette, Browser(version), Plugins)

Anforderungen:

• Inhalt und Design trennen
  • HTML nur zur Strukturierung verwenden
  • Mit CSS Design und Layout festlegen
  Vorteile dieser Trennung: Schonender für Screenreader die nur reinen Text vorlesen wollen und Designänderungen sind einfacher (nur die CSS-Datei muss verändert werden)
• Flexibles Layout (Anpassungsfähig an Fenstergröße des Browsers / Auflösung)
• Cross-Browser-Kompatibilität (d.h. alle gängigen Browser werden ausreichend unterstützt)

Werkzeuge zum Sicherstellen der Barrierefreiheit

CSS-Medientypen

Externe StyleSheet-Definitionen können mit verschiedenen Medientypen verbunden werden. Zum Beispiel screen für den Bildschirm und print für die Druckversion. Genauso können auch Medientypen für Screenreader und Co. im media-Attribut der Verlinkung festgelegt werden.

Externe Links

Es gibt einige Webdesign-Validatoren, die Seiten auf ihre Barrierefreiheit testen:

• WAVE
• ATRC Web Accessibility Checker

Einen Überblick über viele Werkzeuge gibt das W3C unter Web Accessibility Evaluation Tools und Accessibility Checkers and Tools.

Die Firefox-Erweiterung Firefox Accessibility Extension hilft Webdesignern beim Erstellen von barrierefreien Webseiten.

Kommentare: Barrierefreiheit