Barrierefreiheit

Exzellenter Artikel
5 | 12243 Aufrufe
Sie können diese Wikiseite nach der Anmeldung auf Webmasterpro bearbeiten. Helfen Sie mit und verbessern Sie "Barrierefreiheit" mit Ihrem Wissen!

Anzeige Hier werben

Niemand darf wegen seiner Behinderung benachteiligt werden.

Deutsches Grundgesetz (Art. 3.3)

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

Bild zu Barrierefreiheit
W3C-Auszeichnung für barrierefreie Websites

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

Bild zu Barrierefreiheit
Beispiel für eine schlecht gewählte Navigation: Ist wirklich jedem klar was die Symbole bedeuten?

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)

Tipp: Baut man seine Seite schon von vorne herein valide (Validator) und semantisch korrekt auf, bekommt man automatisch eine viel barrierefreiere Webseite und spart sich damit viel Zeit.

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.

Siehe dazu folgenden Artikel: CSS in HTML einbinden

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

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.


Wikiseite bearbeiten

Diese Seite kann von jedem registrierten Benutzer bearbeitet werden. Bisher haben 5 Personen an der Seite "Barrierefreiheit" mitgewirkt.

Sie haben einen Fehler entdeckt oder möchten etwas ergänzen? Dann können Sie nach der Anmeldung "Barrierefreiheit" hier bearbeiten.

Mitarbeiter
  • arbeitet seit längerem als Webdesigner und vor allem -entwickler. Er ist Webmaster von Webmasterpro.de und leitet den Flashcounter-Service.
  • Meine Schwerpunkte liegen im Bereich Grafikdesign, SEO und Management. Seit sieben Jahren bin ich als Geschäftsführer der Team23 GbR tätig, die Webdesign in Augsburg anbietet, sowie Webmasterpro.de betreut.
  • hat keine Beschreibung angegeben. Eine Beschreibung kann man unter dem Punkt "Profil bearbeiten" im Kontrollzentrum eintragen.
  • Dank meiner sehr guten (X)HTML Kenntnisse stehen sauberer und browserübergreifender Code bei der Webentwicklung im Vordergrund. Von der normalen Website bis hin zum individuell angepassten Webdienst realisiere ich die Kundenwünsche. Dank kompetenter Partner decke ich fast die kompletten Print- und Non-Print Bereiche ab.
  • Kinderturnen - Sport Spiele für Kinder