Barrierefreies Webdesign

Barrierefreies Webdesign Grundlagen, Analyse, Optimierung (2006) Diese Datei ist unter einer Creative Commons Lizenz veröffentlicht. 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 heißt barrierefrei?

Berücksichtigung verschiedener Nutzergruppen
Berücksichtigung verschiedener Ausgabegeräte
Allgemeine Zugänglichkeit
Durchdachte Informationsarchitektur

Teil 1: Grundlagen Barrierefreiheit für wen?

Menschen mit visuellen Einschränkungen
Menschen mit auditiven Einschränkungen
Menschen mit motorischen Einschränkungen
Menschen mit Lernbehinderung bzw. Lese-Schreibschwäche
Suchmaschinen
Verschiedene Ausgabegeräte

»» Für 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 Büro- und Lernsoftware sowie Webauftritten)

Teil 1: Grundlagen WCAG 1 zusammengefasst

Priorität 1 - Konformitätsstufe A:

„MUSS“-Kriterien: Grundlegende Erfordernisse für eine basale Barrierefreiheit

Priorität 2 - Konformitätsstufe AA:

„SOLL“-Kriterien: Erleichterung der Zugänglichkeit für bestimmte Nutzergruppen

Priorität 3 – Konformitätsstufe AAA:

„DARF“-Kritierien: Aufhebung nachrangiger Zugangsprobleme

Teil 1: Grundlagen WCAG 1 Checkliste Priorität 1 (Auszug)

Bilder, Animationen, Imagemaps, Grafiken etc: Einen beschreibenen Text zur Verfügung stellen.
Farben sind keine Informationsträger.
Klare, verständliche Texte.
Tabellen logisch strukturieren.
Frames logisch benennen.
Seiten auch ohne Scripte und Applets nutzbar machen.

Kontrastierende Farbkombinationen.
Inhalt (Markup) und Layout (CSS) trennen.
Tabellen für Daten, nicht für Layout.
Relative Größeneinheiten.
Verständliche Linktexte, title-Attribut.
Metadaten für semantische Informationen.
Sitemap und einheitliche Navigation.

Natürliche Sprache der Site definieren.
Tabulatornavigation und Tastaturbefehle.
Einheitlicher Präsentationsstil 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 verkürzt):

http://www.w3.org/WAI/References/QuickTips/qt.de.htm

Teil 1: Grundlagen BITV zusammengefasst

Priorität 1 - Konformitätsstufen A und AA:

„MUSS“-Kriterien: Grundlegende Erfordernisse für eine basale Barrierefreiheit
„SOLL“-Kriterien: Erleichterung der Zugänglichkeit für bestimmte Nutzergruppen

Priorität 2 – Konformitätsstufe 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, Verständlichkeit
Skalierbarkeit

Teil 2: Analyse Analyse: Spezielle Elemente

Datentabellen
Formulare
Flash
PDF
Pop-up-Fenster

Teil 2: Analyse Optische Analyse in grafischem Browser

Bilddarstellung deaktivieren.
Schriftgröße variieren.
Bildschirmauflösung und/oder Größe 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 prüfen auf:

Sind die gleichen Informationen zur Verfügung wie für den visuellen Browser?
Macht die zur Verfügung stehende Information Sinn in ihrer Reihenfolge?

Werkzeuge:

Lynxviewer: Emuliert einen Screenreader: http://www.delorie.com/web/lynxview.html
Webformator: Screenreader-Plugin für IE http://www.webformator.de

Teil 2: Analyse A utomatisierte Werkzeuge

Website mit einem der unten folgenden Werkzeuge prüfen * :

A-Prompt: Freeware (Engl.) für Windows; überprüft 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 prüft: http://www.wave.webaim.org/index.jsp

* Ergänzung zur manuellen Prüfung

Teil 2: Analyse Weitere Werkzeuge

Teil 2: Analyse Quellen

Einfach für Alle: www.einfach-fuer-alle.de
Barrierekompass: www.barrierekompass.de
Aktionsbündnis für 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 Information

Makrostruktur:

Möglichst geringe Strukturtiefe
Thematische Zusammenstellung von Bereichen

Mikrostruktur:

Logische Verteilung der Information: Das Wesentliche am Anfang.
Zusammenhängende Informationsblöcke

Beispiel: www.hbz-nrw.de

Teil 3: Praxis Informationsarchitektur II

Navigationsziele:

Wo befinde ich mich?

Wo kann ich hin?

Wo will ich hin?

Teil 3: Praxis Informationsarchitektur III

Eigenschaften der Navigation:

(a) Wahrnehmbarkeit

Position

Übliche Leserichtung beachten

Codestruktur

Navigationen als Listen <ul> <li><a href=“ziel.html“ title=“Zum Ziel“>Hier geht es zum Ziel</a></li> </ul>

Teil 3: Praxis Informationsarchitektur IV

(a) Wahrnehmbarkeit (Forts.)

Farbe und Kontrast

Deutliche Farbwahl, keine Komplementärfarben
Guter Kontrast
Farbwechsel bei Statuswechsel (per CSS) a:link, a:visited, a:hover, a:active, a:focus

Teil 3: Praxis Informationsarchitektur V

(b) Bedienbarkeit

Hover-/Fokushervorhebung

CSS: a:hover a:focus

Tabulator

XHTML: Attribut tabindex (Links, Formularfelder, clientseitige Imagemaps) <a href=“seite.html“ tabindex=“3“>...</a> <a href=“test.html“ tabindex=“1“>...</a>

Teil 3: Praxis Informationsarchitektur VI

(b) Bedienbarkeit (Forts.)

ggf. Accesskey

XHTML-Attribut accesskey (Links, Formularfelder, clientseitige Imagemaps) <a href=“seite.html“ accesskey=“s“>...</a> <a href=“test.html“ accesskey=“t“>...</a>

Skalierbarkeit ( relative Maßangaben)

Teil 3: Praxis Informationsarchitektur VII

(c) Verständlichkeit

Klare Aussage des Linktextes
Verständliches Sprachniveau (ggf. zielgruppenspezifisch)

Teil 3: Praxis Textstruktur I

Verständlichkeit: Zielgruppenspezifisch angepasst
Struktur: Logische/semantische Auszeichnung:

<h1>Wichtigste Überschrift</h1> <h2>Zweitwichtigste Überschrift, Subheadline</h2> <b>Text im Fettschnitt: semantisch bedeutungslos.</b> <em>Text stark hervorgehoben: semantisch markiert.</em>

Teil 3: Praxis Textstruktur II

Lineare Folge des Textes entspricht logischer Lesefolge

Teil 3: Praxis Bilder, Animationen, Imagemaps I

Beschreibender Text für Bild und Link

Attribut alt

<img src=“bilder/route.gif“ alt=“wegskizze“/>

Attribut title

<a href=“quellpfad.html“ title=“erklärung“>Linktext</a>

Attribut longdesc

<img src=“bilder/route.gif“ alt=“wegskizze“ longdesc=“route.txt“/>

Teil 3: Praxis Bilder, Animationen, Imagemaps II

Beschreibender Text für Imagemap

<map id=“karte“ name=“karte“> <area href=“start.html“ shape=“rect“ coords=“26, 4,30,75“ alt=“Startpunkt“ title=“Hier beginnt die Tour“ /> ... </map> <img src=“bilder/karte.gif“ width=“200px“ height=“150px“ alt=“routenkarte“ usemap=“#karte“/>

Teil 3: Praxis Bilder, Animationen, Imagemaps III

Beschreibender Text für OBJECT

<object data=“bilder/karte.gif“ type=“image/gif“ width=“200px“ height=“150px“> <p>Die Karte für unsere Route</p> </object>

Teil 3: Praxis Farben und Kontraste I

Farben ohne Informationswert

So nicht: Sondern so: Hier klicken Hier klicken Hier klicken Weitere Infos Seitenübersicht Kontakt

Teil 3: Praxis Farben und Kontraste II

Lesbarkeit ohne Farben

So nicht: Sondern so:

Teil 3: Praxis Farben und Kontraste III

Ausreichende Kontrastierung, richtige Farbkombinationen

Sondern so: So nicht: Dunkelrot Rot Gelb Weiß Dunkelorange Hellgrau

Teil 3: Praxis Farben und Kontraste IV

Quellen zur Farb- und Kontrastlehre:

Ingrid Krüber, Fraunhofer Institut: http://www.ipsi.fraunhofer.de/%7Ecrueger/farbe/
Ernst Georg Beck: http://www.merian.fr.bw.schule.de/beck/skripten/12/bs12-39.htm

Online-Werkzeuge:

Color Laboratory: http://colorlab.wickline.org/colorblind/colorlab/
Color Filter: http://colorfilter.wickline.org/

Teil 3: Praxis Typografie

Skalierbare Schriftgröße (CSS)

font-size:1 em;

Bildschirmgerechte Typo (CSS)

font-family: futura, arial, helvetica, sans-serif;
font-family: times new roman, geneva, serif;
font-family: courier, courier new, monospace;

Passende Farben
Kein kursiver Schriftschnitt
Kein Blocksatz

Teil 3: Praxis Frames I

Regel Nr. 1: Keine Frames verwenden. Falls unumgänglich, dann:
Frames eindeutig benennen

<frame name=“navigation“ src=“nav.html“ />

Frames mit Titeln versehen

<frames name=“navigation“ src=“nav.html“ title=“Navigation mit Links zu den Inhalten“ />

Framesets skalierbar machen

<frameset rows=“25%, *“ >...</frameset>

Teil 3: Praxis Frames II

Framesets beschreiben

<frameset rows=“1*,3*“ longdesc=“texte/beschreibung_frameset.txt“>...

No-Frames-Bereich definieren

<noframes><body><p>Hier wird alternativer Inhalt für nicht framefähige Ausgabemedien zur Verfügung gestellt</p></body></noframes>

Teil 3: Praxis Tabellen I

Tabellen skalierbar machen

<table width=“90%“><tr><td width=“20%“>...</td></tr></table>

Tabellen beschreiben

<table width=“90%“ summary=“In dieser Tabelle werden die Daten dargestellt...“>...</table>

Teil 3: Praxis Tabellen II

Tabellenüberschrift einfügen

<table width=“90%“ summary=“In dieser Tabelle...“> <caption>Auswertung der Daten</caption> ...</table>

Tabellen strukturieren

<table width=“90%“> <thead>...<thead><tfoot>...</tfoot> <tbody><tr> <td headers=“Gewinne_09_2005“>...</td></tr> ...</tbody></table>

Weitere Informationen: http://www.w3.org/TR/html4/struct/tables.html#h-11.4.3

Teil 3: Praxis Dynamik I Clientseitige dynamische Aktionen

Scripting: (JavaScript, ASP usw.)

Inhalt und Navigation unabhängig von Skripten

Per Skript generierte Inhalte vermeiden <script type="text/javascript"> </script>

Teil 3: Praxis Dynamik II

No-Script-Bereich zur Verfügung stellen <noscript> <p>|<a href="#">Startseite</a>|<a href="#">Aktuelles</a>|<a href="#">Bestellservice</a> |</p> </noscript>

Teil 3: Praxis Dynamik III

Ticker, Blinker etc. vermeiden

Lesbarkeit eingeschränkt
Screenreader kollabieren z.T.
Epilepsiegefahr (besonders bei größeren blinkenden oder flirrenden Flächen)

Teil 3: Praxis Dynamik IV

Autorefresh/Weiterleitung

Clientseitige Weiterleitung vermeiden, stattdessen serverseitig per .htaccess oder php: <?php header("Status: 301 Moved Permanently"); ("Location: http://www.rot65.de/front_content.php"); exit; ?>
Statischen Link als Alternative anbieten

Teil 3: Praxis Die Arbeitsschritte