Web-Accessibility: Warum es bald kein Nice-to-have mehr ist Pflicht, Ranking-Faktor und Wettbewerbsvorteil?! Julia Bode, Team Lead SEO @ Peak Ace 

Geschützt und vertraulich. Kein Teil dieser Präsentation darf ohne vorherige schriftliche Zustimmung von Peak Ace in irgendeiner Weise an Dritte weitergegeben werden. Copyright 2024, Peak Ace AG. peakace.agency +49 (0)30 - 832 117 Julia Bode Team Lead SEO Ich bin seit 9 Jahre im Online-Marketing tätig. Mein besonderes Interesse gilt den Schnittstellen zwischen SEO und anderen Disziplinen, insbesondere der User Experience. 

3 peakace.agency Ca. 1,2 Mio. Menschen in Deutschland sind sehbehindert Hinzu kommen ca. 3,5 Mio. Menschen mit einer Rot-Grün-Schwäche. Quelle: https://pa.ag/3YOly6T 

4 peakace.agency Etwa 19 % in Deutschland sind hörbeeinträchtigt Bei Elementen, die auf Vermittlung von Inhalten über Audiosignale setzen, sollte der Inhalt auch visuell erfassbar gemacht werden, z. B. durch Transkripte oder Untertitel. Quelle: https://pa.ag/3RxCBWY 

Barrierefreiheit ist wichtig und betrifft uns alle. 

6 peakace.agency Ab 28. Juni 2025 werden barrierefreie Online Shops Pflicht Unternehmen müssen WCAG-Richtlinien (A, AA, AAA) umsetzen, um Barrierefreiheit zu gewährleisten und rechtliche Anforderungen zu erfüllen. Aspekt BFSG - Barrierefreiheitsstärkungsgesetz EAA - European Accessibility Act WCAG - Web Content Accessibility Guidelines Verbindlichkeit Gesetzlich verpflichtend für betroffene Unternehmen ab 28. Juni 2025 Muss von EU-Mitgliedstaaten in nationales Recht umgesetzt werden Nicht gesetzlich bindend, dient jedoch als Grundlage für Gesetze wie das BFSG Anforderungen Mindestens WCAG 2.1 Konformitätsstufe AA Legt allgemeine Anforderungen fest, die in nationales Recht umgesetzt werden Detaillierte Erfolgskriterien für die Barrierefreiheit von Webinhalten Während der EAA als EU-Richtlinie den Rahmen vorgibt, konkretisiert das BFSG die Anforderungen für Deutschland. Die WCAG dienen dabei als technische Grundlage für die Umsetzung der Barrierefreiheitsanforderungen. 

7 peakace.agency Neue Pflichten für Unternehmen außer Kleinstbetriebe Das Barrierefreiheitsstärkungsgesetz verpflichtet privatwirtschaftliche Unternehmen zur barrierefreien Gestaltung digitaler Produkte und Dienstleistungen. Vom BFSG betroffene Produkte und Dienstleistungen: ▪ Computer, Tablets, Smartphones und deren Betriebssysteme ▪ Selbstbedienungsterminals (z.B. Geld- und Fahrkartenautomaten) ▪ Verbraucherendgeräte für Telekommunikationsdienste ▪ E-Book-Lesegeräte ▪ E-Commerce-Dienstleistungen (z.B. Online-Shops) ▪ Bankdienstleistungen für Verbraucher ▪ E-Books und zugehörige Software Ausnahme: Kleinstunternehmen (weniger als 10 Beschäftigte und höchstens 2 Mio. € Jahresumsatz/-bilanzsumme). Reine Content/ Blog abschnitte, ohne Bezug zum Verkauf von Produkten müssen nicht optimiert werden 

8 peakace.agency Strenge Konsequenzen bei Verstößen gegen das BFSG Unternehmen müssen rechtzeitig handeln, um finanzielle und reputative Schäden zu vermeiden. Das Barrierefreiheitsstärkungsgesetz sieht keine Übergangsfristen vor. Ab dem Stichtag drohen bei Nichteinhaltung der Vorschriften unmittelbar empfindliche Strafen 

Welche Standards müssen eingehalten werden? 

10 peakace.agency WCAG-Standards als Grundlage des BFSG Mit WCAG 2.1 als aktuellem Standard für maximale Zugänglichkeit, soll sichergestellt werden, dass alle Menschen die Möglichkeit an digitaler Teilhabe erhalten. 2.1 ▪ ▪ ▪ ▪ ▪ ▪ Verabschiedet im Juni 2018 ▪ Erweiterung um zusätzliche Richtlinien ▪ Fokus auf mobile Geräte und Nutzer:innen mit kognitiven Einschränkungen ▪ Abwärtskompatibel zu WCAG 2.0 ▪ Automatische Konformität mit 2.0 bei Erfüllung von 2.1 ▪ ▪ ▪ ▪ ▪ Gemeinsamkeiten aller Versionen sind die grundlegenden Prinzipien und die Konformitätsstufen A, AA und AAA. Unterschiede liegen hauptsächlich in der Erweiterung und Verfeinerung der Erfolgskriterien, um neue Technologien und Nutzer:innenbedürfnisse zu berücksichtigen. 

11 peakace.agency WCAG-Standards: A, AA und AAA im Überblick Von grundlegender Zugänglichkeit bis zur umfassenden Barrierefreiheit: Die drei WCAG-Konformitätsstufen, wobei AA als ausgewogener Standard gilt, der maximale Zugänglichkeit mit realistischer Umsetzbarkeit verbindet. A (niedrigste Stufe) AA (mittlere Stufe) 31 Erfolgskriterien ▪ Alt-Texte für Bild-Inhalte ▪ Verwendung von H-Tags für Überschriften ▪ Farbkontraste für bessere Lesbarkeit ▪ Steuerung und Nutzung aller Funktionen mittels Tastatur ▪ Untertiteln von Bewegtbild-Inhalten ▪ Vermeidung von Inhalten, die Anfälle auslösen können 24 Erfolgskriterien ▪ Strengere Richtlinien für Farbkontraste ▪ Live-Untertitel für Audio-Inhalte ▪ Audiodeskriptionen in Videos ▪ Textvergrößerung ohne Beeinträchtigung der Funktionalität ▪ Mehrere Optionen zur Navigation und zum Auffinden von Informationen ▪ Eine konsistente Gestaltung der Navigation und der interaktiven Elemente. Die WCAG-Standards basieren auf den Prinzipien Wahrnehmbarkeit, Bedienbarkeit, Verständlichkeit und Robustheit, die sicherstellen, dass Inhalte für alle Nutzer:innen nutzbar sind, auch mit assistiven Technologien. 

Free Tools für den Website-Check 

13 peakace.agency WAVE Browser-Plugin: Visuelle Prüfung der Barrierefreiheit Das WAVE Browser-Plugin bietet eine direkte Analyse der Barrierefreiheit einer Website und hebt Probleme visuell hervor. Fehler, Warnungen und Strukturhinweise werden direkt auf der Seite angezeigt. Quelle: https://pa.ag/4jvsZbI WAVE eignet sich besonders für eine erste visuelle Prüfung und die schnelle Identifikation von Barrierefreiheitsproblemen. Für eine tiefere Analyse und detailliertere Berichte können ergänzende Tools wie Screaming Frog oder Lighthouse sinnvoll sein. 

14 peakace.agency Lighthouse: Automatisierte Analyse für mehr Barrierefreiheit Lighthouse ermöglicht eine schnelle und automatisierte Bewertung der Barrierefreiheit einer Website. Das Tool identifiziert Schwachstellen, gibt detaillierte Verbesserungsvorschläge und liefert eine klare Bewertung anhand standardisierter Metriken. Quelle: Lighthouse: https://www.zooroyal.de/ 

15 peakace.agency Siteimprove Accessibility Checker Plugin Der Accessibility Checker zeigt die Issues direkt kategorisiert nach WCAG-Stufen auf, gibt Code-Beispiele für eine korrekte Umsetzung an und markiert die Issues auf der Website. Quelle: https://pa.ag/3GAcEnc, Siteimprove Accessibility Checker Plugin 

Hands-On Website-Check 

17 peakace.agency Erster Check – Die Tastaturbedienung Eine barrierefreie Website muss vollständig mit der Tastatur bedienbar sein, da nicht alle Nutzer:innen eine Maus verwenden können (z. B. aufgrund motorischer Einschränkungen oder der Nutzung von Screenreadern). ▪ Tab-Taste: Durch die gesamte Seite navigieren, mit Hilfe der Tab-Taste. ▪ Werden alle interaktiven Elemente (Links, Buttons, Formularfelder) in einer logischen Reihenfolge fokussiert? Ist der Fokus deutlich sichtbar (z. B. durch einen Rahmen)? ▪ Shift + Tab: Funktioniert die Navigation auch in umgekehrter Richtung? ▪ Eingabetaste (Enter) / Leertaste: Können fokussierte Elemente (z. B. Buttons, Checkboxen) mit der Eingabetaste oder der Leertaste aktiviert werden? ▪ Pfeiltasten: Funktionieren Dropdown-Menüs und ähnliche Elemente mit den Pfeiltasten? Quelle: https://pa.ag/4jpxa8X 

18 peakace.agency Erster Check – Bilder und Kontraste Aussagekräftige Bildbeschreibungen und gut lesbare Farbkontraste – einfache Maßnahmen mit großer Wirkung. Quelle: https://pa.ag/3ELPLN7; https://pa.ag/4jLEKu2, Siteimprove Accessability Checker Stellt euch vor, ihr könnten die Bilder nicht sehen. Würdet ihr den Inhalt der Seite trotzdem verstehen? Erforderliches Kontrastverhältnis: ▪ Mindestens 4.5:1 für normalen Text ▪ Mindestens 3:1 für große Texte (18pt und größer, oder 14pt fett). 

19 peakace.agency Erster Check – durch Webseite mit Screenreader navigieren In der Regel verfügt bereits jedes Betriebssystem über einen integrieren Screenreader. Mit diesem Tool, lässt sich wunderbar die Bedienbarkeit der Website aus Perspektive einer Person mit Sehbehinderung testen. Windows: Narrator Was zu beachten ist: ▪ Keine Maus verwenden ▪ Genau zuhören ▪ Die Struktur verstehen ▪ Alternativtexte für Bilder prüfen ▪ Formulare testen ▪ Dynamische Inhalte prüfen Mac: VoiceOver 

Und was ist mit SEO? 

21 peakace.agency Barrierefreiheit und SEO: Synergien für bessere Rankings Investitionen in Barrierefreiheit sind Investitionen in eine bessere Nutzer:innenerfahrung und können sich positiv auf die SEO-Performance auswirken. Die Umsetzung von Maßnahmen zur Barrierefreiheit stimmen oft mit den Best Practices der Suchmaschinenoptimierung überein: ▪ Verbesserte Nutzer:innenerfahrung (UX) führt zu längerer Verweildauer und niedrigeren Absprungraten. ▪ Klare Hierarchien erleichtern Crawling und Indexierung ▪ SEO-Elemente mit Barrierefreiheitsbezug: ▪ Strukturierte Inhalte mit Header-Tags (H1-H6): Erleichtert Suchmaschinen und Bildschirmlesegeräten das Verständnis der Seite. ▪ Alternativtexte (Alt-Tags) für Bilder: Wichtig für Screenreader und hilft Google, Bilder korrekt zu interpretieren. ▪ Tastatur-Navigation und ARIA-Markup: Verbessert die Nutzer:innenfreundlichkeit und sorgt für bessere Interaktion mit Suchmaschinen. 

Die Einhaltung von Barrierefreiheitsstandards ist eine strategische Investition in den langfristigen Erfolg eines Onlineshops. 

peakace.agency https://pa.ag/3FgW9fn Whitepaper: The Future is Accessible Unser Guide zeigt, wie barrierefreies Webdesign nicht nur Bußgelder vermeidet, sondern auch euer SEO verbessert. 

An den Folien interessiert? Noch weitere Fragen? [email protected] peakace.agency twitter.com/peakaceag facebook.com/peakaceag peakace.agency Bereit für den nächsten Karriereschritt? jobs.peakace.agency [email protected] https://pa.ag/4lHjZBw Julia Bode Team Lead SEO