Inhaltsübersicht. 1 Einleitung 1

Transkript

1 Inhaltsübersicht 1 Einleitung Was erwartet Sie in diesem Buch? Ziel dieses Buchs Zielgruppen Barrierefreiheit ist mehr als HTML und CSS 3 Teil I Gedanken 5 2 Annäherung und Auseinandersetzung Ausgangspunkt Barrierefreiheit nervt Barrierefreiheit ist legitim Barrierefreiheit sichern 51 Zusammenfassung 63 3 Spektrum Verständlichkeit Standardkonformität 80 Zusammenfassung 113 Teil II Experimente HTML und CSS HTML-Einführung CSS-Einführung Eine erste Seite mit HTML und CSS 146 Zusammenfassung 152 Bibliografische Informationen digitalisiert durch

2 Inhaltsübersicht 5 Richtige oder falsche Formate? Angemessenheit eines Formats Webstandards des W3C Grafiken Multimedia Dynamische Inhalte Kompatibilität 192 Zusammenfassung Umgang mit Gestaltungselementen Progressive Enhancement Störungen vermeiden Grafiken 209 Zusammenfassung Nutzerführung Links Navigationskonzepte Beschreibende Dokumenttitel 302 Zusammenfassung Alternative Versionen Konformität zur WCAG Optimierte Inhaltsformen Style Switcher 316 Zusammenfassung 318 TejMIMnhalte^ J ^ 9 Zugängliche Inhalte Der barrierefreie Text Maßstäbe für verständliche Texte Verständliche Sprachen 357 Zusammenfassung Redaktionsbilder Textalternativen für Bilder Kontrastverhältnisse und Mindestschriftgröße 397 Zusammenfassung 398

3 Inhaltsübersicht 11 Technische Zugänglichkeit Datentabellen Sprachangaben Abkürzungen Programmierseitige Lösungen für Abkürzungen und Sprachwechsel 429 Zusammenfassung PDF umsetzen und prüfen Barrierefreiheit in PDF verstehen - Gerüchte, Geschichte und gegenwärtige Lage Merkmale barrierefreier PDF-Dateien Workflows zum Erstellen barrierefreier PDFs Qualitätssicherung als Herausforderung Fazit und Ausblick 514 TeJiHVVorlagen Technischer Unterbau Validität Allgemeine Sorgfaltspflichten 528 Zusammenfassung Layouttechniken CSS-Design Layouttabellen sind wie Briefe in Excel Frames Zusammenfassung DOO 15 Formulare Aufbau eines Formulars Strukturen in Formularen Reihenfolge der Formularinhalte Fehlervermeidung und -behandlung 592 Zusammenfassung Tastaturbedienung und dynamische Inhalte Bedeutung der Tastaturbedienung Tastaturbedienung in HTML Erhaltung von Rolle, Name und Status Kontextänderung bei Zeitbeschränkungen 641 Zusammenfassung 644

4 viii Inhaltsübersicht Teil V Screendesign Flexible Darstellung Vergrößerung von Inhalten Flüssiges Layout Größenangaben in HTML Typografisches 683 Zusammenfassung Kontraste und Farben Mindestkontrastverhältnis Wo die WCAG20 zu kurz greifen 695 Zusammenfassung Mehrfachkennzeichnung Informationen über mehrere Wege vermitteln Mehrfachkennzeichnung in der Praxis Mehrfachkennzeichnung ist interdisziplinär 716 Zusammenfassung 717 </ende> Gedanken zum Schluss 721 Anhang 725 A Erfolgskriterien der WCAG A.1 Konformitätsbedingungen 728 A.2 Prinzip A.3 Prinzip A.4 Prinzip A.5 Prinzip B PDF-Standard-Tags 745 B.1 Zusammenfassende Elemente 746 B.2 Blockelemente 747 B.3 Inline-Elemente 749 B.4 Bildhafte Elemente 750 C Literatur und weitere Quellen 751 C.1 Bücher und Artikel 751 C.2 Onlinequellen 752 Index 771

5 ix 1 Einleitung Was erwartet Sie in diesem Buch? Ziel dieses Buchs Zielgruppen Barrierefreiheit ist mehr als HTML und CSS 3 Teil I Gedanken 5 2 Annäherung und Auseinandersetzung Ausgangspunkt Barrierefreiheit und Behinderung Barrierefreiheit als Ziel Behinderte Nutzergruppen Sehbehinderung Blindheit Motorische Einschränkungen Lernschwierigkeiten Gehörlosigkeit Säulen der Barrierefreiheit Textorientierung Kontraste und Farben Skalierbarkeit Linearisierbarkeit Geräteunabhängigkeit und Dynamik Verständlichkeit, Navigation und Orientierung Strukturierte Inhalte Barrierefreiheit für alle? 24

6 2.2 Barrierefreiheit nervt Barrierefreiheit bringt keine Vorteile Standardkonformität verbessert Besucherzahlen Standardkonformität ist messbar Positive Wirkung auf die Nutzer Das machen die Programmierer Behinderte gehören nicht zu unserer Zielgruppe Wir machen nichts Neues, wir passen nur an Es funktioniert doch schon Barrierefreiheit schränkt die Gestaltungsfreiheit ein Emotionale Ansprache Verlust der Ausgabekontrolle Techniken richtig einsetzen Es beschwert sich doch keiner Wir können es nicht jedem recht machen Wir setzen Barrierefreiheit schon um Auch die gesetzlich Verpflichteten setzen Barrierefreiheit nicht um Barrierefreiheit ist legitim Von Inhalten, Werkzeugen und Zugangssoftware WCAG ATAG UAAG Vorgaben für die öffentliche Hand Barrierefreie Informationstechnik in der EU.' Deutschland Österreich Schweiz Andere Länder Weitere Richtlinien Vorgaben für privatrechtliche Organisationen ISO-Normen Sonstige Richtlinien für barrierefreie Software Barrierefreiheit sichern Problem der Prüfung Vollautomatisierte Tests und die Plaketten Selbstprüfung oder Prüfung durch Experten? Prüfumfang Testverfahren 54

7 2.4.3 Nutzertests zur Barrierefreiheit Bedeutung von Nutzertests Durchführung von Nutzertests Spezialisierte Berater Erklärung zur Barrierefreiheit Konformitätsbedingungen Selbstverpflichtung Autorenwerkzeuge Das perfekte Autorenwerkzeug gibt es nicht Die barrierefreie Eingabe nicht vergessen 62 Zusammenfassung 63 3 Spektrum Verständlichkeit Das Web ist kein Buch Komplexität der Benutzerschnittstelle Probleme sind auch Potenziale Verständliche Sprache Verständlichkeitsforschung Messung von verständlicher Sprache Wortschatz Angemessenheit von verständlicher Sprache Leichte Sprache Gebärdensprachfilme Automatische Übersetzungen Richtlinien für Gebärdensprachfilme Auswahl der Texte Erschließung von Inhalten Wege nach Rom Nutzerorientierte Navigationskonzepte Verständliche Formulare Standardkonformität Herangehensweise-typisch oder untypisch? HTML ist das Handwerk, CSS die Kunst Rückblick Inhalte vor Form CSS-Design setzt HTML voraus JavaScript als Ergänzungstechnik »Unobtrusive«oder unaufdringliches JavaScript Kompatibilitätsprobleme mit Screenreadern 100

8 3.2.4 Angemessenheit und Kompatibilität anderer Formate Portable Document Format (PDF) Multimedia Multimedia in E-Books DAISY-Bücher 111 Zusammenfassung 113 Teil II Experimente HTML und CSS HTML-Einführung HTML oder XHTML? HTML-Grundgerüst HTML-Wurzelelement Kopfbereich und HEAD-Element Dokumentkörper mit dem BODY-Element HTML-Elemente Blockelemente Inline-Elemente Linearisierbares und strukturiertes HTML Klassen und IDs Gute Planung ist die halbe Miete Beispiele für HTML-Strukturen CSS-Einführung CSS-Spezifikationen CSS-Einbindung, Selektoren und Kaskade CSS mit dem LINK-Element einbinden Das STYLE-Element Inline-CSS Selektoren und CSS-Regeln Kaskade und Spezifität Eine erste Seite mit HTML und CSS 146 Zusammenfassung Richtige oder falsche Formate? Angemessenheit eines Formats Webstandards des W3C 154

9 5.3 Grafiken Formate für Rastergrafiken Einbindung von Rastergrafiken Wahl von Alternativtexten title- und longdesc-attribut Scalable Vector Graphics (SVG) Unterstützung von SVG Aufbau eines SVG-Dokuments Einbindung eines SVG-Dokuments Zugänglichkeit von SVG Multimedia Multimedia hilft Untertitel und Audio-Deskription SMIL und SAMI Werkzeuge für die Synchronisation Untertitel Audio-Deskription Strukturierte Audio-Inhalte Dynamische Inhalte JavaScript JavaScript als Ergänzungstechnik DOM-Scripting AJAX Adobe Flash Kompatibilität Portable Document Format (PDF) Java 193 Zusammenfassung Umgang mit Gestaltungselementen Progressive Enhancement Störungen vermeiden Blinken und Bewegung Vermeidung von Ablenkung Steuerung der Dynamik Flackern Audio-Inhalte Automatisches Abspielen von Audio Vorder- und Hintergrundinformationen in Audio.. 208

10 6.3 Grafiken Schriftgrafiken Warum Schriftgrafiken problematisch sind Verwendung der Hausschrift Alternativtexte für Schriftgrafiken Verlinkte Schriftgrafiken Alternativen für Image-Maps Dekorative Grafiken Abgrenzung zwischen»dekorativ«und»informativ« Im Zweifel»informativ« Dekorative Grafiken in HTML Symbole Kontext eines Symbols HTML für verlinkte Symbole Sparsamer Einsatz von CSS für Grafiken CAPTCHAs 225 Zusammenfassung Nutzerführung Links Der Quellanker (»Link«) Linktexte Linktexte und Kontext in der Praxis Navigieren per Links und Linklisten Linktexte und title-attribut Links in Teasern Linktexte in Navigationsleisten Format- und Sprachwechsel Angabe des Formatwechsels Angabe des Sprachwechsels Kennzeichnung von Format-und Sprachwechsel Rekursive Links Neue Fenster Vermeiden von neuen Fenstern Sinnvoller Einsatz neuer Fenster Image-Maps Vorteile clientseitiger gegenüber serverseitigen Image-Maps 252 7A.b.2 Beispiel einer clientseitigen Image-Map Sonderfall: Grafische Schaltflächen in Formularen. 253

11 7.2 Navigationskonzepte Die strukturelle Navigation Navigieren mit der Tastatur Weitere Strukturmerkmale Orientierungspunkte mit ARIA Sprungmarken Navigationsleisten Struktureller Aufbau von Navigationsleisten und Menüs HTML-Grundgerüst einer Navigationsleiste Verschachtelte Einträge in der Navigation Technik zur Vermeidung rekursiver Links Alternative mit ARIA Dynamische Menüs Positionierung von Navigationsleisten und Menüs Zusammenhängende Dokumente Blätternavigationen Prozesse Ergänzungen zur Navigation Sitemaps, Übersichten und se Breadcrumb-Navigation Glossare und Verzeichnisse Tags und Tag-Clouds Adaptive Navigation Suchfunktionen Phonetische Suche Semantische Suche Erweiterte Suche Drill-downs Hilfefunktionen Beschreibende Dokumenttitel Inhalt eines beschreibenden Dokumenttitels Was gehört nicht in den Dokumenttitel? Reihenfolge der einzelnen Teile des Dokumenttitels 303 Zusammenfassung 304

12 8 Alternative Versionen Konformität zur WCAG Zulässigkeit alternativer Versionen Erreichbarkeit der alternativen Versionen Serverseitige Umleitungen auf alternative Versionen Erreichbarkeit von alternativen Versionen mit HTML Optimierte Inhaltsformen Mythos»Textversion« Verständlichkeitsfördernde Inhalte Style Switcher 316 Zusammenfassung 318 Teil III Inhalte ^ ^ 9 Zugängliche Inhalte Der barrierefreie Text Maßstäbe für verständliche Texte Vielfalt der Textsorten Lesbarkeit Satzlänge Füllwörter und Floskeln Kürzere Wörter Leserlichkeit Zeilenfall Zeilenabstände, Textorganisation Überschriften Absätze Listen Zitate Hervorhebungen Zusammenfassungen Nicht auf Position, Form und Farbe verlassen Verständliche Wörter und Begriffe Fachbegriffe und Fremdwörter Redewendungen und Metaphern Weitere ungeläufige Wörter 350

13 xvii Betonung und Bedeutung Umgang mit ungeläufigen Wörtern und Ausdrücken Eine Frage des Stils Verständliche Sprachen Kontrollierte Sprache Verständliche Amtssprache Leichte Sprache Umsetzung von Leichter Sprache Prüfung von Leichter Sprache Symbolsprachen ISOTYPE Unterstützte Kommunikation Unterstützte Kommunikation im Web 371 Zusammenfassung Redaktionsbilder Textalternativen für Bilder Informative oder dekorative Grafiken? Alternativtexte Lange Beschreibungen Lange Beschreibungen im Kontext Lange Beschreibungen in einem OBJECT-Element Verknüpfung von langen Beschreibungen Verlinkung von langen Beschreibungen longdesc oder Link? Häufige Alternativtextfehler Fehlendes alt-attribut Automatische Vergabe von Alternativtexten Epische Alternativtexte Urheberhinweise Überflüssige Keywords Informationsvermittlung über Farbe oder Position allein Alternativtexte und lange Beschreibungen in der redaktionellen Praxis Fotos Symbole, Zeichen, Logos und Wortbildmarken Komplexe Grafiken Schaubilder und Diagramme Zeichnungen, Cartoons und Karikaturen 394

14 Gemälde und andere Kunstgegenstände Formeln Tabellen Kontrastverhältnisse und Mindestschriftgröße 397 Zusammenfassung Technische Zugänglichkeit Datentabellen Datentabellen erkennen Elemente für Datentabellen Aufbau einer einfachen Datentabelle Das TH-Element Verbinden von Zellen Zeilengruppen Tabellenüberschriften, Zusammenfassungen und Abkürzungen Tabellenüberschriften Zusammenfassungen für Datentabellen Tabellenüberschrift oder Zusammenfassung? Verknüpfungen von Tabellenzellen Verknüpfungen mit dem scope-attribut Verknüpfungen mit headers und id Kurzformen für Kopfzellen Layoutelemente in Datentabellen vermeiden Datentabellen oder Listen? Sprachangaben Sprachwechsel Welche Sprachen sollten ausgezeichnet werden? Sprache von Zielankern CSS für fremdsprachige Texte Abkürzungen Abkürzungen auflösen Sprache und Aussprache von Abkürzungen Programmierseitige Lösungen für Abkürzungen und Sprachwechsel Allgemeine Anforderungen Empfehlungen für die Behandlung von Abkürzungen 430 Zusammenfassung 431

15 xix 12 PDF umsetzen und prüfen Barrierefreiheit in PDF verstehen - Gerüchte, Geschichte und gegenwärtige Lage PDF als strukturiertes Format Ein Blick zurück PDF als offener internationaler Standard Barrierefreiheit im Standard PDF/UA ISO-Spezifikation und die aktuelle Praxis Zugänglichkeitsunterstützung von PDF Wie sieht der aktuelle Stand aus? Quellformate im Blick Klärung einiger Begriffe Merkmale barrierefreier PDF-Dateien Eine Frage vorweg Durchsuchbarer Text als Voraussetzung Dokument auf durchsuchbaren Text prüfen Eingescannte Inhalte mit OCR bearbeiten Dokument konsistent gliedern und korrekten Zeichencode verwenden Konsistente Gliederung Korrekte Zeichenkodierung Silbentrennung als Spezialfall Über PDF-Tags Strukturinformationen anlegen PDF-Tags näher betrachtet Prüfen, ob Tags vorhanden sind Korrekter Einsatz von Tags Unterschiedliche Reihenfolgen Vorlese-Reihenfolge Umfließen-Reihenfolge Tab-Reihenfolge Alternativtexte Komplexe Grafiken Diagramme Bildbeschriftung Artefakte Verknüpfungen Tastaturbedienbare Links Link mit OBJR-Element in Acrobat anlegen Hintergrundfarbe von Texten Lesezeichen 454

16 Startansicht für eine PDF-Datei Sprache der Inhalte festlegen Dokumentsprache Sprachwechsel Umfließen-Ansicht Tastaturbedienbarkeit Bedienbare Formularfelder Abkürzungen Kompatibilität ISO-Standardkonformität und korrekte Syntax Abwärtskompatibilität, Komprimierung und schnelle Webanzeige Sicherheitseinstellungen Workflows zum Erstellen barrierefreier PDFs PDF ist ein Sekundärformat Barrierefreie PDFs erstellen Barrierefreie PDFs bearbeiten Die acht Phasen jedes Workflows Quelldatei als Ausgangspunkt Flache PDF-Datei als Ausgangspunkt Textverarbeitung Phase 1: Inhalte mit Strukturinformationen versehen (»strukturiert arbeiten«) als Vorarbeit für PDF-Tags Phase 2: Barrierefrei gestalten Phase 3: Merkmale der Barrierefreiheit im Quelldokument anlegen Phase 4: Tags erstellen Phase 5: Zwischenprüfung Was bleibt noch in Acrobat zu tun? Tabellendokumente Präsentationen InDesign Phase 1 : Vorarbeit für PDF-Tags - Strukturinformationen anlegen Phase 2: Gestalten - formatspezifische Aspekte Phase 3: Merkmale der Barrierefreiheit anlegen Phase 4: Tags erzeugen Phase 5: Zwischenprüfung Was bleibt noch in Acrobat zu tun? 491

17 Formulare AcroForms vs. XFA Strukturinformationen anlegen Formularspezifische Aspekte der Gestaltung Anlegen von Merkmalen der Barrierefreiheit Tags erzeugen Prüfen als Abschluss Barrierefreie PDF aus XML und HTML HTML XML Qualitätssicherung als Herausforderung Prüfwerkzeuge Werkzeuge für die automatische Prüfung (Stufe 1) Werkzeuge für die manuelle Prüfung (Stufe 2) Werkzeuge für die Praxisprüfung (Stufe 3) Stufe 1 : Die automatische Prüfung -»Auf Knopfdruck prüfen« Vorgehen mit Acrobat Vorgehen mit PAC Null Fehler deuten auf eine technische Validität hin Stufe 2: Die manuelle Prüfung -»Von Hand sowie mit Kopf und Verstand« Schritt 1 : Die Zuordnung des Tags zum Inhaltselement prüfen Schritt 2: Leere Tags entdecken Schritt 3: Vorlese-Reihenfolge kontrollieren Schritt 4: Alternative Darstellungsoptionen und Navigation ausprobieren Schritt 5: Weitere Dokumenteigenschaften prüfen Zwei Wege, um die Schritte 1-3 durchzuführen Stufe 3: Härtetest mit Vorlesesoftware Fazit und Ausblick Barrierefreiheit in PDF verstehen Merkmale Workflows Qualitätssicherung 515

18 13 Technischer Unterbau Validität Kompatibilität sichert die Zugänglichkeit HTML-Validierung Validatoren für HTML-Dokumente Strategie der Fehlervermeidung HTML semantisch richtig anwenden Werkzeuge zur Prüfung der Barrierefreiheit Allgemeine Sorgfaltspflichten Zeichenkodierung Zeichensatz und Zeichenkodierung Zeichenkodierung festlegen Dokumentsprache Texte mit unterschiedlicher Schriftrichtung 533 Zusammenfassung Layouttechniken CSS-Design Voraussetzungen für ein CSS-Design Trennung von Inhalt und Layout Linearisierbare Inhalte Strukturierte Inhalte CSS-Regeln für ein HTML-Grundgerüst Überprüfung des HTML CSS-Regeln für den Beispielauftritt Layouttabellen sind wie Briefe in Excel Frames Grundlegendes zu Frames Grundgerüst eines Framesets Grundgerüst für ein IFRAME Alternativtexte für das FRAMESET-Element Inhalte der Frames HTML-Attribute für Frames 565 Zusammenfassung 566

19 15 Formulare Aufbau eines Formulars Das FORM-Element Steuerelemente INPUT-Element SELECT-Element(Auswahllisten) TEXTAREA-Element (mehrzeilige Eingabefelder) BUTTON-Element (Schaltflächen) Beschriftungen LABEL-Element Inhalte für das LABEL-Element Alternative Beschriftungen Beschriftung von Schaltflächen Schaltflächen für Formulare Schaltflächen außerhalb von Formularen Strukturen in Formularen Optimierung der HTML-Strukturen Gruppierung von Steuerelementen Lange Auswahllisten Reihenfolge der Formularinhalte Linearisierbare Formulare Positionierung am Bildschirm Fehlervermeidung und -behandlung Kontextuelle Hilfen Links zu Hilfe-Funktionen Eingabeabhängige Hilfe 595 Zusammenfassung Tastaturbedienung und dynamische Inhalte Bedeutung der Tastaturbedienung Tastaturbedienung in HTML Nicht erreichbare Inhalte und Tastaturfallen Konsistenter Seitenaufbau Sichtbarer Fokus Ohne Fokus nichts los Einsatz von tabindex und accesskey Das tabindex-attribut Das accesskey-attribut 613

20 Vermeidung redundanter Links Auswahllisten als Alternative zu Linklisten Integrierte Linklisten in Image-Maps Erhaltung von Rolle, Name und Status Standardisierte HTML-Elemente Event-Handler Wichtige Event-Handler Geräteunabhängiger Einsatz von Event-Handlern Vorsicht mit logischen Event-Handlern DOM-Scripting und»unobtrusive«javascript Kein Verlass auf JavaScript Methoden des DOM Unaufdringliches JavaScript Lücken mit ARIA schließen Einsatz von JavaScript und ARIA JavaScript ohne Fallback-Lösung JavaScript-Beispiel Kontextänderung bei Zeitbeschränkungen Weiterleitungen Automatische Seitenaktualisierungen 643 Zusammenfassung 644 Teil V Screendesign Flexible Darstellung Vergrößerung von Inhalten Mindestschriftgröße Schriftvergrößerung Relative Maßeinheiten Vererbungsprinzip Probleme bei absoluten Schriftgrößenangaben Seitenzoom Flüssiges Layout Anforderungen im Überblick Flüssig, elastisch oder starr Flüssiges Layout in der Praxis 671

21 17.3 Größenangaben in HTML Grafiken Vergrößerbare Frames Tabellen mit Angaben zur Spaltenbreite Typografisches Leserlichkeit von Texten Gestaltungselemente ohne Vergrößerbarkeit 685 Zusammenfassung Kontraste und Farben Mindestkontrastverhältnis Schwellenwerte Kontrastverhältnisse und Schriftgrößen Messung von Kontrastverhältnissen Benutzerdefinierte Farbeinstellungen Anpassung der Farben Sowohl Vordergrund- als auch Hintergrundfarbe Weder Vordergrund-noch Hintergrundfarbe Ausnahmen für Mindestkontrastverhältnisse Wo die WCAG20 zu kurz greifen /2.1 Farbkombinationen Mindestkontrastverhältnis ist keine Garantie Schaubilder und andere Info-Grafiken 696 Zusammenfassung Mehrfachkennzeichnung Informationen über mehrere Wege vermitteln Farbe als einziger Informationsträger Bildschirmabhängige Hinweise Mehrfachkennzeichnung in der Praxis Links Unterstreichung oder nicht? Unterschiede im Kontrastverhältnis border-technik für Navigationslinks Inhalte Überschriften Listen Hervorhebungen im Fließtext 709

22 Farbig hinterlegte Bereiche Tabellen Grafiken Formulare Pflichtfelder Fehlermeldungen Mehrfachkennzeichnung ist interdisziplinär Zusammenspiel von Screendesignem und Programmierern Zusammenspiel von Screendesignem und Redaktion 717 Zusammenfassung 717 </ende> J Gedanken zum Schluss 721 Anhang 725 A Erfolgskriterien der WCAG A.1 Konformitätsbedingungen 728 A.2 Prinzip A.3 Prinzip A.4 Prinzip A.5 Prinzip B PDF-Standard-Tags 745 B.1 Zusammenfassende Elemente 746 B.2 Blockelemente 747 B.2.1 Absatzähnliche Elemente 747 B.2.2 Listenelemente 748 B.2.3 Tabellenelemente 748 B.3 Inline-Elemente 749 B.4 Bildhafte Elemente 750 C Literatur und weitere Quellen 751 C.1 Bücher und Artikel 751 C.2 Onlinequellen 752 Index 771