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 [email protected]
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
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
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: Praxis
Farben und Kontraste III
Ausreichende Kontrastierung, richtige Farbkombinationen
DunkelrotRotGelbWeiDunkelorangeHellgrauSondern so:
So nicht:
Teil 3: Praxis
Farben und Kontraste IV
Quellen zur Farb- und Kontrastlehre:Ingrid Krber, 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 Schriftgre (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 unumgnglich, dann:
Frames eindeutig benennen
Frames mit Titeln versehen
Framesets skalierbar machen...
Teil 3: Praxis
Frames II
Framesets beschreiben...
No-Frames-Bereich definierenHier wird alternativer Inhalt fr nicht framefhige Ausgabemedien zur Verfgung gestellt
Teil 3: Praxis
Tabellen I
Tabellen skalierbar machen...
Tabellen beschreiben...
Teil 3: Praxis
Tabellen II
Tabellenberschrift einfgen
Auswertung der Daten
...
Tabellen strukturieren
......
...
...
Weitere Informationen:
http://www.w3.org/TR/html4/struct/tables.html#h-11.4.3
Teil 3: Praxis
Dynamik I
Clientseitige dynamische AktionenScripting: (JavaScript, ASP usw.)Inhalt und Navigation unabhngig von Skripten
Per Skript generierte Inhalte vermeiden
Teil 3: Praxis
Dynamik II
No-Script-Bereich zur Verfgung stellen
|Startseite|Aktuelles|Bestellservice |
Teil 3: Praxis
Dynamik III
Ticker, Blinker etc. vermeidenLesbarkeit eingeschrnkt
Screenreader kollabieren z.T.
Epilepsiegefahr (besonders bei greren blinkenden oder flirrenden Flchen)
Teil 3: Praxis
Dynamik IV
Autorefresh/WeiterleitungClientseitige Weiterleitung vermeiden,
stattdessen serverseitig per .htaccess oder php:
Statischen Link als Alternative anbieten
Teil 3: Praxis
Die Arbeitsschritte
Strukturierung (XHMTL und CSS)
Linearisierung
Codierung
Validierung
Klicken Sie, um das Format des Titeltextes zu
Klicken Sie, um die Formate des Gliederungstextes zu bearbeitenZweite GliederungsebeneDritte GliederungsebeneVierte GliederungsebeneFnfte GliederungsebeneSechste GliederungsebeneSiebente GliederungsebeneAchte GliederungsebeneNeunte Gliederungsebene
Barrierefreies Webdesign, edaktik.de
Software Plattform URLFirefox-Plugin Web DeveloperWinXP, MacOShttps://addons.mozilla.org/firefox/60/XHTML-Validator W3CGlobal (Web)http://validator.w3.org/CSS-ValidatorGlobal (Web)http://jigsaw.w3.org/css-validator/Web Accessibility ToolbarWinXPhttp://www.wob11.de/watinstallation.html bersicht weiterer Werkzeuge bei der WAI http://www.w3.org/WAI/ER/tools/
???Seite ??? (???)27.09.2006, 20:08:37Seite / Quartal 1Quartal 2
150001200
350013450
???Seite ??? (???)27.09.2006, 20:08:37Seite / Quartal 1Quartal 2
150001200
350013450
???Seite ??? (???)27.09.2006, 20:08:38Seite / Quartal 1Quartal 2
15000-1200
-350013450
???Seite ??? (???)27.09.2006, 20:08:38Seite / Quartal 1Quartal 2
15000-1200
-350013450
???Seite ??? (???)27.09.2006, 20:08:38Seite /
Top Related