SEO & Accessibility: Teste deine Inhalte auf Barrierefreiheit
Einführung
Barrierefreiheit im digitalen Raum ist ein weit gefasster Begriff, der sicherstellt, dass möglichst viele Menschen das Internet nutzen können. Dies umfasst sowohl die Bedienung von Online-Diensten als auch den Konsum von Online-Inhalten. Während Barrierefreiheit rechtliche und geschäftliche Implikationen hat, versprechen diese Richtlinien eine bessere Benutzererfahrung für alle. Die einfachste Möglichkeit, die Barrierefreiheit deiner Website zu gewährleisten, besteht darin, diese bereits bei Design und Entwicklung zu berücksichtigen. Blockbasierte Themes bieten dabei enorme Flexibilität, doch mit großer Macht kommt auch große Verantwortung. Viele technische Probleme der Barrierefreiheit sind leicht mit automatisierten Tools zu erkennen und zu beheben, wie z.B. korrekte Überschriftenebenen, Farbkontraste, aussagekräftige Alt-Texte und Linktexte. Diese sind ironischerweise die häufigsten Barrierefreiheitsfehler im Web.
Eingebaute Hilfsmittel in WordPress
WordPress bietet zwei eingebaute Hilfsmittel für Barrierefreiheit im Editor:
Semantische Struktur: Überprüfe die Reihenfolge deiner Überschriften, indem du auf „Dokumentenübersicht“ und dann auf „Gliederung“ klickst. Die Reihenfolge sollte von H2 abwärts bis H6 ohne Überspringen verlaufen. WordPress markiert falsche Überschriftenebenen in hellem Orange und benachrichtigt dich, wenn du eine falsche Überschriftenebene verwendest.
Farbkontrast: Wenn du eine Text- und Hintergrundfarbkombination auswählst, die nicht genügend Kontrast bietet, wird WordPress dich darauf hinweisen. Versuche, kontrastreiche Farben für den Hintergrund und den Text zu verwenden, um die Barrierefreiheit zu verbessern. Um den Farbkontrast zu beheben, wähle den entsprechenden Block, z.B. den Button-Block, und öffne die Stile in den Seiteneinstellungen auf der rechten Seite. Unter „Farbe“ kannst du dann Hintergrund- und Textfarbe so ändern, dass sie gut kontrastieren.
Plugins für Barrierefreiheit
Es gibt mehrere Plugins, die dir helfen können, die Barrierefreiheit deiner Website zu verbessern:
WP Tota11y: Dieses leichte Plugin überprüft die Einhaltung von Barrierefreiheitsstandards sowohl im Frontend als auch im Editor. Es benachrichtigt dich über falsche Überschriftenebenen, Farbkontraste, schlechte Linktexte, fehlende Labels in Formularelementen und fehlende Alt-Texte in Bildern. Eine interessante Funktion ist der Screen Reader Wand, mit dem du Elemente so anzeigen kannst, wie ein Screenreader sie sehen würde.
Sa11y: Sa11y bietet eine umfassende Reihe von Prüfungen im Frontend. Du kannst zusätzliche Prüfungen wie Lesbarkeit, erweiterte Links, Farbkontrast und Formularlabels unter „Einstellungen“ umschalten. Dort findest du auch Farbfilter, um zu testen, wie deine Seite bei verschiedenen Arten von Farbenblindheit aussieht.
Editoria11y: Editoria11y konzentriert sich auf Inhalte und Struktur, überprüft jedoch keine Designelemente wie Farbkontraste. Es zeigt Warnungen im Frontend und im Editor an, benachrichtigt über die Dokumentengliederung, Überschriftenebenen, Linktexte und deren Ziele sowie fehlende Alt-Texte in Bildern.
Accessibility Checker: Dieses beliebte Plugin fügt dem Beitrags- oder Seiteneditor ein neues Abschnittsfenster und einen schwebenden Button im Frontend hinzu. Es zeigt eine Zusammenfassung der Fehler, detaillierte Erklärungen einschließlich des relevanten Codeausschnitts, mögliche Korrekturen und eine Option zum Ignorieren einzelner Warnungen an.
OS-Apps und Browser-Erweiterungen
Um zusätzliche technische Aspekte zu testen, kannst du Folgendes tun:
Navigation mit der Tastatur: Versuche, deine Website nur mit der Tastatur zu durchsuchen. Verwende die Tabulatortaste, um zwischen Links, Buttons und Formularfeldern zu navigieren, und drücke Enter oder die Leertaste, um diese interaktiven Elemente der Seite zu aktivieren. Notiere nicht-funktionale Elemente und fehlende visuelle Indikatoren, die behoben werden müssen.
Farbmodus ändern: Ändere das Farbschema deines Geräts, um sicherzustellen, dass die Dinge im Dunkelmodus oder im Modus mit hohem Kontrast gut aussehen und funktionieren.