Barrierefreies Webdesign

Grundlagen, Analyse, Optimierung

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, 2006, Luka Peters, edaktik.de

 Barrierefreies
Webdesign, Teil 1

Theoretische Grundlagen, Analyseaspekte,

Werkzeuge und Quellen

Barrierefreies Webdesign, 2006, Luka Peters, edaktik.de

 Teil 1: Grundlagen
Was heißt barrierefrei?

✔ Berücksichtigung verschiedener Nutzergruppen

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

Barrierefreies Webdesign, 2006, Luka Peters, edaktik.de

 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

Barrierefreies Webdesign, 2006, Luka Peters, edaktik.de

 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)

Barrierefreies Webdesign, 2006, Luka Peters, edaktik.de

 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)

Barrierefreies Webdesign, 2006, Luka Peters, edaktik.de

 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

Barrierefreies Webdesign, 2006, Luka Peters, edaktik.de

 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.

Barrierefreies Webdesign, 2006, Luka Peters, edaktik.de

 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.

Barrierefreies Webdesign, 2006, Luka Peters, edaktik.de

 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.

Barrierefreies Webdesign, 2006, Luka Peters, edaktik.de

 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

Barrierefreies Webdesign, 2006, Luka Peters, edaktik.de

 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, 2006, Luka Peters, edaktik.de

 Barrierefreies
Webdesign, Teil 2

Analyse bestehender Websites –

Methoden und Werkzeuge

Barrierefreies Webdesign, 2006, Luka Peters, edaktik.de

 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

Barrierefreies Webdesign, 2006, Luka Peters, edaktik.de

 Teil 2: Analyse
Analyse: Spezielle
Elemente

✔ Datentabellen
✔ Formulare
✔ Flash
✔ PDF
✔ Pop-up-Fenster

Barrierefreies Webdesign, 2006, Luka Peters, edaktik.de

 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.

Barrierefreies Webdesign, 2006, Luka Peters, edaktik.de

 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

Barrierefreies Webdesign, 2006, Luka Peters, edaktik.de

 Teil 2: Analyse
Automatisierte 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

Barrierefreies Webdesign, 2006, Luka Peters, edaktik.de

 Teil 2: Analyse
Weitere Werkzeuge

Software Plattform URL

Firefox-Plugin „Web Developer“
XHTML-Validator W3C
CSS-Validator
Web Accessibility Toolbar
Übersicht weiterer Werkzeuge
bei der WAI
WinXP, MacOS https://addons.mozilla.org/firefox/60/
Global (Web) http://validator.w3.org/
Global (Web) http://jigsaw.w3.org/css-validator/
WinXP http://www.wob11.de/watinstallation.html
http://www.w3.org/WAI/ER/tools/

Barrierefreies Webdesign, 2006, Luka Peters, edaktik.de

 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, 2006, Luka Peters, edaktik.de

 Barrierefreies
Webdesign, Teil 3

Praktische Umsetzung barrierefreier

Techniken in XHTML und CSS

Barrierefreies Webdesign, 2006, Luka Peters, edaktik.de

 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

Barrierefreies Webdesign, 2006, Luka Peters, edaktik.de

 Teil 3: Praxis
Informationsarchitektur II

✔ Navigationsziele:
✔ Wo befinde ich mich?

✔ Wo kann ich hin?

✔ Wo will ich hin?

Barrierefreies Webdesign, 2006, Luka Peters, edaktik.de

 Teil 3: Praxis
Informationsarchitek
tur 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>

Barrierefreies Webdesign, 2006, Luka Peters, edaktik.de

 Teil 3: Praxis
Informationsarchitek
tur 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

Barrierefreies Webdesign, 2006, Luka Peters, edaktik.de

 Teil 3: Praxis
Informationsarchitek
tur 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>

Barrierefreies Webdesign, 2006, Luka Peters, edaktik.de

 Teil 3: Praxis
Informationsarchitek
tur 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)

Barrierefreies Webdesign, 2006, Luka Peters, edaktik.de

 Teil 3: Praxis
Informationsarchitek
tur VII

✔ Eigenschaften der Navigation:

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

Barrierefreies Webdesign, 2006, Luka Peters, edaktik.de

 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>

Barrierefreies Webdesign, 2006, Luka Peters, edaktik.de

 Teil 3: Praxis
Textstruktur II

✔ Lineare Folge des Textes entspricht logischer

Lesefolge

Barrierefreies Webdesign, 2006, Luka Peters, edaktik.de

 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“/>

Barrierefreies Webdesign, 2006, Luka Peters, edaktik.de

 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“/>

Barrierefreies Webdesign, 2006, Luka Peters, edaktik.de

 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>

Barrierefreies Webdesign, 2006, Luka Peters, edaktik.de

 Teil 3: Praxis
Farben und
Kontraste I

✔ Farben ohne Informationswert

So nicht:
Hier klicken Hier klicken Hier klicken

Sondern so:

Weitere Infos Seitenübersicht Kontakt

Barrierefreies Webdesign, 2006, Luka Peters, edaktik.de

 Teil 3: Praxis
Farben und
Kontraste II

✔ Lesbarkeit ohne Farben

So nicht: Sondern so:

Quartal 1 Quartal 2 Quartal 1 Quartal 2

15000 1200 15000 1200
3500 13450 3500 13450

Quartal 1 Quartal 2 Quartal 1 Quartal 2

15000 -1200 15000 -1200
-3500 13450 -3500 13450

Barrierefreies Webdesign, 2006, Luka Peters, edaktik.de

 Teil 3: Praxis
Farben und
Kontraste III

✔ Ausreichende Kontrastierung, richtige

Farbkombinationen
So nicht:

Dunkelrot Gelb Rot

Sondern so:

Weiß Dunkelorange Hellgrau

Barrierefreies Webdesign, 2006, Luka Peters, edaktik.de

 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/

Barrierefreies Webdesign, 2006, Luka Peters, edaktik.de

 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

Barrierefreies Webdesign, 2006, Luka Peters, edaktik.de

 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>

Barrierefreies Webdesign, 2006, Luka Peters, edaktik.de

 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>

Barrierefreies Webdesign, 2006, Luka Peters, edaktik.de

 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>

Barrierefreies Webdesign, 2006, Luka Peters, edaktik.de

 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

Barrierefreies Webdesign, 2006, Luka Peters, edaktik.de

 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">
<!-- // /*
<![CDATA[ */
document.write("<p>|<a href='#'>Startseite</a>");
document.write("|<a href='#'>Aktuelles</a>");
document.write("|<a
href='#'>Bestellservice</a>");
document.write("|</p>");
/* ]]> */ //--></script>

Barrierefreies Webdesign, 2006, Luka Peters, edaktik.de

 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>

Barrierefreies Webdesign, 2006, Luka Peters, edaktik.de

 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)

Barrierefreies Webdesign, 2006, Luka Peters, edaktik.de

 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

Barrierefreies Webdesign, 2006, Luka Peters, edaktik.de

 Teil 3: Praxis
Die Arbeitsschritte

✔ Strukturierung (XHMTL und CSS)

✔ Linearisierung
✔ Codierung
✔ Validierung

Barrierefreies Webdesign, 2006, Luka Peters, edaktik.de