• Share
  • Email
  • Embed
  • Like
  • Save
  • Private Content
Barrierefreies Webdesign
 

Barrierefreies Webdesign

on

  • 2,977 views

Barrierefreie Webseiten: Grundlagen, Analyse, Optmierung:

Barrierefreie Webseiten: Grundlagen, Analyse, Optmierung:
- Grundlagen Accessibility
- Analyse bestehender Websites (inkl. Analysewerkzeuge)
- Optimierung bestehender Websites

Statistics

Views

Total Views
2,977
Views on SlideShare
2,971
Embed Views
6

Actions

Likes
0
Downloads
8
Comments
0

2 Embeds 6

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

Accessibility

Categories

Upload Details

Uploaded via as OpenOffice

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

Barrierefreies Webdesign Barrierefreies Webdesign Presentation Transcript

  • 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.
  • Teil 1: Grundlagen WCAG 1 Checkliste Priorität 2 (Auszug)
    • 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.
  • Teil 1: Grundlagen WCAG 1 Checkliste Priorität 3 (Auszug)
    • 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
    • Eigenschaften der Navigation:
    (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
    • Eigenschaften der Navigation:
    (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
    • Eigenschaften der Navigation:
    (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
    • Eigenschaften der Navigation:
    (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=&quot;text/javascript&quot;> <!-- // /* <![CDATA[ */ document.write(&quot;<p>|<a href='#'>Startseite</a>&quot;); document.write(&quot;|<a href='#'>Aktuelles</a>&quot;); document.write(&quot;|<a href='#'>Bestellservice</a>&quot;); document.write(&quot;|</p>&quot;); /* ]]> */ //--></script>
  • Teil 3: Praxis Dynamik II
    • No-Script-Bereich zur Verfügung stellen <noscript> <p>|<a href=&quot;#&quot;>Startseite</a>|<a href=&quot;#&quot;>Aktuelles</a>|<a href=&quot;#&quot;>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(&quot;Status: 301 Moved Permanently&quot;); (&quot;Location: http://www.rot65.de/front_content.php&quot;); exit; ?>
        • Statischen Link als Alternative anbieten
  • Teil 3: Praxis Die Arbeitsschritte
    • Strukturierung (XHMTL und CSS)
    • Linearisierung
    • Codierung
    • Validierung