Alle Kapitel aufklappen
Alle Kapitel zuklappen
Geleitwort von Joschi Kuphal: Digitale Barrierefreiheit als gemeinschaftliche Aufgabe
17
Für wen ist dieses Buch? Warum sollten Sie es lesen?
19
TEIL I Bedürfnisse der Menschen, rechtliche Grundlagen und erste Prüfungen der Barrierefreiheit Ihrer Website
25
Kapitel 1 Digitale Barrierefreiheit
27
1.1 Was ist digitale Barrierefreiheit?
28
1.2 Permanente, temporäre und situative Einschränkungen/Behinderungen
31
1.3 Arten von Behinderungen und die Konsequenzen für Ihre Website/Anwendung
32
1.3.1 Nutzende ohne oder mit eingeschränktem Sehvermögen
33
1.3.2 Rot-Grün-Schwäche bzw. Farbenblindheit
36
1.3.3 Nutzende ohne oder mit eingeschränktem Hörvermögen
38
1.3.4 Nutzende mit keinem oder eingeschränktem Sprachvermögen
40
1.3.5 Physische Einschränkungen oder eingeschränkte Reichweite
41
1.3.6 Kognitive Einschränkungen und eingeschränkte Lernfähigkeiten
44
1.4 Barrierefreiheitsanforderungen – die Europäische Norm EN 301 549
48
1.4.1 Die Kapitel der EN 301 549
50
1.4.2 Accessibility-Overlay-Tools
51
1.5 Webinhalte für alle – die Web Content Accessibility Guidelines (WCAG)
52
1.5.1 Prinzipien und Richtlinien der WCAG
52
1.5.2 Erfolgskriterien und Konformitätsstufen der WCAG
54
1.6 Die ersten Schritte zur Barrierefreiheit Ihrer Website
59
1.6.1 Übersicht über standardisierte Testverfahren und Selbsttests
60
1.6.2 Seitenauswahl bei der Prüfung auf Barrierefreiheit
62
1.6.3 Schritt für Schritt erste Potenziale entdecken – praktische Anwendung von Accessibility Insights for Web
64
1.7 Tools für erste Optimierungspotenziale
75
1.7.1 Google Lighthouse
75
1.7.2 Silktide Accessibility Checker
77
1.7.3 Einsatz von Bookmarklets zur Prüfung auf Barrierefreiheit
78
1.7.4 ChatGPT zur Codeoptimierung und Prüfung
80
1.8 Zusammenfassung des Kapitels
84
Kapitel 2 Bedürfnisse der Nutzenden verstehen, und zwar aller
87
2.1 Menschzentrierter Gestaltungsprozess – die Nutzenden in den Mittelpunkt stellen
88
2.2 Heterogene Nutzende – Betroffene integrieren
91
2.3 Screenreader und Co. – Unterstützung durch assistive Technologien
94
2.3.1 Was sind assistive Technologien?
94
2.3.2 Einrichten des kostenlosen Screenreaders NVDA
95
2.4 Design und Barrierefreiheit – ein Widerspruch?
99
2.5 Kulturelle Besonderheiten
101
2.6 Barrierefreiheit ist für alle ein Gewinn
102
2.6.1 Image und Marke stärken
104
2.6.2 Mehr Power im Onlinemarketing
105
2.6.3 Mehr Nutzende erreichen (auch solche ohne Einschränkungen)
106
2.7 Zusammenfassung des Kapitels
108
TEIL II Technische Grundlagen für barrierefreie Websites
111
Kapitel 3 Das Fundament barrierefreier Websites – HTML und der Accessibility Tree
113
3.1 HTML – die Grundlage von Websites
114
3.2 Tags und Attribute in HTML
120
3.3 Bedeutung des semantischen HTML für die Barrierefreiheit
122
3.4 DOM und Accessibility Tree
126
3.4.1 Document Object Model (DOM)
127
3.4.2 Accessibility Tree
130
3.5 Zusammenfassung des Kapitels
135
Kapitel 4 Die perfekte Website – eine Kombination aus HTML, CSS, JavaScript und WAI ARIA
137
4.1 CSS – das Design von Websites
138
4.1.1 Die Eigenschaft »display« und ihr Einfluss auf die Barrierefreiheit
140
4.1.2 Manipulation von CSS im Browser mit dem Plug-in Web Developer
142
4.2 Zusammenspiel zwischen HTML, CSS, JavaScript und WAI ARIA
143
4.2.1 Worst Practice – Kombination von Techniken anstelle von nativem HTML
143
4.2.2 Idealtypischer Einsatz der Techniken
146
4.4.1 ARIA-Komponenten: Roles, States und Properties
149
4.4.2 Die zwei Prinzipien der ARIA-Nutzung
153
4.4.3 Erste Regel der ARIA-Nutzung: Bevorzuge natives HTML
154
4.4.4 Zweite Regel der ARIA-Nutzung: Ändere keine nativen Semantiken
155
4.4.5 Dritte Regel der ARIA-Nutzung: Alles mit der Tastatur nutzbar
156
4.4.6 Vierte Regel der ARIA-Nutzung: Vermeide »aria-hidden="true"« und »role="presentation"« bei fokussierbaren Elementen
157
4.4.7 Fünfte Regel der ARIA-Nutzung: Zugängliche Namen für interaktive Elemente
158
4.4.8 ARIA-Beispiele – Best Practices
158
4.4.9 ARIA-Landmarks – Bereiche auszeichnen
160
4.5 Kompatibilität mit aktuellen und zukünftigen assistiven Technologien gewährleisten
165
4.5.1 Validierung von HTML
166
4.5.2 Name, Rolle, Wert
167
4.5.3 Statusmeldungen
169
4.6 KoliBri – die Komponentenbibliothek für die Barrierefreiheit
170
4.7 Tools zur Optimierung
171
4.7.1 WAVE (Web Accessibility Evaluation Tool)
171
4.8 Zusammenfassung des Kapitels
174
TEIL III Barrierefreie Inhalte – die Basis Ihrer Website
177
Kapitel 5 Texte und Inhalte auf Website und App zielgruppengerecht aufbereiten
179
5.1 Visuelle Informationen und kognitive Leichtigkeit
179
5.2 Texte zielgruppenkonform gestalten – Verständlichkeit und Lesbarkeit erhöhen
183
5.2.1 Das Hamburger Verständnismodell
183
5.2.2 Optimierung der Lesbarkeit von Texten
184
5.2.3 Erläuterung von Abkürzungen
187
5.2.4 Redewendungen und Metaphern
188
5.3 Prinzipien der Leichten Sprache
189
5.4 Prinzipien der Einfachen Sprache
190
5.5 Optimierung der Aussprache von Texten in Screenreadern
192
5.5.1 Festlegung der Sprache sowie Aussprache von Teilen in einer Fremdsprache
192
5.5.2 Anglizismen und Fachbegriffe sowie deren Aussprache
194
5.6 Zusammenfassung des Kapitels
195
Kapitel 6 Texte und Inhalte auf Website und App barrierefrei gestalten
197
6.1 Einsatz von Farbe
197
6.2 Wie ist das notwendige Kontrastverhältnis?
201
6.2.1 Das notwendige Kontrastverhältnis nach WCAG 2.2
202
6.2.2 APCA, voraussichtlich ab WCAG 3.0
205
6.3 Schriftart und Schriftgröße
206
6.4 Abstände und Schreibweisen
214
6.4.1 Vermeidung von Versalien in Texten
214
6.4.2 Zeilenabstand, Zeilenlänge und Zeichenabstand
215
6.4.3 Vermeiden Sie leere <p>-Elemente auf Ihrer Webseite
216
6.5 Zoom und Anpassung von Textabständen
216
6.5.1 Individuelle Anpassung von Text
216
6.5.2 Das Meta-Tag »viewport«
219
6.6 Bilder eines Textes (Schriftgrafik)
220
6.7 Auszeichnung der Überschriften im Text (H1–H6)
222
6.8 Fettungen und kursive Wörter
224
6.9 Auszeichnung von Tabellen
225
6.9.1 Zeilen und Spalten in Tabellen für Screenreader auszeichnen
226
6.9.2 Komplexe Tabellen und Layouttabellen
231
6.10 Auszeichnung von Listen
234
6.11 Zitate barrierefrei auszeichnen
237
6.12 Kontaktinformationen (Adresse, Telefonnummer)
238
6.13 Textausrichtung im internationalen Umfeld definieren
239
6.14 Zusammenfassung des Kapitels
240
Kapitel 7 Visuelles und auditives Design barrierefrei umsetzen
243
7.1 Barrierefreie Grafiken und Bilder – Alt-Texte, Title und Bildlinks korrekt einsetzen
244
7.1.1 Eigenschaften und Vorteile barrierefreier Grafiken
245
7.1.2 Das alt-Attribut – alternative Texte für Ihre Bilder
248
7.1.3 Auszeichnung dekorativer Elemente (dekorativer Bilder)
252
7.2 Flackern und Blinken
253
7.3 Barrierefreie Integration von iFrames
255
7.4 CAPTCHAs im Hinblick auf Barrierefreiheit
256
7.5 Integrierte Barrierefreiheitsfunktionen (Kontrasterhöhungen, Schriftgröße) sowie konforme alternative Version
258
7.6 Audio auf Websites barrierefrei implementieren
259
7.6.1 Audio-Autostart
260
7.6.2 Hintergrund-Audioinhalt
261
7.6.3 Audiodeskription
261
7.7 Video auf Websites barrierefrei implementieren
263
7.7.2 Liveübertragung mit Untertiteln
268
7.8 Zusätzliche Video- und Audiofähigkeiten nach der EN 301 549 Kapitel 7
269
7.9 Zusammenfassung des Kapitels
271
Kapitel 8 Bedienbarkeit? Menschen zum Ziel führen
273
8.1 Was ist bei der Navigation auf Websites zu beachten?
274
8.1.1 Links mit und ohne separate Fenster
274
8.1.2 Bereiche überspringen
279
8.1.3 Konsistente Bezeichnung von Bedienelementen
281
8.1.4 Pausieren, Beenden und Ausblenden von dynamischen Elementen wie einem Bilderkarussell
282
8.2 Wie ist die optimale Nutzung von Tastatureingaben?
283
8.2.1 Fokusreihenfolge
286
8.2.2 Event-Handler – Hovern oder Fokus
288
8.3 Notwendige Zielgrößen von Interaktionselementen (Buttons)
292
8.4 Zeitlich limitierte Interaktionen (»nur noch X Minuten«)
295
8.5 Ein Navigationskonzept barrierefrei umsetzen
297
8.5.1 Informationsarchitektur
297
8.5.2 Navigation per Tastatur – Tastaturkurzbefehle modifizieren
301
8.5.3 Einsatz von WAI ARIA in der Navigation
304
8.5.5 Navigationskonzept sowie Breadcrumbs
307
8.5.7 Konsistente Hilfe
313
8.5.8 Gesten und Bewegungen zur Eingabe sowie deren Alternativen
314
8.5.9 Eingabegesten abbrechen
316
8.5.10 Orientierung – Hochformat vs. Querformat in der mobilen Nutzung
316
8.6 Zusammenfassung des Kapitels
317
Kapitel 9 Formulare – barrierefrei erstellt
321
9.1 Grundstruktur eines barrierefreien Formulars
324
9.2 Eingabeelemente und mobile Tastaturlayouts in Formularen
326
9.3 Beschriftungen von Formularelementen
330
9.4 Unsichtbare Beschriftungen – z. B. interne Suche
331
9.5 Reihenfolge und Gruppierung von Formularfeldern
332
9.6 Auszeichnung von Pflichtfeldern – »required« vs. »aria-required«
334
9.7 Umgang mit der Autokorrektur in Formularfeldern
335
9.9 Button und Buttongestaltung (Kontrast)
337
9.10 Fehlerbehandlung in Formularen
339
9.11 Spezifische Eigenschaften der Eingabefelder
346
9.11.1 Dropdown-Felder und Eingabe von Mehrfachauswahlen
346
9.11.2 Drag-and-Drop-Aktionen
348
9.11.3 Redundante Eingaben
349
9.11.4 Authentifizierung leicht gemacht
351
9.13 Zusammenfassung des Kapitels
352
TEIL IV Barrierefreie Social-Media- und PDF-Dokumente
355
Kapitel 10 Inhalte auf Social-Media-Plattformen
357
10.1 Text, Sprache, Emojis und Hashtags
357
10.1.1 Emojis sparsam einsetzen
357
10.1.2 Keine Textformatierung über Unicode
358
10.2 Bilder in Social Media
360
10.2.1 Alt-Text bzw. Bildbeschreibungen
360
10.2.2 Texte auf Bildern
361
10.2.3 Kontrastreiche Farben und Hintergründe
361
10.2.4 Keine ASCII-Kunst
361
10.2.5 GIFs und Blinken
362
10.4 Checkliste für Social Media
362
10.5 Zusammenfassung des Kapitels
363
Kapitel 11 Barrierefreie PDFs erstellen und einsetzen
365
11.1 Warum auch PDF-Dokumente barrierefrei sein sollten
365
11.2 PDF-Tags – die Basis barrierefreier PDF-Dokumente
368
11.2.1 Gliederung bzw. Strukturierung eines PDF-Dokuments mit Tags
371
11.2.3 Alternativtexte für Bilder
373
11.2.4 Verlinkungen (intern/extern)
374
11.3 Schritt für Schritt: Barrierefreies PDF mit Microsoft Word
375
11.3.1 Inhalte mittels Formatvorlagen strukturieren
375
11.3.2 Bilder mit Alternativtexten versehen
378
11.3.3 Umbrüche und Leerzeichen korrekt einsetzen
379
11.3.4 Verwendung von Farbe und Kontrasten
380
11.3.7 Weitere typografische Konventionen
382
11.3.8 Spezifische Einstellungen am Dokument
382
11.3.9 Prüfung der Barrierefreiheit in Word
384
11.3.10 PDF-Dokument erzeugen
386
11.4 Prüfung der Barrierefreiheit eines PDFs
387
11.4.1 Matterhorn-Protokoll: Prüfkriterien der Barrierefreiheit von PDFs
388
11.4.2 Möglichkeiten der maschinellen Prüfung mit PAC (PDF Accessibility Checker)
391
11.4.3 Möglichkeiten der maschinellen Prüfung mit Adobe Acrobat Pro
394
11.4.4 Aspekte der manuellen Prüfung
395
11.4.5 PDF-Dokumente schützen inklusive des Zugriffs für Screenreader
398
11.5 Reihenfolgen für das Vorlesen definieren und prüfen
398
11.5.1 Lesereihenfolge (Reading Order)
398
11.5.2 Umfließen-Reihenfolge (Reflow Order)
399
11.6 Zusammenfassung des Kapitels
400
TEIL V Barrierefreie Software und Apps – Umsetzung in WordPress
403
Kapitel 12 Apps barrierefrei umsetzen – barrierefreie Aspekte bei Smartphones
405
12.1 Barrierefreiheitsfunktionen aktivieren
407
12.2 Allgemeine Besonderheiten bei Apps
412
12.2.1 Biometrie (Kriterium 5.3 der EN 301 549)
413
12.2.2 Eingabeverhalten
413
12.3 Prüfung der Wahrnehmbarkeit
414
12.4 Besonderheiten der Bedienbarkeit
417
12.5 Besonderheiten der Verständlichkeit
417
12.6 Besonderheiten der Robustheit/Interoperabilität
418
12.7 Zusammenfassung des Kapitels
418
Kapitel 13 WordPress und Co. barrierefrei gestalten
419
13.2 Aspekte der Barrierefreiheit in WordPress
423
13.2.1 Überschriften (H1–H6) einfügen
423
13.2.2 Alternativtexte für Bilder hinterlegen
424
13.2.3 Tabellen einfügen
424
13.2.4 Direkte HTML-Bearbeitung eines Elements
426
13.3 Plug-ins für Barrierefreiheit
427
13.3.1 WP Accessibility
427
13.3.2 One Click Accessibility
428
13.4 Zusammenfassung des Kapitels
429
TEIL VI Prozesse, Rollen und rechtliche Ergänzungen
431
Kapitel 14 Barrierefreie Prozesse im Unternehmen nachhaltig umsetzen
433
14.1 Warum die Rolle des Managements für Barrierefreiheit so wichtig ist
433
14.2 Barrierefreiheit kontinuierlich prüfen und im Unternehmen implementieren
434
14.2.1 Content-Generierung und Strukturierung (Redakteur/innen)
435
14.2.2 UI-/Grafikdesigner/innen
436
14.2.3 UX-Designer/innen
437
14.2.4 Entwickler/innen
439
14.3 Know-how im Unternehmen aufbauen und teilen
441
14.4 W3C Accessibility Maturity Model
442
14.5 Entwicklung mit Fokus auf Barrierefreiheit
443
14.5.1 Zieldefinition
444
14.5.2 Planung von Budget und Ressourcen
444
14.6 Implementierung eines universellen Designs
446
14.7 Zusammenfassung des Kapitels
447
Kapitel 15 Gesetze, Normen und Richtlinien für barrierefreie Websites
449
15.1 Was das Barrierefreiheitsstärkungsgesetz für Sie bedeutet (seit dem 28. Juni 2025)
450
15.1.1 Für wen gilt das BFSG?
450
15.1.2 Auswirkung für Onlineshops und kommerzielle Websites
451
15.1.3 Was passiert bei einem Verstoß?
453
15.1.4 Welche Anforderungen gibt es nach dem BFSG?
454
15.1.5 Welche Inhalte hat die Erklärung zur Barrierefreiheit?
454
15.2 Weitere Prüfschritte für Websites auf Basis der EN 301 549
456
15.2.1 Kapitel 6: Zwei-Wege-Sprachkommunikation
457
15.2.2 Kapitel 11: Autorenwerkzeuge
459
15.2.3 Kapitel 12: Dokumentation und Support
460
15.3 Zusammenfassung der WCAG 2.2 mit Referenz im Buch
461
15.3.1 Prinzip 1: Wahrnehmbar
461
15.3.2 Prinzip 2: Bedienbar
470
15.3.3 Prinzip 3: Verständlich
481
15.3.4 Prinzip 4: Robust
488
15.4 Kurzer Ausblick auf die WCAG 3.0
489
15.5 Vorgaben für die öffentliche Hand – die BITV 2.0
489
15.5.1 Richtlinie (EU) 2016/2102 des Europäischen Parlaments und des Rates vom 26. Oktober 2016
495
15.5.2 Erklärung zur Barrierefreiheit
496
15.6 Authoring Tool Accessibility Guidelines (ATAG) 2.0
498
15.7 User Agent Accessibility Guidelines (UAAG)
501
15.8 Gesetzliche Situation in Österreich und der Schweiz
501
15.9 Zusammenfassung des Kapitels
504
Kapitel 16 Checklisten
507
16.1 Checkliste zu generellen und technischen Aspekten einer Website
507
16.2 Checkliste für Seiteninhalte
509
16.3 Checkliste für Farben und Kontraste
512
16.4 Checkliste für Bilder
513
16.5 Checkliste für Video und Audio
514
16.6 Checkliste für Formulare
515
16.7 Checkliste für PDF-Dokumente
517
16.8 Checkliste für Social-Media-Beiträge
518