Das Web barrierefrei gestalten. Leitfaden für Entwickler. Marc Haunschild 1. Ausgabe, März 2017 ISBN TE-WEBBF_MH

Transkript

1 Marc Haunschild 1. Ausgabe, März 2017 ISBN Das Web barrierefrei gestalten Leitfaden für Entwickler 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 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

4 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

5 3. Barrieren erkennen und vermeiden Barrieren entstehen durch ein ungünstiges Zusammenspiel von Nutzerfähigkeiten und Codequalität. Wenn Menschen eine Fähigkeit (z.b. Sehen ) fehlt und sie mit einem schlecht ausgezeichneten Dokument konfrontiert werden, kann ihnen die Bedienung einer Website dadurch unmöglich werden. Grundsätzlich kann man zwei Arten von Barrieren in einer Webseite finden: Hürden, die die Bedienung (bis zur Unzumutbarkeit) erschweren oder zusätzliche Hilfsmittel nötig machen Hindernisse, die eine oder mehrere Nutzergruppen komplett aussperren Lästige Hürden Extrem lästig sind beispielsweise schlecht oder nicht strukturierte HTML-Dokumente. Sind beispielsweise Überschriften nicht vorhanden, können Blinde nicht damit im Dokument navigieren. HTML NICHT barrierefrei <div id="main"> <div class="article"> <div class="heading1">überschrift</div> <div class="defaulttext">lorem ipsum dolor sit [...]</div> </div> </div> Hier stehen der Aufwand, um eine Information zu finden und der Nutzen für einen Blinden in keinem vernünftigen Verhältnis zueinander. Hat ein Blinder eine solche Webseite mittels Google-Suche gefunden, wird er sicher zu den Suchergebnissen zurückkehren und gibt bei der Suchmaschine damit ein negatives Votum über die Seite ab (Stichwort: Absprungrate). Das Schöne an der richtigen Lösung: sie ist kürzer, übersichtlicher, anpassbar, wartbar und suchmaschinenfreundlich. 11

6 4. Behinderungen Verschiedene Arten von Behinderung Nicht immer fehlt ein Sinn vollständig, so gibt es Menschen, die nur schlecht sehen, unscharf, ein winziges Blickfeld haben oder Farben nicht beziehungsweise anders als die meisten wahrnehmen. Neben Sehbehinderungen gibt es weitere sensorische Einschränkungen, wie das (teilweise) Fehlen des Hörsinnes. Es gibt motorische Behinderungen, die es schwer oder unmöglich machen, eine Maus zu bedienen. Außerdem gibt es psychische und geistige Einschränkungen, die das Verständnis oder die Bedienung von Webseiten erschweren können. Man unterscheidet demnach Sensorische Einschränkungen Eine Sinneswahrnehmung fehlt oder ist nur eingeschränkt vorhanden, wie schlechtes Hören oder Taubheit, Fehlsichtigkeit oder Blindheit Motorische Einschränkungen Körperteile können aufgrund von Krankheit oder Behinderung nicht oder nur eingeschränkt bewegt werden, z.b. aufgrund von Schmerz, Lähmung oder sie fehlen (z.b. nach einer Amputation) kognitive (psychisch-geistige) Einschränkungen Unsere geistigen Fähigkeiten können aus vielen Gründen eingeschränkt sein: Autismus, Lese- Rechtschreib-Schwäche, Depression, ADHS, mangelnde Bildung, deutsch als Fremdsprache, Rauschzustände, Schlafmangel, emotionale Unausgeglichenheit und mehr schränken unsere Leistungsfähigkeit ein. Menschen sind nicht behindert, Menschen werden behindert! Außerdem wird unterschieden in situative, temporäre und dauerhafte Einschränkungen. An situativen Einschränkungen wird besonders deutlich, wie und wodurch Menschen behindert werden. In einem Bus sind Sie solch einer Situation ausgesetzt: mancher kann sich nicht gut konzentrieren (geistige Einschränkung), weil er durch andere Fahrgäste abgelenkt wird und darauf 16

7 HTML - barrierefrei <article aria-describedby="article-description"> <header> <h2>grafikkarte im Eigenbau</h2> <details id="article-description"> <summary>infos zu diesem Text</summary> <dl> <dt>lesedauer</dt> <dd>ca 180 Minuten</dd> <dt>schwierigkeitsgrad</dt> <dd>hoch (Fachsprache - verwendet werden zahlreiche Fachbegriffe aus der Elektrotechnik)</dd> <dt>vorausgesetztes Wissen</dt> <dd>dieser Artikel richtet sich an Elektrotechniker mit abgeschlossenem Studium oder ähnlich umfangreichem Wissen.</dd> </dl> </details> <details> <summary>zusammenfassung in leichter Sprache</summary> <p>lorem </p> </details> </header> <p>lorem ipsum dolor sit amet </p> </article> Bereits ohne CSS verständlich: Screenshot des obigen Codes, die Infos zum Text sind geöffnet, die Zusammenfassung in leichter Sprache noch geschlossen. Eine platzsparende und übersichtliche Möglichkeit Texten interessante Informationen voranzustellen. Vermeiden Sie auf jeden Fall Business-Blasen und unnötige Fremdwörter, sowie lange Sätze und Absätze. Stellen Sie Inhalte in Deutscher Gebärdensprache (DGS) und in Leichter Sprache bereit. 23

8 Daten sollten Sie immer beim Empfang auf dem Server überprüfen. Im Browser lässt sich die Prüfung (z.b. mit Erweiterungen) einfach abschalten, um Ihnen unerwünschte Daten zuzusenden. Die Überprüfung im Browser ist nur eine Usability-Maßnahme, die Ihren Besuchern das Ausfüllen des Formulars erleichtert. Die Daten vom Browser überprüfen zu lassen ist keine geeignete Maßnahme, um für Sicherheit oder konsistente Daten zu sorgen. Formulare absenden Schaltflächen, also Knöpfe, die man drücken kann, heißen in HTML Button. Wenn Sie einen Button anbieten wollen, nutzen Sie das Element button und geben Sie ihm einen Text mit: <button>absenden</button> Wenn es trotz aller Nachteile (schlechte Skalierbarkeit, zusätzlicher HTTP-Requests, viele Daten usw) eine Grafik sein soll, muss wie bei jeder anderen Grafik ein Alternativtext mitgegeben werden. Ergänzende Lerninhalte: Barrierefreies Kontaktformular contact-form.html Ein Beispiel für ein zugängliches Kontaktformular finden Sie bei den Buchplus-Inhalten. Scalable Vector Graphic (SVG) verwenden Eine Liste mit den Vorteilen von SVGs ist lang skalierbar und damit ideal für responsive Webseiten besser zugänglich, als Alternativen effizient und damit geeignet für performante Webseiten veränderbar mittels CSS und damit wartbar und anpassbar an z.b. ein Redesign, Bildschirmgrößen, Farbschemata usw. animierbar cachable - also vom Browser wiederverwendbar, ohne wiederkehrende http-requests und zudem als Satz (Sprite) gruppierbar (ein http-request für viele Icons/Bilder) wiederverwertbar und damit DRY (don t repeat yourself) einfach in der Anwendung mittels picture-element (in HTML) oder als Hintergrund-Grafik (in CSS) einfach in der Erstellung mittels entsprechender Tools (z.b. Adobe Illustrator) und zahlreicher kostenlos im Web verfügbarer Tools und Beispiele einsteigerfreundlich und daher ohne hohen Lernaufwand verwendbar, aber mächtig, wenn man das Format und die Syntax beherrscht 54

9 Über den Autor Marc Haunschild arbeitet bei der Bundesanstalt für Landwirtschaft und Ernährung (BLE). Er entwickelt und testet seit 2001 barrierefreie Webseiten für das Bundesministerium für Ernährung und Landwirtschaft und Behörden in dessen Geschäftsbereich, sowie die Partner der BLE aus Politik und Wirtschaft. Neben seiner Tätigkeit bei der BLE arbeitet Haunschild freiberuflich als Entwickler, Trainer, Dozent und Fachbuchautor für Endkunden und Agenturen. Er hat ehrenamtlich bei der offiziellen deutschen Übersetzung der WCAG mitgewirkt und war für die Qualitätssicherung des barrierefreien Government Package von TYPO3 verantwortlich. Für den Herdt Verlag für Bildungsmedien ist er seit 2011 als freier Autor tätig und verantwortlich für die Herdt-Bücher HTML5 und Grundlagen der Webentwicklung sowie Cascading Style Sheets. 66