Aubele / Girke Barrierefreie Webseiten

Grundlagen, Anwendung, Praxis
1. Auflage 2025
ISBN: 978-3-367-11251-7
Verlag: Rheinwerk
Format: EPUB
Kopierschutz: 0 - No protection

E-Book, Deutsch, 525 Seiten

Reihe: Rheinwerk Computing

Wie steht es auf Ihrer Website um die Anforderungen der digitalen Barrierefreiheit? Eine verbesserte Zugänglichkeit, Nutzerführung und Inklusion sind für alle von Vorteil. Mit dem am 28. Juni 2025 in Kraft getretenen Barrierefreiheitsstärkungsgesetzes (BFSG), stehen viele Webentwicklerinnen und Webentwicker vor der Herausforderung, barrierefreie Websites zu gestalten, die für jede und jeden zugänglich sind. Dieses Buch von Tobias Aubele und Detlef Girke ist ein unverzichtbarer Leitfaden für die 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 und bereiten sich optimal vor.

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.

Autoren/Hrsg.

Aubele, Tobias

Girke, Detlef

Inhaltsverzeichnis

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

Leseproben

Für wen ist dieses Buch? Warum sollten Sie es lesen?

Die Nutzenden stehen an erster Stelle.

Herzlichen Glückwunsch, dass Sie sich für dieses Buch entschieden haben! Sie haben damit eine wertvolle Wissens- und Inspirationsquelle, die Ihnen hilft, den Fokus auf alle Nutzenden einer Website oder App zu legen – und das ganz konkret in Ihrer täglichen Praxis. Vielleicht haben Sie dieses Buch gekauft, weil Sie sich mit den Anforderungen des Barrierefreiheitsstärkungsgesetzes (BFSG) beschäftigen (müssen). Auch dann sind Sie bei diesem Buch genau richtig, aber denken Sie daran, dass es nicht nur um Regeln und Vorschriften geht, sondern um die Teilhabe am Internet.

Wenn Sie dieses Buch benutzen, stehen Sie vielleicht am Anfang einer Reise, die hoffentlich nicht nur Ihre Sicht auf die Webentwicklung verändern, sondern auch das Leben vieler Menschen nachhaltig positiv beeinflussen wird. Barrierefreiheit ist nicht nur eine Checkliste für die Rechtsabteilung, es geht um uns Menschen. Barrierefreiheit im digitalen Raum ist keine Nebensache, die nebenbei erledigt wird. Sie ist eine wesentliche Komponente moderner Technikgestaltung, die uns alle betrifft. Vergessen wir für einen Moment die trockenen Erfolgskriterien der WCAG (Web Content Accessibility Guidelines) oder die Prüfkriterien der BITV (Barrierefreie-Informationstechnik-Verordnung), die oft als Einstieg in das Thema genannt werden. Sie sind zwar unverzichtbar, aber nicht der Kern unseres Anliegens. Bevor wir in die technischen Details einsteigen, möchten wir Ihnen eine grundlegendere Perspektive eröffnen – die Perspektive von Menschen mit Behinderungen. Wenn Sie das Design barrierefrei gestalten, dann schaffen Sie den Zugang für viele Menschen zu Ihren Informationen, der ihnen bislang nicht möglich war. Gegebenenfalls müssen Sie nur kleine Dinge anpassen, die für viele eine große Wirkung entfalten können. Menschen werden durch Websites in ihrer Zugänglichkeit behindert, obwohl es technische Lösungen gibt. Das klingt hart, aber dieses Gedankenexperiment soll die Wichtigkeit des Themas verdeutlichen.

Für wen ist dieses Buch geschrieben?

Bei der Konzeption haben wir uns gefragt, für wen wir dieses Buch schreiben. Bevor wir zur Zielgruppe kommen, ganz kurz zu unserem Hintergrund:

Detlef Girke ist seit 2002 in der Entwicklung von Testverfahren, der Beratung und Begutachtung von Website- und Softwareprojekten für eine Vielzahl von Unternehmen und öffentliche Einrichtungen tätig. Selbst sehbehindert (periphere Sehstörung, »Tunnelblick«), ist er mit assistiven Technologien bestens vertraut.

Prof. Dr. Tobias Aubele ist seit 2009 im Bereich Usability/User-Experience sowie Barrierefreiheit tätig. Er lehrt als Professor an der technischen Hochschule Würzburg-Schweinfurt (THWS) mit den Forschungsschwerpunkten User-Experience und Human-Computer-Interaction mit Fokus auf Barrierefreiheit.

In der Beratung und Lehre wurde uns klar, dass ein Buch über digitale Barrierefreiheit von verschiedenen Zielgruppen gelesen werden sollte. Sie sollten deshalb bereit sein, sich mit den Grundlagen der digitalen Barrierefreiheit auseinanderzusetzen und keine Scheu vor Begriffen wie WCAG oder WAI ARIA haben. Abgesehen davon sind die einzigen Voraussetzungen ein Interesse an inklusivem Webdesign und der Wunsch, das Internet für alle zugänglicher zu gestalten. Dieses Buch richtet sich daher unter anderem an folgende Menschen:

• alle, die mehr darüber erfahren möchten, wie man barrierefreie Websites und Apps erstellt

• Interessierte, die lernen möchten, wie man HTML so verwendet, dass es den Richtlinien für digitale Barrierefreiheit entspricht (als Ergänzung/Erweiterung empfehlen wir das Buch »Einstieg in HTML und CSS« von Peter Müller, erschienen im Rheinwerk Verlag)

• Mitarbeitende im E-Commerce, die bestens auf das kommende Barrierefreiheitsstärkungsgesetz vorbereit sein wollen

• Webdesigner/Webdesignerinnen, die eine kompakte und strukturierte Einführung in barrierefreies Webdesign suchen

• UX-Designer/Designerinnen, die User Interfaces so gestalten wollen, dass sie für alle Nutzenden zugänglich und gebrauchstauglich sind

• Entwickler/Entwicklerinnen, die ihr Wissen über HTML im Kontext Barrierefreiheit aktualisieren möchten und barrierefreie Benutzererfahrungen mit Technologien wie WAI ARIA schaffen wollen

• Nutzende von Content-Management-Systemen wie WordPress, die sicherstellen möchten, dass ihre Webseiten zugänglich sind

• Lehrende, da sie die nächste Generation von Fachkräften in den Bereichen Informationstechnologie und Design ausbilden. Die Integration von Barrierefreiheit und die Vorbereitung der Studierenden auf die Anforderungen der Praxis im Zusammenhang mit dem Barrierefreiheitsstärkungsgesetz oder BITV 2.0 ist in der modernen Welt essenziell.

Hinweis zum Gendern

Wir wollen in der Sprache alle Geschlechter einschließen und verwenden daher für User/Userin bzw. Benutzer/Benutzerin den Begriff »die Nutzenden« und verzichten auf Gendersterne oder Ähnliches. Ziel ist es, immer alle Menschen anzusprechen und gleichzeitig eine möglichst hohe Lesefreundlichkeit zu erreichen. Bei der Zielgruppe sprechen wir daher z. B. von Mitarbeitenden in den Tätigkeitsbereichen, da wir dies geschlechtsunabhängig verstehen.

Wie ist dieses Buch aufgebaut?

Das Buch besteht aus sechs thematisch zusammengefassten Teilen:

Teil I: Bedürfnisse der Menschen, rechtliche Grundlagen und erste Prüfungen der Barrierefreiheit Ihrer Website

• Neben den Anforderungen der Barrierefreiheit zeigt Kapitel 1, »Digitale Barrierefreiheit«, wie vielfältig die Bedürfnisse von Menschen mit Behinderungen sein können. Das Kapitel soll Sie in die Lage versetzen, erste Tests mithilfe spezieller Browsererweiterungen (Plug-ins) und Bookmarklets durchzuführen. So erhalten Sie einen ersten Eindruck vom aktuellen Stand der Barrierefreiheit Ihrer Website.

• Kapitel 2, »Bedürfnisse der Nutzenden verstehen, und zwar aller«, vermittelt, warum sich Barrierefreiheit für alle Beteiligten lohnt, nicht nur finanziell, und weshalb Sie alle Nutzenden in Ihren Design- und Entwicklungsprozess integrieren sollten. Ein Screenreader ist beispielsweise die Basis für sehbehinderte Menschen. Dieses Kapitel zeigt Ihnen, wie Sie den Screenreader NVDA bedienen und wie er seine Informationen erhält. Sie werden nicht nur überrascht sein, wie es sich anfühlt, eine Website ohne visuellen Eindruck zu nutzen, sondern auch verstehen, wie Websites besser für sehbehinderte Menschen gestaltet werden können.

Teil II: Technische Grundlagen für barrierefreie Websites

• Kapitel 3, »Das Fundament barrierefreier Websites – HTML und der Accessibility Tree«, gibt Ihnen einen Überblick über die semantischen Eigenschaften von HTML sowie deren Bedeutung für die Barrierefreiheit. Wichtig für das Verständnis der weiteren Kapitel ist die Funktion des Accessibility Trees, der ausführlich beschrieben wird.

• Wie HTML mit CSS und JavaScript zusammenhängt, erfahren Sie in Kapitel 4, »Die perfekte Website – eine Kombination aus HTML, CSS, JavaScript und WAI ARIA«. So können Sie auch ohne bestehende Programmierkenntnisse konkrete Optimierungen direkt im Code erkennen. Außerdem wird der Nutzen von WAI ARIA beschrieben, wobei als oberste Regel gilt: »No ARIA is better than Bad ARIA!«

Teil III: Barrierefreie Inhalte – die Basis Ihrer Website

• Nicht nur Suchmaschinen benötigen Texte, auch Menschen erhalten viele Informationen über sie. Wie Texte und Inhalte von Websites für Menschen zielgruppengerecht erstellt werden, was Leichte und was Einfache Sprache auszeichnet, ist der Schwerpunkt von Kapitel 5, »Texte und Inhalte auf Website und App zielgruppengerecht aufbereiten«.

• Kapitel 6, »Texte und Inhalte auf Website und App barrierefrei gestalten«, beschreibt Ihnen, wie Sie Texte nicht nur für Leser und Leserinnen, sondern auch für assistive Technologien optimal aufbereiten.

• Auch Bilder, Videos und Audio auf Webseiten...

Über Autor(innen)

Girke, Detlef
Detlef Girke ist als Experte für barrierefreie IT seit über 20 Jahren in diesem Bereich tätig. Seine Erfahrungen umfassen die Entwicklung von Prüfverfahren, Workshops, die Durchführung von Tests, Projektmanagement sowie begleitende Beratung. Zu seinen Hauptinteressen gehören Musik, Soziales, Kommunikation, vernetztes Arbeiten, Webtechnologien – und Menschen.

Aubele, Tobias
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.