C14h:Barrierefreies Webdesign: Difference between revisions

From NoName e.V.
Jump to navigation Jump to search
No edit summary
(→‎Links: Link aktualisiert)
 
(7 intermediate revisions by 4 users not shown)
Line 1: Line 1:
{{Vortrag|
{{Vortrag|
TITLE = BarrierefreiesWebdesign |
TITLE = Barrierefreies Webdesign |
AUTHOR = Alexander Koch|
AUTHOR = Alexander Koch|
DATE = 3.6.2004|
DATE = 3.6.2004|
LOCATION = GriTa|
LOCATION = [[Griechische Taverne|GriTa]]|
SLIDES = [http://idlecrew.de:2380/vzfcz/web-accessibility.pdf PDF]
SLIDES = [https://www.noname-ev.de/wiki/uploads/c/c0/Web-accessibility.pdf PDF]
}}
}}


Line 16: Line 16:
profitieren davon.
profitieren davon.


Wir kennen alle die „Bitte installieren Sie den Internet Explorer“-Webseiten
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  
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  
Barriere teilweise umgehen, doch können andere das auch? Dazu sollte man sich  
Line 48: Line 48:
(kurz: BITV) sogar bald gesetzlich Pflicht.
(kurz: BITV) sogar bald gesetzlich Pflicht.


Während dem Vortrag wird auch der Mythos „Textversion“ besprochen
Während dem Vortrag wird auch der Mythos „Textversion“ besprochen
und versucht einen Ausweg aus der immer noch vorherrschenden Browser- und  
und versucht einen Ausweg aus der immer noch vorherrschenden Browser- und  
Auflösungsoptimierung zu finden. Barrierefreie Webseiten sehen, entgegen  
Auflösungsoptimierung zu finden. Barrierefreie Webseiten sehen, entgegen  
Line 84: Line 84:
erheblich bei der Navigation, indem sie als standardisierte Symbolleiste zum  
erheblich bei der Navigation, indem sie als standardisierte Symbolleiste zum  
Erreichen fester Link-Definitionen direkt im Browser integriert angezeigt  
Erreichen fester Link-Definitionen direkt im Browser integriert angezeigt  
werden. So können Sie zum Beispiel in der Symbolleiste auf „Inhalt“ klicken  
werden. So können Sie zum Beispiel in der Symbolleiste auf „Inhalt“ klicken  
und gelangen auf die Seitenübersicht des Internetangebots. Power-Surfern werden  
und gelangen auf die Seitenübersicht des Internetangebots. Power-Surfern werden  
auch die Zugriffstasten gefallen, mit denen sich die einzelnen Links mit einen  
auch die Zugriffstasten gefallen, mit denen sich die einzelnen Links mit einen  
Line 101: Line 101:
** Barrierefreies Webdesign: http://www.barrierefreies-webdesign.de/
** Barrierefreies Webdesign: http://www.barrierefreies-webdesign.de/
** Riesige Linkliste: http://www.webaccessibility.de/
** Riesige Linkliste: http://www.webaccessibility.de/
** Mailingliste "Barrierefreies Internet": http://access.fit.fraunhofer.de/waideinfo
** Mailingliste "Barrierefreies Internet": http://www.fit.fraunhofer.de/projects/bika/waide.html
* Pruefprogramme:
* Pruefprogramme:
** Simulation von Farbblindheit: http://colorfilter.wickline.org
** Simulation von Farbblindheit: https://www.toptal.com/designers/colorfilter
** Ein paar Prüfprogramme: http://www.juicystudio.com/
** Ein paar Prüfprogramme: http://www.juicystudio.com/
** (X)HTML-Validator: http://validator.w3.org/
** (X)HTML-Validator: http://validator.w3.org/
Line 112: Line 112:
** Prüftool-Übersicht: http://www.webaim.org/techniques/articles/freetools/
** Prüftool-Übersicht: http://www.webaim.org/techniques/articles/freetools/
* Beispiele:
* Beispiele:
** Grüne Jugend Heidelberg: http://www.gruenejugend.de/heidelberg/ (Meine Webseite)
** Grüne Jugend Heidelberg: http://web.archive.org/web/*/www.gruenejugend.de/heidelberg/ (Meine Webseite)
** Polizei NRW: http://www.polizei.nrw.de/im/
** Polizei NRW: http://web.archive.org/web/*/www.polizei.nrw.de/im/
** Versorgungsamt Heidelberg: http://www.versorgungsamt-heidelberg.de/
** 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/
** 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/award/gewinner/
** Und andere Gewinner beim Biene-Award: http://www.einfach-fuer-alle.de/biene-2008/preistraeger/
* CSS-Einführung/Tipps:
* CSS-Einführung/Tipps:
** CSS from Ground up: http://www.wpdfd.com/editorial/basics/index.html
** CSS from Ground up: http://www.wpdfd.com/editorial/basics/index.html
** CSS-Zen-Garden: http://www.csszengarden.com/
** CSS-Zen-Garden: http://www.csszengarden.com/
** A List Apart: http://www.alistapart.com/
** A List Apart: http://www.alistapart.com/
[[Category:Vorträge]]

Latest revision as of 18:14, 22 April 2017

Vortragsdaten


Titel: Barrierefreies Webdesign

Vortragender: Alexander Koch

Datum: 3.6.2004

Ort: GriTa

Folien: PDF


Inhalt

Unter barrierefreiem Webdesign versteht man die intelligente Gestaltung von Webseiten, so dass die meisten Nutzer ungeachtet von Behinderungen Zugriff auf die enthaltenen Informationen haben. Das führt automatisch zu einer besseren Usability und Qualität 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: Wie benutzen Blinde das Internet? 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. Dabei sind diese gerade besonders auf das Internet angewiesen: 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 8 Millionen Menschen in Deutschland mit Behinderungen, 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: Die Zahl der erreichbaren Kunden wird dadurch erheblich vergrößert, 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 nicht öde und langweilig aus, sondern sind äußerlich genauso ansprechend wie viele andere, gut designte Seiten im Netz. Die Zukunft des Web liegt in der multimodalen Bedienung: Webseiten auf Computerbildschirmen, Handhelds, Handys, Fernsehern, per Sprachein-/ausgabe, auf Druckern, Armbanduhren, ja sogar der Kühlschrank wird eines Tages mit dem Internet verbunden sein. Dazu ist es umbedingt nötig, sowohl syntaktisch, als auch semantisch korrektes HTML zu schreiben, das komplett von jeglicher Form der Präsentation getrennt ist; diese wird dann über Stilvorlagen bestimmt. Die Trennung bewirkt die Abschaffung des alten <font>-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 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.

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

Am Ende wird noch auf einige fortgeschrittene HTML-Techniken 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 <link>-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 Web Content Accessibility Guidelines 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