Barrierefreie Webseiten

Sind Sie bereit für die digitalen Anforderungen der Barrierefreiheit? Eine verbesserte Zugänglichkeit, Nutzerführung und Inklusion sind für alle von Vorteil. Angesichts des bevorstehenden Barrierefreiheitstärkungsgesetzes, das ab dem 28. Juni 2025 in Kraft tritt, stehen viele Webentwicklerinnen und Webentwicker vor der Herausforderung, barrierefreie Websites zu gestalten, die für jede und jeden zugänglich sind. Unser Buch ist ein unverzichtbarer Leitfaden für Entwicklung und Gestaltung, um auch die Anforderungen des Gesetzes zu erfüllen. Von den grundlegenden Prinzipien der Barrierefreiheit bis hin zu fortgeschrittenen Techniken und Tools, um Barrieren für Menschen mit Behinderungen zu überwinden, finden Sie in diesem Buch alle wichtigen Themen. Aus dem Inhalt: - Grundlagen der digitalen Barrierefreiheit - Barrierefreiheit testen und prüfen - Technische Grundlagen: HTML, CSS, JavaScript, WAI ARIA - Barrierefreie Webseiten gestalten - Content: Texte, Audio und Video barrierefrei umsetzen - Bedienbarkeit: Menschen zum Ziel führen - Leichte Sprache - Formulare und Eingabefelder - Barrierefreie PDF erstellen und einsetzen - Apps barrierefrei umsetzen - Testing

Tobias Aubele ist Professor für Usability und Conversion-Optimierung an der Hochschule Würzburg-Schweinfurt und hier für den Studiengang E-Commerce verantwortlich. Er ist aber auch in der Praxis tätig und seit vielen Jahren Berater für Usability, Conversion-Optimierung sowie Webanalyse. Barrierefreiheit spielt eine große Rolle in seiner Beratung und im Studiengang, da er in den Prinzipien grundsätzlich einen Gewinn sieht - für Benutzerführung und Verständlichkeit. Und für jeden Menschen.

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.4 ... Barrierefreiheitsanforderungen -- die Europäische Norm EN 301 549 ... 48 1.5 ... Webinhalte für alle -- die Web Content Accessibility Guidelines (WCAG) ... 52 1.6 ... Die ersten Schritte zur Barrierefreiheit Ihrer Website ... 59 1.7 ... Tools für erste Optimierungspotenziale ... 75 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.4 ... Design und Barrierefreiheit -- ein Widerspruch? ... 99 2.5 ... Kulturelle Besonderheiten ... 101 2.6 ... Barrierefreiheit ist für alle ein Gewinn ... 102 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.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.2 ... Zusammenspiel zwischen HTML, CSS, JavaScript und WAI ARIA ... 143 4.3 ... JavaScript ... 147 4.4 ... WAI ARIA ... 148 4.5 ... Kompatibilität mit aktuellen und zukünftigen assistiven Technologien gewährleisten ... 165 4.6 ... KoliBri -- die Komponentenbibliothek für die Barrierefreiheit ... 170 4.7 ... Tools zur Optimierung ... 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.3 ... Prinzipien der Leichten Sprache ... 189 5.4 ... Prinzipien der Einfachen Sprache ... 190 5.5 ... Optimierung der Aussprache von Texten in Screenreadern ... 192 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.3 ... Schriftart und Schriftgröße ... 206 6.4 ... Abstände und Schreibweisen ... 214 6.5 ... Zoom und Anpassung von Textabständen ... 216 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.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.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.7 ... Video auf Websites barrierefrei implementieren ... 263 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.2 ... Wie ist die optimale Nutzung von Tastatureingaben? ... 283 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.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.8 ... Autocomplete ... 336 9.9 ... Button und Buttongestaltung (Kontrast) ... 337 9.10 ... Fehlerbehandlung in Formularen ... 339 9.11 ... Spezifische Eigenschaften der Eingabefelder ... 346 9.12 ... Hilfestellungen ... 352 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.2 ... Bilder in Social Media ... 360 10.3 ... Audio und Video ... 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.3 ... Schritt für Schritt: Barrierefreies PDF mit Microsoft Word ... 375 11.4 ... Prüfung der Barrierefreiheit eines PDFs ... 387 11.5 ... Reihenfolgen für das Vorlesen definieren und prüfen ... 398 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.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.1 ... Wahl des Themes ... 419 13.2 ... Aspekte der Barrierefreiheit in WordPress ... 423 13.3 ... Plug-ins für Barrierefreiheit ... 427 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.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.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.2 ... Weitere Prüfschritte für Websites auf Basis der EN 301 549 ... 456 15.3 ... Zusammenfassung der WCAG 2.2 mit Referenz im Buch ... 461 15.4 ... Kurzer Ausblick auf die WCAG 3.0 ... 489 15.5 ... Vorgaben für die öffentliche Hand -- die BITV 2.0 ... 489 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 Index ... 519