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
Strukturierung (XHMTL und CSS)
Linearisierung
Codierung
Validierung

Barrierefreies Webdesign

by Luka Peters

Accessibility

Categories

Upload Details

Usage Rights

2 Embeds 6

Statistics

Barrierefreies Webdesign Presentation Transcript

http://www.edaktik.de	4
http://www.slideshare.net	2