View source for C14h:Barrierefreies Webdesign

{{Vortrag|
TITLE = Barrierefreies Webdesign |
AUTHOR = Alexander Koch|
DATE = 3.6.2004|
LOCATION = [[Griechische Taverne|GriTa]]|
SLIDES = [https://www.noname-ev.de/wiki/uploads/c/c0/Web-accessibility.pdf PDF]
}}


== Inhalt ==

Unter barrierefreiem Webdesign versteht man die <b>intelligente Gestaltung von Webseiten</b>, 
so dass die meisten Nutzer <b>ungeachtet von Behinderungen</b>
Zugriff auf die enthaltenen Informationen haben. Das führt automatisch
zu einer <b>besseren Usability und Qualität</b> der Webseite; auch Nicht-Behinderte
profitieren davon.

Wir kennen alle die „Bitte installieren Sie den Internet Explorer“-Webseiten
und Word-Only-Versionen von Dokumenten und ärgern uns darüber. Wir können diese 
Barriere teilweise umgehen, doch können andere das auch? Dazu sollte man sich 
die Frage stellen: <i>Wie benutzen Blinde das Internet?</i> Sie können den Text ja 
nicht selbst lesen und auch keine Maus benutzen, da sie ja nicht sehen können, 
wo sich der Mauszeiger befindet. <b>Dabei sind diese gerade besonders auf das Internet angewiesen</b>: So könnten Blinde zum Beispiel die Einkäufe komplett 
per Internet erledigen und sich so erhebliche Mühen beim Umgehen anderer 
Barrieren beim Einkauf mit physikalischer Präsenz sparen. Blinde können sich 
den Text mit Sprach-Synthesizern vorlesen lassen und die Bedienung per Tastatur 
vornehmen, aber nicht auf Informationen zugreifen, wenn diese nicht 
zugänglich sind.

Es leben <b>8 Millionen Menschen</b> in Deutschland <b>mit Behinderungen</b>, 6,6 Millionen davon sind
schwer behindert. Zwar wirken sich nicht alle diese Behinderungen auf die 
Bedienbarkeit des World Wide Web aus, einige tun dies aber auf jeden Fall. 
Diese Menschen werden durch intelligentes Web-Design nun nicht ausgeschlossen, 
sondern in die unendlichen Möglichkeiten des WWW integriert. Es wird viel 
über die digitale Spaltung geredet: dieser Begriff streckt sich aber neben 
Kostenfaktoren des Internets auch über Zugänglichkeit des Webs für Behinderte.

Neben diesen sozialen Gründen gibt es viele weitere Gründe für ein 
barreierefreies Webdesign. Diese liegen zum Beispiel im wirtschaftlichen 
Bereich: <b>Die Zahl der erreichbaren Kunden</b> wird dadurch <b>erheblich vergrößert</b>, 
es werden Behinderte nicht von Ihrem Internetangebot ausgeschlossen. Durch 
die Nutzung von Stilvorlagen wird die Wartung der Webseite erleichtert, die
Download-Zeiten verringert und Traffic gespart. Durch korrekte Semantik wird 
es für Suchmaschinen leichter sein, Ihre Webseite zu indizieren, was weitere 
Nutzer auf Ihre Webseite bringt. Die Usability wird verbessert, es ist leichter 
auf Informationen zuzugreifen. Für Behörden der Bundesverwaltung ist die 
zugängliche Gestaltung durch die Barrierefreie Informationstechnik-Verordnung 
(kurz: BITV) sogar bald gesetzlich Pflicht.

Während dem Vortrag wird auch der Mythos „Textversion“ besprochen
und versucht einen Ausweg aus der immer noch vorherrschenden Browser- und 
Auflösungsoptimierung zu finden. Barrierefreie Webseiten sehen, entgegen 
landläufiger Meinung, normalerweise <b>nicht öde und langweilig</b> aus, sondern 
sind äußerlich genauso ansprechend wie viele andere, gut designte Seiten im Netz. 
Die Zukunft des Web liegt in der <b>multimodalen Bedienung</b>: Webseiten auf 
<i>Computerbildschirmen, Handhelds, Handys, Fernsehern, per Sprachein-/ausgabe, auf Druckern, Armbanduhren, ja sogar der Kühlschrank wird eines Tages mit dem Internet verbunden sein</i>. 
Dazu ist es umbedingt nötig, sowohl <b>syntaktisch</b>, als 
auch <b>semantisch korrektes HTML</b> zu schreiben, das komplett 
<b>von jeglicher Form der Präsentation getrennt</b> ist; diese wird dann über Stilvorlagen bestimmt. 
Die Trennung bewirkt die Abschaffung des alten <nowiki><font></nowiki>-Tags, vereinfacht die 
Wartung des Codes erheblich, sorgt für konsistentes Aussehen innerhalb 
des gesamten Webangebots und stellt sicher, dass der Nutzer die 
Darstellungsregeln überschreiben kann, wenn der Kontrast nicht hoch genug 
ist oder er besser eine weiße Schrift auf schwarzem Hintergrund lesen kann.

Weiterhin werden die einzelnen Arten von Einschränkungen bei der Bedienung einer Webseite erläutert und an
Lösungsmöglichkeiten zur Verbesserung der Zugänglichkeit herangearbeitet. Wo 
möglich wird es lebensnahe Beispiele geben, an denen Probleme für 
spezielle Nutzergruppen direkt klar werden. Zu diesen gehören sowohl <i>Blinde, als auch Schwachsehende, Gehörlose, Textbrowser-Surfer, Analphabeten, Handheld-Surfer, und Leute die an Lernschwierigkeiten, Dyslexie, photosensitiver Epilepsie, und körperlichen Einschränkungen leiden.</i>

Wichtige Aspekte wie <b>Farbwahl</b> (zum Beispiel der Rot-Grün-Unterschied bei 
Farbenblinden, die ja immerhin acht Prozent der männlichen Bevölkerung 
einnehmen), <b>räumliche Aufteilung und Techniken</b> dazu (Frames-/Tabellen-/CSS-Layout), Zugängliche Gestaltung von <b>Formularen und Datentabellen</b>, 
Wahl von <b>Alternativ-Texten für Bilder</b>, Metainformationen und 
Entwicklung eines <b>dynamischen Layouts</b> werden nicht unerwähnt bleiben.

Am Ende wird noch auf einige <b>fortgeschrittene HTML-Techniken</b> eingegangen: 
Hierunter fällt zum Beispiel das Umschalten auf andere 
Stilvorlagen, mit denen sich sozusagen eine automatische Druckversion oder 
eine spezielle Darstellung auf PDAs und Projektoren, bis hin zu 
Audio-Schnittstellen (Diese werden leider nur von Emacspeak unterstützt) 
realisieren lassen. Ebenso soll auch ein Blick auf die äußerst nützlichen 
<nowiki><link></nowiki>-Tags geworfen werden: Diese sogenannten Relational Links unterstützen 
erheblich bei der Navigation, indem sie als standardisierte Symbolleiste zum 
Erreichen fester Link-Definitionen direkt im Browser integriert angezeigt 
werden. So können Sie zum Beispiel in der Symbolleiste auf „Inhalt“ klicken 
und gelangen auf die Seitenübersicht des Internetangebots. Power-Surfern werden 
auch die Zugriffstasten gefallen, mit denen sich die einzelnen Links mit einen 
Shortcut hinterlegen lassen, sodass diese immer schnell erreichbar sind.

Die Grundlage des Vortrags bilden die <b>Web Content Accessibility Guidelines</b> 
des W3C, deren Tellerrand wird jedoch keine Barriere für uns sein, weiter zu 
forschen und an einigen Stellen tiefer in die Materie zu gehen. Für den 
Vortrag werden HTML-Grundkenntnisse empfohlen.

== Links ==
* WAI-Arbeitsgruppe beim W3C: http://www.w3.org/WAI/
* Allgemeine Seiten: 
** Einfach für Alle:						http://www.einfach-fuer-alle.de
** Biene Award:							http://www.biene-award.de/
** Barrierefreies Webdesign:					http://www.barrierefreies-webdesign.de/
** Riesige Linkliste:						http://www.webaccessibility.de/
** Mailingliste "Barrierefreies Internet":		http://www.fit.fraunhofer.de/projects/bika/waide.html
* Pruefprogramme:
** Simulation von Farbblindheit:				https://www.toptal.com/designers/colorfilter
** Ein paar Prüfprogramme:					http://www.juicystudio.com/
** (X)HTML-Validator:						http://validator.w3.org/
** CSS-Validator:							http://jigsaw.w3.org/css-validator/
** Link-Checker:							http://validator.w3.org/checklink
** Bobby:								http://bobby.watchfire.com/bobby/html/en/index.jsp
** ATRC Web Accessibility Checker:				http://checker.atrc.utoronto.ca/index.html
** Prüftool-Übersicht:						http://www.webaim.org/techniques/articles/freetools/
* Beispiele:
** Grüne Jugend Heidelberg:					http://web.archive.org/web/*/www.gruenejugend.de/heidelberg/ (Meine Webseite)
** Polizei NRW:							http://web.archive.org/web/*/www.polizei.nrw.de/im/
** Versorgungsamt Heidelberg:					http://web.archive.org/web/*/www.versorgungsverwaltung-baden-wuerttemberg.de/vahd/
** TU Dresten, Studiengang Mol. Bio.-Techn.:		http://www.biologie.tu-dresden.de/biotech/main/
** Und andere Gewinner beim Biene-Award:			http://www.einfach-fuer-alle.de/biene-2008/preistraeger/
* CSS-Einführung/Tipps:
** CSS from Ground up:						http://www.wpdfd.com/editorial/basics/index.html
** CSS-Zen-Garden:						http://www.csszengarden.com/
** A List Apart:							http://www.alistapart.com/

[[Category:Vorträge]]