barrierefreies webdesign

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

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

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

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

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

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

(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

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

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

Teil 3: Praxis
Informationsarchitektur VI

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

Skalierbarkeit (relative Maangaben)

Teil 3: Praxis
Informationsarchitektur VII

(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

150001200

350013450

15000-1200

-350013450

15000-1200

-350013450

???Seite ??? (???)27.09.2006, 20:08:38Seite /

barrierefreies webdesign

Technology