Barrierefreies Webdesign

Grundlagen, Analyse, Optimierung(2006)

Diese Datei ist unter einer Creative Commons Lizenz verffentlicht.

Die Details finden Sie hier: http://creativecommons.org/licenses/by-nc-nd/3.0/de/Sollten Sie Fragen zu dieser Lizenz oder zur korrekten Verwendung des Dokuments haben, senden Sie bitte eine E-Mail an kontakt@edaktik.de

Barrierefreies Webdesign, Teil 1

Theoretische Grundlagen, Analyseaspekte, Werkzeuge und Quellen

Teil 1: Grundlagen
Was heit barrierefrei?

Bercksichtigung verschiedener Nutzergruppen

Bercksichtigung verschiedener Ausgabegerte

Allgemeine Zugnglichkeit

Durchdachte Informationsarchitektur

Teil 1: Grundlagen
Barrierefreiheit fr wen?

Menschen mit visuellen Einschrnkungen

Menschen mit auditiven Einschrnkungen

Menschen mit motorischen Einschrnkungen

Menschen mit Lernbehinderung bzw. Lese-Schreibschwche

Suchmaschinen

Verschiedene Ausgabegerte

Fr alle

Teil 1: Grundlagen
Juristische Texte

Barrierefreie Informationstechnik Verordnung (BITV)

(http://www.einfach-fuer-alle.de/artikel/bitv/)Behindertengleichstellungsgesetz (BGG)

(http://www.gesetze-im-internet.de/bgg/index.html)Landesgleichstellungsgesetze und Verordnungen

(z.B. NRW: http://wob11.de/nrw-bitv.html)Sozialgesetzbuch IX (SGB IX)

Bildschirmarbeitsverordnung (BildschArbV)

Teil 1: Grundlagen
Weitere wichtige Texte

Web Content Accessibility Guidelines (WCAG) der Web Accessibility Initiative (WAI)

(http://www.w3.org/WAI/intro/wcag.php)(http://www.w3.org/Talks/WAI-Intro/slide1-0.html)ISO 14915, ISO 23973

(Multimediale Anwendungen)ISO Technical Specification 16071

(Gestaltung von Bro- und Lernsoftware sowie Webauftritten)

Teil 1: Grundlagen
WCAG 1 zusammengefasst

Prioritt 1 - Konformittsstufe A:MUSS-Kriterien: Grundlegende Erfordernisse fr eine basale Barrierefreiheit

Prioritt 2 - Konformittsstufe AA:SOLL-Kriterien: Erleichterung der Zugnglichkeit fr bestimmte Nutzergruppen

Prioritt 3 Konformittsstufe AAA:DARF-Kritierien: Aufhebung nachrangiger Zugangsprobleme

Teil 1: Grundlagen
WCAG 1 Checkliste Prioritt 1 (Auszug)

Bilder, Animationen, Imagemaps, Grafiken etc: Einen beschreibenen Text zur Verfgung stellen.

Farben sind keine Informationstrger.

Klare, verstndliche Texte.

Tabellen logisch strukturieren.

Frames logisch benennen.

Seiten auch ohne Scripte und Applets nutzbar machen.

Teil 1: Grundlagen
WCAG 1 Checkliste Prioritt 2 (Auszug)

Kontrastierende Farbkombinationen.

Inhalt (Markup) und Layout (CSS) trennen.

Tabellen fr Daten, nicht fr Layout.

Relative Greneinheiten.

Verstndliche Linktexte, title-Attribut.

Metadaten fr semantische Informationen.

Sitemap und einheitliche Navigation.

Teil 1: Grundlagen
WCAG 1 Checkliste Prioritt 3 (Auszug)

Natrliche Sprache der Site definieren.

Tabulatornavigation und Tastaturbefehle.

Einheitlicher Prsentationsstil der Site.

Zusammenfassung einer Tabelle.

Links gruppieren und Linkgruppen bezeichnen.

Druckbare Zeichen zwischen nebeneinanderstehenden Links.

Teil 1: Grundlagen
WCAG 1 Quellen

Die gesamte WCAG 1-Checkliste (Englisch):http://www.w3.org/TR/WCAG10/full-checklist.html

Quicktips der WAI (Englisch):http://www.w3.org/WAI/quicktips/

Quicktips in Deutsch (sehr verkrzt):http://www.w3.org/WAI/References/QuickTips/qt.de.htm

Teil 1: Grundlagen
BITV zusammengefasst

Prioritt 1 - Konformittsstufen A und AA:MUSS-Kriterien: Grundlegende Erfordernisse fr eine basale Barrierefreiheit

SOLL-Kriterien: Erleichterung der Zugnglichkeit fr bestimmte Nutzergruppen

Prioritt 2 Konformittsstufe AAA:DARF-Kritierien: Aufhebung nachrangiger Zugangsprobleme

Barrierefreies Webdesign, Teil 2

Analyse bestehender Websites Methoden und Werkzeuge

Teil 2: Analyse
Allgemeine Aspekte

Informationsarchitektur: Navigation, Makrostruktur, Mikrostruktur

Datenstruktur: Trennung von Inhalt und Layout, Linearisierbarkeit

Texthinterlegung spezieller Objekte

Kontraste, Farben, Typografie

Textaufbau, Verstndlichkeit

Skalierbarkeit

Teil 2: Analyse
Analyse: Spezielle Elemente

Datentabellen

Formulare

Flash

PDF

Pop-up-Fenster

Teil 2: Analyse
Optische Analyse in grafischem Browser

Bilddarstellung deaktivieren.

Schriftgre variieren.

Bildschirmauflsung und/oder Gre des Browserfensters ndern.

Bildschirmfarben auf Graustufen einstellen oder Website in Graustufen ausdrucken.

Navigieren ohne Maus, sondern mit Tastatur.

Teil 2: Analyse
Analyse mit speziellen Browsern

Webseite mit Screenreader und/oder VoiceBrowser prfen auf:Sind die gleichen Informationen zur Verfgung wie fr den visuellen Browser?

Macht die zur Verfgung stehende Information Sinn in ihrer Reihenfolge?

Werkzeuge:Lynxviewer: Emuliert einen Screenreader: http://www.delorie.com/web/lynxview.html

Webformator: Screenreader-Plugin fr IEhttp://www.webformator.de

Teil 2: Analyse
Automatisierte Werkzeuge

Website mit einem der unten folgenden Werkzeuge prfen*:A-Prompt: Freeware (Engl.) fr Windows; berprft und repariert HTML/XHTML: http://www.aprompt.ca/

Colorfilter: Online-Tool (kostenfrei, Engl.); simuliert Farbfehlsichtigkeiten: http://colorfilter.wickline.org

Wave: Online-Tool (Engl.), das eine Site linearisiert und auf Fehler prft:http://www.wave.webaim.org/index.jsp

* Ergnzung zur manuellen Prfung

Teil 2: Analyse
Weitere Werkzeuge

Teil 2: Analyse
Quellen

Einfach fr Alle: www.einfach-fuer-alle.de

Barrierekompass: www.barrierekompass.de

Aktionsbndnis fr barrierefreie Informationstechnik: www.abi-projekt.de

Web Accessibility Initiative (WAI) des W3C: http://www.w3.org/WAI/

Barrierefreies Webdesign, Jan Eric Hellbusch, dpunkt.verlag

Barrierefreies Webdesign, Teil 3

Praktische Umsetzung barrierefreier Techniken in XHTML und CSS

Teil 3: Praxis
Informationsarchitektur I

Internet = Kommunikation und InformationMakrostruktur:Mglichst geringe Strukturtiefe

Thematische Zusammenstellung von Bereichen

Mikrostruktur:Logische Verteilung der Information: Das Wesentliche am Anfang.

Zusammenhngende Informationsblcke

Beispiel: www.hbz-nrw.de

Logische Verteilung der Information:

Teil 3: Praxis
Informationsarchitektur II

Navigationsziele:Wo befinde ich mich?

Wo kann ich hin?

Wo will ich hin?

Navigationsziele:- bersicht Gesamtangebot + Teilbereiche- Orientierung innerhalb eines Bereichs- Gezieltes Aufrufen einzelner Informationen oder Funktionen

Eigenschaften der Navigation:- Wahrnehmbarkeit: Farben und Kontraste, Schrift, Hover-Effekte- Bedienbarkeit: Zugnglich auch mit Tastatur, Textlinks- Verstndlicheit: Eindeutige Begriffe

Teil 3: Praxis
Informationsarchitektur III

Eigenschaften der Navigation:

(a) WahrnehmbarkeitPosition

bliche Leserichtung beachten

Codestruktur

Navigationen als Listen

Hier geht es zum Ziel

Teil 3: Praxis
Informationsarchitektur IV

Eigenschaften der Navigation:

(a) Wahrnehmbarkeit (Forts.)Farbe und Kontrast

Deutliche Farbwahl, keine Komplementrfarben

Guter Kontrast

Farbwechsel bei Statuswechsel (per CSS)
a:link, a:visited, a:hover, a:active, a:focus

Teil 3: Praxis
Informationsarchitektur V

Eigenschaften der Navigation:

(b) BedienbarkeitHover-/FokushervorhebungCSS: a:hover a:focus

TabulatorXHTML: Attribut tabindex (Links, Formularfelder, clientseitige Imagemaps)
...
...

Teil 3: Praxis
Informationsarchitektur VI

Eigenschaften der Navigation:

(b) Bedienbarkeit (Forts.)ggf. AccesskeyXHTML-Attribut accesskey (Links, Formularfelder, clientseitige Imagemaps)
...
...

Skalierbarkeit (relative Maangaben)

Teil 3: Praxis
Informationsarchitektur VII

Eigenschaften der Navigation:

(c) VerstndlichkeitKlare Aussage des Linktextes

Verstndliches Sprachniveau (ggf. zielgruppenspezifisch)

Teil 3: Praxis
Textstruktur I

Verstndlichkeit: Zielgruppenspezifisch angepasst

Struktur: Logische/semantische Auszeichnung:Wichtigste berschrift
Zweitwichtigste berschrift, Subheadline
Text im Fettschnitt: semantisch bedeutungslos.
Text stark hervorgehoben: semantisch markiert.

Teil 3: Praxis
Textstruktur II

Lineare Folge des Textes entspricht logischer Lesefolge

Teil 3: Praxis
Bilder, Animationen, Imagemaps I

Beschreibender Text fr Bild und LinkAttribut alt

Attribut titleLinktext

Attribut longdesc

Teil 3: Praxis
Bilder, Animationen, Imagemaps II

Beschreibender Text fr Imagemap

...

Teil 3: Praxis
Bilder, Animationen, Imagemaps III

Beschreibender Text fr OBJECT
Die Karte fr unsere Route

Teil 3: Praxis
Farben und Kontraste I

Farben ohne Informationswert

Hier klickenHier klickenHier klickenWeitere InfosSeitenbersichtKontaktSo nicht:

Sondern so:

Teil 3: Praxis
Farben und Kontraste II

Lesbarkeit ohne Farben

So nicht:

Sondern so:

Teil 3: Prax