Die Auswirkungen der Barrierefreiheit auf SEO

Heute Zugänglichkeit nicht nur eine Gefälligkeit, sondern ein Recht. Weltweit sind etwa 15% der Bevölkerung in irgendeiner Form behindert. Alles in allem profitiert etwa ein Viertel der Weltbevölkerung von einer barrierefreien Website (z.B. ältere Menschen). Wer das nicht ernst nimmt, schießt sich selbst in den Fuß.

Mit meiner Erfahrung in der Zusammenarbeit mit Organisationen, die ihre Websites barrierefrei gestalten, möchte ich Ihnen zeigen, wie ich dies für meine Kunden optimiere. Vom Verständnis der unterschiedlichen Bedürfnisse und Herausforderungen der Nutzer bis zur Anwendung praktischer Techniken und Tools, die jede Website zugänglicher machen.(1)

Wie wirkt sich die Barrierefreiheit auf SEO aus?

Die Zugänglichkeit einer Website ist ein wichtiger Aspekt, der einen deutlichen Einfluss auf die Suchmaschinenoptimierung hat (mehr als Sie denken):

1. Nutzererfahrung: Barrierefreie Websites bieten eine bessere Nutzererfahrung, was wiederum zu einer geringeren Absprungrate und einer längeren Besuchsdauer führen kann. Google und andere Suchmaschinen wissen dies zu schätzen, und es kann zu einer besseren Platzierung beitragen.
2. Mobile Responsivität: Websites, die auf mobilen Geräten gut funktionieren, werden von Suchmaschinen oft höher eingestuft. Da die mobile Zugänglichkeit ein wichtiger Bestandteil der allgemeinen Zugänglichkeit ist, spielt sie auch bei der Suchmaschinenoptimierung eine Rolle.
3. Geschwindigkeit der Website: Eine barrierefreie Website ist oft auf Geschwindigkeit optimiert. Schnellere Ladezeiten tragen zu einem besseren Nutzererlebnis bei, was sich wiederum positiv auf die Platzierungen auswirken kann.
4. Alt-Texte für Bilder: Die Verwendung von Alt-Texten hilft bei der Beschreibung von Bildern für Personen, die einen Screenreader verwenden. Dies ist nicht nur gut für die Zugänglichkeit, sondern hilft auch den Suchmaschinen, den Inhalt des Bildes zu verstehen.
5. Semantisches HTML: Gut strukturiertes HTML macht eine Website nicht nur leichter zugänglich, sondern hilft auch Suchmaschinen, den Inhalt besser zu verstehen. Die richtige Verwendung von Überschriften (H1, H2 usw.) und anderen semantischen Elementen kann zur Suchmaschinenoptimierung beitragen.
6. Zugänglichkeit der Links: Klare und beschreibende Linktexte erleichtern den Nutzern die Navigation und liefern auch den Suchmaschinen den Kontext.
7. Einhaltung und Bußgelder: In einigen Ländern können Websites, die nicht den Normen für Barrierefreiheit entsprechen, mit Bußgeldern und Strafen belegt werden.
8. Duplizierung von Inhalten: Barrierefreie Websites vermeiden oft unnötige Duplizierung von Inhalten, wie z. B. separate mobile Versionen von Seiten. Dadurch können Probleme mit doppelten Inhalten vermieden werden, was wiederum für die Suchmaschinenoptimierung von Vorteil ist.

Im Allgemeinen kann die Verbesserung der Barrierefreiheit einer Website zu einem besseren Benutzererlebnis führen, was sich in positiven Signalen für Suchmaschinen niederschlägt (Chrome hat nicht umsonst einen Test für Barrierefreiheit integriert). Eine barrierefreie Website kann mehr Besucher anziehen, Nutzer länger binden und letztlich zu einem höheren Ranking in den Suchergebnissen beitragen.(2)(3)

Wie prüft Lighthouse die Barrierefreiheit?

Chrome DevTools bietet mit dem Lighthouse-Tool eine Zugänglichkeitsprüfung, mit der eine Seite nach verschiedenen Aspekten der Zugänglichkeit bewertet werden kann. Hier sind einige der Aspekte, auf die Chrome DevTools testen kann:

1. Bildbeschreibungen: Überprüfen Sie, ob alle Bilder einen Alt-Text haben, der beschreibt, was auf dem Bild zu sehen ist.
2. Kontrastverhältnis: Bewerten Sie, ob der Text einen ausreichenden Kontrast zum Hintergrund aufweist, was für die Lesbarkeit wichtig ist.
3. Formularelemente: Überprüfen Sie, ob die Formularfelder korrekt beschriftet und beschrieben sind, damit die Benutzer wissen, welche Informationen erforderlich sind.
4. Tastaturnavigation: Prüfung, ob die Website mit der Tastatur navigiert werden kann, ohne dass eine Maus benötigt wird.
5. Dokumentstruktur: Analyse der semantischen HTML-Struktur, einschließlich der korrekten Verwendung von Überschriften, Rollen und anderen wichtigen HTML-Elementen.
6. Aria-Funktionen: prüft, ob die ARIA-Funktionen (Accessible Rich Internet Applications) korrekt implementiert wurden, um die Zugänglichkeit für Bildschirmleser zu verbessern.
7. Zoom und Skalierbarkeit: Prüfen Sie, ob die Benutzer den Text bis zu 200 % zoomen und skalieren können, ohne dass Funktionalität oder Inhalt verloren gehen.
8. Sprachattribute: Überprüfung, ob die richtige Sprache im HTML-Code definiert ist, was Screenreadern hilft, den Inhalt richtig zu lesen.
9. Tabellenformatierung: Beurteilen Sie, ob die Tabellen korrekt formatiert sind, mit geeigneten Überschriften und Datenzellen, so dass die Informationen logisch dargestellt werden.
10. Audio und Video: Prüfung auf das Vorhandensein von Untertiteln, Transkripten oder anderen Alternativen zu Multimedia-Inhalten.
11. Fokusmanagement: Bewertung, ob fokussierbare Elemente eine logische Abfolge haben und ob es sichtbare Fokusindikatoren gibt.
12. Farbenblindheit: Einige Tools können simulieren, wie eine Seite für Benutzer mit verschiedenen Arten von Farbenblindheit aussieht, obwohl dies nicht direkt in Chrome DevTools möglich ist.
13. Zeitvorgaben und Animationen: Analysieren Sie, ob die Website zeitliche Begrenzungen bietet und ob Bewegungen und Animationen angehalten oder gestoppt werden können.
14. Veraltetes oder falsches HTML: Prüfen Sie, ob veraltete oder falsch verwendete HTML-Elemente vorhanden sind, die die Zugänglichkeit beeinträchtigen können.

Lighthouse in Chrome DevTools bietet eine standardisierte und umfassende Möglichkeit, diese und andere Probleme mit der Barrierefreiheit zu erkennen, und bietet oft Vorschläge und Dokumentation zur Behebung der Probleme. Es ist ein wertvolles Werkzeug für Entwickler, die die Zugänglichkeit ihrer Websites verbessern möchten.(4)

Lösungen für die Barrierefreiheit und die erforderlichen Ressourcen

Nachfolgend finden Sie eine Tabelle mit den wichtigsten Zugänglichkeitspunkten, ihrer Priorität, möglichen Lösungen und den benötigten Ressourcen. Die Prioritäten können je nach den spezifischen Bedürfnissen einer Website und ihrer Benutzer variieren, aber die Tabelle gibt einen allgemeinen Überblick.(5)

Artikel	Priorität	Lösung	Ressourcen
Bildbeschreibungen	Hoch	Fügen Sie zu allen Bildern einen Alt-Text hinzu, der den Inhalt beschreibt.	HTML/CSS-Kenntnisse, Screenreader-Tools für Tests.
Kontrastverhältnis	Hoch	Stellen Sie die Farben so ein, dass das Mindestkontrastverhältnis eingehalten wird.	Farbkontrast-Tools wie der Contrast Checker von WebAIM.
Formular-Elemente	Hoch	Beschriften Sie Formularfelder deutlich und verwenden Sie geeignete HTML-Elemente.	HTML/CSS-Kenntnisse, Tools zur Prüfung der Zugänglichkeit wie AXE.
Tastatur-Navigation	Hoch	Stellen Sie sicher, dass alle interaktiven Elemente über die Tastatur zugänglich sind.	Testen mit Tastatur, Browser-Entwicklungstools.
Struktur des Dokuments	Mittel	Verwenden Sie semantisches HTML wie korrekte Überschriften und Listen.	HTML/CSS-Kenntnisse, semantische Prüfwerkzeuge.
Aria-Merkmale	Mittel	Verwenden Sie ARIA-Rollen und -Attribute, wo dies notwendig und angemessen ist.	ARIA-Spezifikation, Screenreader-Tools für Tests.
Zoom und Skalierbarkeit	Mittel	Stellen Sie sicher, dass Text und Inhalt ohne Funktionsverlust vergrößert werden können.	Browser-Tests, Handy-Emulator.
Sprachliche Attribute	Niedrig	Definieren Sie die Hauptsprache der Seite mit dem Attribut lang.	HTML-Kenntnisse.
Format der Tabelle	Niedrig	Verwenden Sie geeignete Tabellenelemente wie <thead>, <th>, usw.	HTML/CSS-Kenntnisse.
Audio und Video	Mittel	Bereitstellung von Untertiteln, Transkripten oder anderen Alternativen für Multimedia-Inhalte.	Videobearbeitungssoftware, Transkriptionstools.
Schwerpunkt Management	Mittel	Sorgen Sie für eine logische Abfolge der Schwerpunkte und sichtbare Schwerpunktindikatoren.	Tastaturtests, Browser-Entwicklungstools.
Farbenblindheit	Niedrig	Test und Design für verschiedene Arten von Farbenblindheit.	Farbenblindheitssimulator-Tools.
Timing und Animationen	Niedrig	Bieten Sie Optionen zum Anhalten oder Stoppen von Bewegungen und Animationen an und geben Sie genügend Zeit für zeitgebundene Aktionen.	JavaScript/CSS-Kenntnisse, Tests zur Animationskontrolle.
Veraltetes/falsches HTML	Niedrig	Ersetzen oder aktualisieren Sie veraltete oder falsch verwendete HTML-Elemente.	HTML/CSS-Kenntnisse, Validierungstools wie W3C Validator.

Es ist wichtig zu wissen, dass Barrierefreiheit kein einmaliges Projekt ist, sondern ein kontinuierlicher Prozess. Regelmäßige Tests und Aktualisierungen sowie die Einbeziehung von Nutzern mit unterschiedlichen Bedürfnissen können dazu beitragen, eine Website so zugänglich wie möglich zu machen.

Was ich bei meinen Kunden oft sehe, ist, dass sich immer wieder dieselben Fehler einschleichen. Insbesondere geht es um die Komponenten, die auf einer Website häufig geändert werden:

• Die Struktur der HTML-Datei;
• Fragen zu Bildern;
• Anpassungen in der mobilen Benutzerfreundlichkeit;
• die Lesbarkeit von Texten;
• Kontrast (Farben).

Solche Dinge werden in einer Organisation oft übersehen. Besonders bei „schnellen“ Änderungen an der Website kann das schief gehen.

Erste Schritte für die Barrierefreiheit Ihrer Website

Die Arbeit an der Zugänglichkeit von Websites kann ein komplexer Prozess sein, der jedoch durch einen Rahmen strukturiert werden kann. Hier ist ein allgemeiner Rahmen, der zur Verbesserung der Zugänglichkeit einer Website verwendet werden kann:(6)

1. Verstehen und Bewusstsein

Ziel: Sicherstellen, dass das gesamte Team versteht, was Barrierefreiheit bedeutet und warum sie wichtig ist.

• Schulung und Ausbildung: Schulung von Entwicklern, Designern und Autoren von Inhalten in Bezug auf Zugänglichkeitsstandards und -techniken.
• Recherche: Ermitteln Sie den spezifischen Bedarf und die Anforderungen Ihrer Nutzer, einschließlich der rechtlichen Verpflichtungen.

2. Planung

Zielsetzung: Definieren Sie klare Ziele und erstellen Sie einen Plan, um diese zu erreichen.

• Politik: Entwicklung einer Zugänglichkeitspolitik, die Normen wie die WCAG einschließt.
• Prioritäten und Ziele: Ermittlung von Prioritätsbereichen und Festlegung messbarer Ziele.
• Werkzeuge und Ressourcen: Wählen Sie die Werkzeuge, Technologien und Ressourcen, die verwendet werden sollen.

3. Entwurf und Entwicklung

Ziel: Integration der Barrierefreiheit in jeder Phase des Entwurfs und der Entwicklung.

• Barrierefreies Design: Verwenden Sie barrierefreie Designmuster und Farbschemata.
• Semantischer Code: Schreiben Sie sauberes, semantisches HTML und CSS.
• Tastatur- und Screenreader-freundlich: Sorgen Sie für vollständige Tastaturzugänglichkeit und testen Sie mit Screenreadern.
• Reaktionsfähigkeit: Gewährleistung einer guten Leistung auf verschiedenen Geräten und Bildschirmgrößen.

4. Prüfung

Zweck: Überprüfung, ob die Website die festgelegten Zugänglichkeitsstandards erfüllt.

• Automatisierte Tests: Verwenden Sie Tools wie Lighthouse, um auf häufige Probleme zu testen.
• Manuelle Tests: Führen Sie manuelle Tests durch, z. B. Tastaturnavigation und Screenreader-Tests.
• Benutzertests: Beziehen Sie echte Benutzer mit unterschiedlichen Bedürfnissen in den Testprozess ein.

5. Umsetzung und Wartung

Ziel: Einführung der barrierefreien Website und deren weitere Pflege.

• Umsetzung: Live-Schaltung der getesteten und validierten barrierefreien Website.
• Kontinuierliche Überwachung und Aktualisierung: regelmäßige Überwachung und Aktualisierung der Website nach den neuesten Standards und Technologien.
• Feedback-Schleife: Einrichtung eines Systems für Nutzer-Feedback, um eine kontinuierliche Verbesserung zu ermöglichen.

6. Dokumentation und Schulung

Ziel: Dokumentation aller Prozesse und Schulung des Teams, um sicherzustellen, dass die Barrierefreiheit ein fester Bestandteil der Organisationskultur wird.

• Dokumentieren Sie Prozesse und Richtlinien: Erstellen Sie Handbücher und Dokumentationen für die zukünftige Verwendung.
• Schulung und Sensibilisierung: Die Teammitglieder sollen weiterhin geschult und für die Bedeutung der Barrierefreiheit sensibilisiert werden.

Schließen

Dieser Rahmen ist ein Leitfaden für die Arbeit an der Barrierefreiheit und kann an die besonderen Bedürfnisse und Herausforderungen eines jeden Projekts angepasst werden. Indem sie die Barrierefreiheit zu einem integralen Bestandteil des gesamten Prozesses machen, können Organisationen ein integratives Nutzererlebnis für alle gewährleisten.

Schlussfolgerung

Wie in diesem Artikel beschrieben: Die Zugänglichkeit einer Website spielt sowohl für die Suchmaschinenoptimierung als auch für die Konversion eine große Rolle. Wenn Sie dies nicht optimieren, bedeutet dies auch, dass Sie ein Viertel Ihrer Besucher nicht mehr „ansprechen“ (bei manchen Websites sogar noch mehr).

Verwenden Sie die Standardtools von Lighthouse, um diese gründlich zu kartieren. Eine einmalige Optimierung bringt oft nicht das gewünschte Ergebnis. Ich betrachte dies als einen Prozess für jedes SEO-Projekt (weil es sonst sechs Monate später wieder auf dem gleichen Stand ist). Viel Glück!