Das Web barrierefrei gestalten. Leitfaden für Entwickler 84FC-02D3-CB0B. Webcode für Download. Marc Haunschild

Transkript

1 Webcode für Download 84FC-02D3-CB0B Marc Haunschild Das Web barrierefrei gestalten Leitfaden für Entwickler 1. Ausgabe, März 2017 ISBN TE-WEBBF_MH

2 Impressum Matchcode: TE-WEBBF_MH Autor: Marc Haunschild Herausgeber: Marc Haunschild 1. Ausgabe, März 2017 Produziert im HERDT-Digitaldruck HERDT-Verlag für Bildungsmedien GmbH Am Kümmerling Bodenheim Internet: Marc Haunschild Alle Rechte vorbehalten. Kein Teil des Werkes darf in irgendeiner Form (Druck, Fotokopie, Mikrofilm oder einem anderen Verfahren) ohne schriftliche Geneh mi gung des Verlags reproduziert oder unter Ver wen dung elektronischer Systeme verarbeitet, ver vielfäl tigt oder verbreitet werden. Dieses Buch wurde mit großer Sorgfalt erstellt und geprüft. Trotzdem können Fehler nicht vollkommen ausgeschlossen werden. Verlag, Herausgeber und Autoren können für fehlerhafte Angaben und deren Folgen weder eine juristische Verantwortung noch irgend eine Haftung übernehmen. Wenn nicht explizit an anderer Stelle des Werkes aufgeführt, liegen die Copyrights an allen Screenshots beim Herausgeber. Sollte es trotz intensiver Recherche nicht gelungen sein, alle weiteren Rechteinhaber der verwendeten Quellen und Abbildungen zu finden, bitten wir um kurze Nachricht an die Redaktion. Die in diesem Buch und in den abgebildeten bzw. zum Download angebotenen Dateien genannten Personen und Organisationen, Adress und Telekommunikations angaben, Bankverbindungen etc. sind frei erfunden. Eventuelle Überein stimmun gen oder Ähnlichkeiten sind unbeabsichtigt und rein zufällig. Wenn die Bildungsmedien Verweise auf Webseiten Dritter enthalten, so unterliegen diese der Haftung der jeweiligen Betreiber, wir haben keinerlei Einfluss auf die Gestaltung und die Inhalte dieser Webseiten. Bei der Bucherstellung haben wir die fremden Inhalte daraufhin überprüft, ob etwaige Rechtsverstöße bestehen. Zu diesem Zeitpunkt waren keine Rechts verstöße ersichtlich. Wir werden bei Kenntnis von Rechtsverstößen jedoch umgehend die entsprechenden Internet adressen aus dem Buch entfernen. Die in den Bildungsmedien vorhandenen Internetadressen waren zum Zeitpunkt der Erstellung der jeweiligen Produkte gültig. Sollten Sie die Inhalte nicht mehr unter den angegebenen Adressen finden, sind diese eventuell inzwischen komplett aus dem Internet genommen worden oder unter einer neuen Adresse zu finden. Sollten im vorliegen den Produkt vorhandene Screen shots, Bezeichnungen bzw. Beschreibungen und Funktionen nicht mehr der beschrie benen Software entsprechen, hat der Hersteller der jeweiligen Software nach Drucklegung Änderungen vorgenommen oder vorhandene Funktionen geändert oder entfernt.

3 1. VORAUSSETZUNGEN GRUNDLAGEN DER BARRIEREFREIHEIT... 5 THEORIE: PRINZIPIEN UND RICHTLINIEN DER WEB CONTENT ACCESSIBILITY GUIDELINE (WCAG) AUSWIRKUNGEN VON BARRIEREN BARRIEREN ERKENNEN UND VERMEIDEN LÄSTIGE HÜRDEN UNÜBERWINDBARE HINDERNISSE BEHINDERUNGEN VERSCHIEDENE ARTEN VON BEHINDERUNG MENSCHEN MIT MOTORISCHEN UND SENSORISCHEN EINSCHRÄNKUNGEN UNTERSTÜTZEN MENSCHEN MIT KOGNITIVE EINSCHRÄNKUNGEN UNTERSTÜTZEN BESTEHENDE PROJEKTE WAS MUSS, DAS MUSS VIEL HILFT VIEL NEUE PROJEKTE KONZEPTE SIND TEAMARBEIT KOMFORT FÜR NUTZER ÜBER DEN KOMFORT FÜR ENTWICKLER STELLEN EINE WEBSITE IST KEIN STÜCK PAPIER VERWENDUNG VON FRONTEND-FRAMEWORKS POST- UND PRÄPROZESSOREN BARRIEREFREIHEIT UMSETZEN SEMANTIK ORIENTIERUNG UND NAVIGATION FORMULARE SCALABLE VECTOR GRAPHIC (SVG) VERWENDEN FAZIT UND WIE GEHT ES WEITER ANHANG 1: BARRIEREFREIE FERTIG-LÖSUNGEN MENÜS SLIDER MEDIA PLAYER JQUERY USER INTERFACE (JQUERYUI) ANHANG 2: TESTS UND DEBUGGING-WERKZEUGE WCAG BEHÖRDEN DEVELOPER TOOLS SCREENREADER ANHANG 3: GESETZE UND STANDARDS W3C EU DEUTSCHLAND BITV ANHANG 4: STICHWORTVERZEICHNIS (INDEX)... 64

4 ANHANG 5: BILDNACHWEIS AUS DER WIKIPEDIA/WIKIMEDIA COMMONS ÜBER DEN AUTOR

5 1. Voraussetzungen Vorausgesetzt werden sichere HTML und CSS-Kenntnisse, wie sie in den Herdt-Büchern HTML5 und Grundlagen der Webentwicklung und Cascading Stylesheets (CSS) Level 3 vermittelt werden. 2. Grundlagen der Barrierefreiheit Theorie: Prinzipien und Richtlinien der Web Content Accessibility Guideline (WCAG) 2.0 Für die Umsetzung barrierefreier Webangebote ist die Einhaltung der WCAG 2.0 maßgeblich. Die BITV 2.0 (Barrierefreie Informationstechnik- Verordnung) ist mit wenigen Ausnahmen eine Übersetzung der WCAG (Level AA). Die Basis der WCAG bilden vier Prinzipien. Jedem Prinzip sind Richtlinien zugeordnet. 1. Prinzip: Wahrnehmbar (perceivable) Die Inhalte der Webseite sollen für alle Menschen erreichbar sein unabhängig davon, welches Gerät sie zur Ausgabe verwenden (z.b. Bildschirm, Drucker, Braille-Zeile oder Website der Web Content Accessibility Guideline (WCAG) 2.0 Vorlese-Programm). Das bedeutet beispielsweise, dass alle Inhalte als Text vorliegen und dass eine Webseite auch noch funktioniert, wenn der Nutzer Anpassungen vornimmt (z.b. wegen einer Blendempfindlichkeit eigene Farben verwendet). Richtlinie Richtlinie 1.1 Textalternativen Nicht textliche Inhalte benötigen eine textliche Alternative. So müssen beispielsweise Bilder beschrieben werden. 5

6 Richtlinie 1.2 Zeitbasierte Medien Stellen Sie Textalternativen bereit, verfassen Sie für Gehörlose Untertitel und für Blinde eine Audiodeskription. Richtlinie 1.3 Anpassbar Die Darstellung muss an persönliche Wünsche oder Notwendigkeiten angepasst werden können (z.b. größere Schriften, einfaches Layout oder andere Farben). Dabei dürfen weder Verständlichkeit, noch Funktionalität leiden. Tastatur und Braille-Zeile By Karel Břinda (Own work) [GFDL ( CC BY 3.0 or CC BY-SA 3.0, via Wikimedia Commons Richtlinie 1.4 Unterscheidbar Sorgen Sie für ausreichend Kontraste, gruppieren Sie Inhalte in sinnvollen Zusammenhängen und sorgen Sie bei visuellen Inhalten für ausreichende Kontraste, bei Audio-Dateien für gute Verständlichkeit auch bei vorhandenen Hintergrundgeräuschen. 2. Prinzip: Bedienbar (operable) Auch die Bedienung der Webseite muss geräteunabhängig möglich sein: sie muss auch ohne Maus mit einem Screenreader oder einem Smartphone benutzt werden können ohne dass dabei beispielsweise durch starkes Flackern epileptische Anfälle ausgelöst werden. Richtlinie 2.1 Per Tastatur zugänglich Alle Inhalte müssen per Tastatur erreichbar sein. Richtlinie 2.2 Ausreichend Zeit Alle Inhalte, die in irgendeiner Form ablaufen (Hörspiele, Filme, Animationen) müssen angehalten werden können. Die Abspielgeschwindigkeit sollte anpassbar sein (schneller oder langsamer). Richtlinie 2.3 Anfälle Verzichten Sie bei der Gestaltung auf bekannte Auslöser von Anfällen (z.b. Flackern) Richtlinie 2.4 Navigierbar Für die Navigation in einer Webseite sind neben der Hauptnavigation alle anderen Links, aber auch Überschriften, Listen und andere strukturelle Merkmale von Bedeutung. Besonders wichtig ist die Bestimmung des aktuellen Standortes innerhalb des gesamten Webauftrittes und auf der aktuellen Seite. 6

7 3. Prinzip Verständlich (understandable) Sowohl die Ausgabe der Webseite (Inhalte) als auch die Eingabe (z.b. in Formularen) und die Bedienung (z.b. Navigation) müssen verständlich sein. Richtlinie 3.1 Lesbar Alle Inhalte sollen lesbar sein auch Inhalte, die in Bilder enthalten sind. Die Texte sollen verständlich sein. Richtlinie 3.2 Vorhersehbar Die Ausgabe sollte vorhersehbar sein, das heißt zum Kontext passen. Das Verhalten (was geschieht nach einem Klick) sollte der Nutzer-Erwartung entsprechen. Richtlinie 3.3 Hilfestellung bei der Eingabe Geben Sie Unterstützung bei der Eingabe in Formularen durch deutliche und sinnvolle Beschriftungen und Hilfen zur Fehlerkorrektur bei Falscheingaben. 4. Prinzip Robust (robust) Webseiten sollen so entwickelt werden, dass sie in möglichst vielen UserAgents (von Nutzern verwendete Software zur Bedienung von Webseiten, einschließlich Screenreadern) genutzt werden können auch in solchen die noch nicht verfügbar sind. Richtlinie 4.1 Kompatibel Die Webseite sollte nicht nur in allen aktuellen und nicht mehr ganz aktuellen Browsern funktionieren, sondern auch in zukünftigen. Darüber hinaus sind assistive technische Geräte und Programme wie Braille-Zeile oder Screenreader zu unterstützen. Auswirkungen von Barrieren Wie blinde Menschen eine Webseite wahrnehmen Blinde können Webseiten nicht sehen. Dadurch erscheinen Webseiten nicht als ein zweidimensionales Gesamtbild, in dem Kästen angeordnet sind. Blinde erleben eine Webseite eindimensional wie aus einem Fernschreiber. Buchstabe für Buchstabe, Wort für Wort. Um sich einen Gesamteindruck zu verschaffen, können sie sich durch diverse von assistiver Software generierte Listen bewegen: So lassen sich alle Links einer Webseite oder alle Überschriften durchklicken. Aber auch logische Bereiche wie Navigation, Hauptinhalt oder Informationen über die Seite (in der Regel im Fußbereich) können direkt angesprungen werden. So können Blinde ähnlich einem Sehenden von einem möglicherweise uninteressanten Text schnell zurück in die Navigation, um nach weiteren, interessanteren Inhalten zu suchen. Weiterhin lassen sich Listen oder Tabellen überspringen und Formulare in einem speziellen Formularmodus ausfüllen. Das ist wichtig, um in akzeptabler Zeit in einer Webseite relevante Inhalte finden zu können. 7