Heute möchte ich mit dir über ein wichtiges Thema sprechen, das oft übersehen wird: die Barrierefreiheit deiner Website. Barrierefreiheit bedeutet, dass alle Nutzer, einschließlich Menschen mit Behinderungen, deine Website problemlos nutzen können. Wenn du Divi als dein WordPress-Theme verwendest, gibt es viele Möglichkeiten, die Barrierefreiheit zu verbessern. Lass uns gemeinsam einige Plugins und Tricks durchgehen, die deine Divi-Website barrierefreier machen.
Warum ist Barrierefreiheit wichtig?
Stell dir vor, du könntest bestimmte Teile einer Website nicht nutzen, weil sie nicht auf deine Bedürfnisse abgestimmt sind. Genau das erleben Menschen mit Behinderungen täglich im Internet. Barrierefreiheit stellt sicher, dass deine Inhalte für alle zugänglich sind. Indem du die Web Content Accessibility Guidelines (WCAG) 2.1 befolgst, kannst du sicherstellen, dass deine Website für ein breiteres Publikum zugänglich ist und gleichzeitig rechtlichen Anforderungen gerecht wird. Wie du das bewerkstelligen kannst, zeig ich dir hier.
Schrittweise Verbesserung
Du musst deine Website nicht von heute auf morgen komplett umstellen, um barrierefrei zu werden. Es ist ein fortlaufender Prozess, bei dem du nach und nach Verbesserungen vornehmen kannst. Viele Plugin- und Theme-Anbieter sowie auch WordPress selbst arbeiten kontinuierlich daran, ihre Produkte barrierefreier zu machen. Daher ist es wahrscheinlich, dass zukünftige Updates weitere Verbesserungen bringen werden.
Wichtige Sofortmaßnahmen
Während du auf diese Updates wartest, kannst du bereits jetzt einige Maßnahmen ergreifen, um die Barrierefreiheit deiner Divi-Website zu verbessern. Diese Schritte werden dir auch in Zukunft kein Update abnehmen. Wenn du sie gleich bei der Erstellung deines Contents berücksichtigst, schaffst du gute Grundvoraussetzungen, um die Anforderungen ab Juni 2025 zu erfüllen.
Alt-Texte bei Bildern:
Stelle sicher, dass alle Bilder auf deiner Website beschreibende Alt-Texte haben. Diese Texte helfen Screenreader-Nutzern, den Inhalt der Bilder zu verstehen. Du kannst die Alt-Texte mit Tools wie WAVE oder dem Accessibility Checker überprüfen. Wie du Bilder richtig formatierst, Alt-Texte, Beschriftung und Beschreibung effektiv nutzt und sie korrekt komprimierst, erfährst du in meinem Blogbeitrag: So optimierst du deine Bilder für deine (Divi-)Website richtig!
Kontrastfarben:
Überprüfe den Farbkontrast auf deiner Website. Texte sollten sich deutlich vom Hintergrund abheben, um für Menschen mit Sehbehinderungen gut lesbar zu sein. Tools wie der Color Contrast Checker von WebAIM oder der Color Contrast Analyzer von Adobe können dir dabei helfen.
Schriftgrößen:
Verwende ausreichend große Schriftgrößen und biete Optionen zur Anpassung der Schriftgröße an. Für eine gute Lesbarkeit wird eine Mindestschriftgröße von 16 Pixel empfohlen – es kommt sich aber auch auf die Schriftart darauf an. Größere Schriftgrößen sind für Hauptüberschriften und wichtige Inhalte sinnvoll. Zusätzlich solltest du sicherstellen, dass die Textzeilen nicht zu lang sind, idealerweise zwischen 50 und 75 Zeichen pro Zeile, um die Lesbarkeit zu verbessern.
Aria-Labels:
Nutze ARIA-Attribute (Accessible Rich Internet Applications), um zusätzlichen Kontext und Informationen für Screenreader bereitzustellen. Du kannst überprüfen, ob die Aria-Labels korrekt implementiert sind, indem du Tools wie den axe Accessibility Checker verwendest.
Headlines richtig verwenden:
Achte darauf, dass die Reihenfolge der Überschriften (H1-H6) korrekt ist. Dies hilft sowohl Suchmaschinen als auch Nutzern, die Struktur deiner Inhalte besser zu verstehen. Die Verwendung der richtigen Überschriftenhierarchie ist entscheidend für die Barrierefreiheit und die Benutzerfreundlichkeit.
Leserliche Texte:
Achte auch darauf, dass deine Texte leicht leserlich und verständlich sind. Verwende keine zu langen Sätze oder Absätze. Kurze, prägnante Sätze verbessern die Lesbarkeit und machen es einfacher, den Inhalt zu verstehen.
WordPress, Themes & Plugins aktuell halten:
WordPress sowie die Entwickler gut gewarteter Themes und Plugins arbeiten kontinuierlich daran, ihre Produkte barrierefreier zu gestalten. Halte alles stets auf dem neuesten Stand, um keine wichtigen Neuerungen im Bereich Accessibility zu verpassen. Außerdem ist es generell wichtig, Plugins und Co. aktuell zu halten, um Sicherheitslücken zu schließen und die bestmögliche Leistung deiner Website zu gewährleisten.
Divi Assistant von Pee-Aye Creative (Plugin)
Ein tolles Tool zur Verbesserung der Barrierefreiheit deiner Divi-Website ist das Plugin Divi Assistant von Pee-Aye Creative. Dieses Plugin bietet eine Vielzahl von Funktionen, die speziell für Divi-Websites entwickelt wurden, und es ist (zumindest für mich) ein unverzichtbares Werkzeug, um die Barrierefreiheit und die allgemeine Benutzerfreundlichkeit deiner Website zu verbessern.
Wie das Plugin „Divi Assistant“ von Pee-Aye Creative bei der Umsetzung einer barrierefreien Divi-Website helfen kann:
Neben vielen anderen nützlichen Einstellungen enthält das Plugin den Accessibility Helper. Hier sind die Funktionen auf Deutsch erklärt:
Fügt fokussierbare Unterstützung zu Divi-Modulen hinzu
Diese Funktion macht es möglich, dass Elemente in Divi-Modulen mit der Tastatur fokussiert und navigiert werden können. Das ist wichtig für Benutzer, die keine Maus verwenden können.
Fügt eine Tastaturnavigationsumrandung zu fokussierten Elementen hinzu
Wenn du ein Element mit der Tastatur auswählst, fügt diese Funktion eine sichtbare Umrandung hinzu. Das hilft Nutzern zu erkennen, welches Element gerade ausgewählt ist.
Fügt ARIA-Unterstützung zu Divi-Modulen hinzu
Diese Funktion fügt spezielle ARIA-Attribute zu Divi-Elementen hinzu. ARIA-Attribute helfen Screenreadern, die Struktur und Bedeutung von Elementen besser zu verstehen.
Setzt Icons auf ARIA Hidden
Diese Funktion sorgt dafür, dass Icons von Screenreadern ignoriert werden, da sie oft keine wichtige Information enthalten.
Unterstreicht alle Links
Diese Funktion fügt eine Unterstreichung zu allen Links auf der Website hinzu, um sie deutlicher erkennbar zu machen.
Fügt eine „Navigation überspringen“-Option hinzu
Mit dieser Funktion können Nutzer das Navigationsmenü überspringen und direkt zum Hauptinhalt springen. Das ist besonders nützlich für Personen, die sich mit der Tastatur durch die Seite bewegen.
Behebt doppelte Menü-IDs
Diese Funktion verhindert, dass WordPress denselben ID-Wert mehreren Menüelementen zuweist. Das verbessert die Struktur der Seite und hilft Screenreadern, die Navigation korrekt zu interpretieren.
Ermöglicht Tastaturnavigation in Dropdown-Menüs
Diese Funktion macht es möglich, dass Dropdown-Menüs im Divi-Menü mit der Tastatur geöffnet und navigiert werden können.
Verbessert Screenreader-Klassen
Diese Funktion fügt Screenreader-Klassen zu verschiedenen Labels in Divi hinzu und korrigiert falsch angewendete display: none;-Eigenschaften, damit wichtige Informationen nicht versteckt werden.
Ermöglicht Pinch und Zoom im Browser
Diese Funktion ermöglicht es Benutzern, den Bildschirm auf mobilen Geräten durch Pinch- und Zoom-Gesten zu vergrößern und zu verkleinern.
Fügt Tota11y-Button hinzu
Der Tota11y Button ist ein hervorragendes Tool im Divi Assistant, das dir hilft, Barrierefreiheitsprobleme visuell darzustellen und zu beheben. Mit dem Tota11y Button kannst du:
- Kontrastprobleme visualisieren: Er zeigt dir Bereiche mit unzureichendem Farbkontrast.
- Alt-Text-Prüfung: Hebt Bilder ohne oder mit unzureichendem Alt-Text hervor.
- Interaktive Überprüfung: Bietet detaillierte Analysen und Hinweise zur Behebung von Barrierefreiheitsproblemen.
Alle diese Funktionen können manuell ein- oder ausgeschaltet werden, je nach den spezifischen Bedürfnissen deiner Website. Indem du diese Funktionen nutzt, kannst du die Zugänglichkeit und Benutzerfreundlichkeit deiner Divi-Website erheblich verbessern.
Weitere Plugins für die Barrierefreiheit deines Divi Themes
Hier sind einige weitere Plugins, die die Barrierefreiheit deiner Website verbessern können. Ich habe diese Plugins allerdings nicht getestet und kann daher keine persönlichen Erfahrungen teilen. In diversen (Facebook)-Divi-Gruppen habe ich jedoch gesehen, dass andere Mitglieder diese Plugins verwenden und weiterempfehlen. Ich würde mich freuen, wenn ihr in den Kommentaren verratet, welche Plugins ihr aktuell nutzt und wie ihr euch auf die Vorschriften ab Juni 2025 vorbereitet. Eure Erfahrungen und Tipps können auch anderen Lesern weiterhelfen!
Beschreibung: WP Accessibility ist ein vielseitiges Plugin, das entwickelt wurde, um mehrere Aspekte der Barrierefreiheit deiner WordPress-Website zu verbessern. Es fügt verschiedene Funktionen hinzu, die die Nutzung der Website für Menschen mit Behinderungen erleichtern.
Hauptfunktionen:
- Skip Links hinzufügen: Ermöglicht es Benutzern, direkt zum Hauptinhalt der Seite zu springen, was besonders für Screenreader-Nutzer hilfreich ist.
- Bild-Alt-Texte prüfen: Stellt sicher, dass alle Bilder angemessene Alt-Texte haben, die für Screenreader optimiert sind.
- Kontrastkontrolle: Überprüft und korrigiert den Farbkontrast auf deiner Website, um die Lesbarkeit zu verbessern.
- Formulare barrierefrei gestalten: Bietet verschiedene Tools, um sicherzustellen, dass Formulare für alle Benutzer zugänglich sind.
Kosten: Kostenlos
WordPress Accessibility Plugin – Readabler
Beschreibung: Readabler konzentriert sich auf die Verbesserung der Lesbarkeit und Zugänglichkeit von Websites. Es bietet mehrere nützliche Tools, die die Benutzererfahrung für alle verbessern.
Hauptfunktionen:
- Textgröße und Kontrast: Bietet Optionen zur Anpassung der Textgröße und des Kontrasts.
- Screenreader-Unterstützung: Verbessert die Unterstützung von Screenreadern durch spezifische Anpassungen und Tools.
Kosten: Kostenpflichtig
Beschreibung: Dieses Plugin ist ideal für Benutzer, die eine einfache und schnelle Möglichkeit suchen, die Barrierefreiheit ihrer Website zu verbessern. Es bündelt verschiedene barrierefreiheitsrelevante Optionen in einer leicht zugänglichen Toolbar.
Hauptfunktionen:
- Accessibility-Toolbar: Eine Toolbar, die den Benutzern verschiedene Optionen zur Verbesserung der Barrierefreiheit bietet, wie z.B. das Ändern der Textgröße und Kontrastmodi.
- Skip Links: Fügt Links hinzu, die Benutzern helfen, direkt zum Hauptinhalt zu springen.
- ARIA-Rollen hinzufügen: Verbessert die Kompatibilität mit Screenreadern durch das Hinzufügen von ARIA-Rollen zu Elementen.
Kosten: Kostenlos
Beschreibung: WAH bietet eine Vielzahl von Tools zur Verbesserung der Barrierefreiheit. Es ist besonders nützlich für Websites, die verschiedene Anpassungen benötigen.
Hauptfunktionen:
- Textgrößenanpassung: Benutzer können die Textgröße nach Bedarf anpassen.
- Kontrastmodi: Verschiedene Kontrastmodi verbessern die Lesbarkeit.
- Tastaturnavigation und Navigationserleichterungen: Verbessert die Navigation für Benutzer, die auf Tastaturen angewiesen sind.
Kosten: Kostenlos (Pro-Version verfügbar mit erweiterten Funktionen)
Wie man das Viewport-Meta-Tag im Divi-Theme anpasst
Wenn du Divi verwendest, hast du vielleicht bemerkt, dass es standardmäßig ein Viewport-Meta-Tag in den HTML-Header deiner WordPress-Seite einfügt. Dies kann dir zum Beispiel der Google Page Speed Test anzeigen. In diesem Beitrag zeige ich dir, wie du dieses Meta-Tag anpassen kannst, indem du ein wenig benutzerdefinierten Code hinzufügst. Den Code habe ich vom Support von Elegant Themes erhalten, als ich nach einer Lösung für dieses „Problem“ gefragt habe.
Was macht das Viewport-Meta-Tag?
Das Viewport-Meta-Tag steuert, wie deine Webseite auf verschiedenen Geräten angezeigt wird, insbesondere auf mobilen Geräten. Es bestimmt, wie die Seite skaliert und angepasst wird, um ein besseres Benutzererlebnis zu bieten.
Standardmäßiges Viewport-Meta-Tag im Divi-Theme
Divi fügt automatisch ein Viewport-Meta-Tag in den HTML-Header ein. Manchmal entspricht dieses Standard-Tag jedoch nicht den Anforderungen der Barrierefreiheit. Vielleicht möchtest du die maximale Skalierung ändern oder die Benutzer-Skalierung aktivieren.
So passt du das Viewport-Meta-Tag an
Hier ist der Code, den du in die functions.php-Datei deines Child-Themes einfügen musst:
PHP
function remove_my_action() {
remove_action('wp_head', 'et_add_viewport_meta');
}
function custom_et_add_viewport_meta(){
echo '<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=5.0, user-scalable=1" />';
}
add_action('init', 'remove_my_action');
add_action('wp_head', 'custom_et_add_viewport_meta');
Was macht dieser Code?
Entfernen der Standard-Einstellung:
Die Funktion remove_my_action entfernt die ursprüngliche Aktion, die das Viewport-Meta-Tag von Divi hinzufügt. Diese Funktion wird bei der Initialisierung von WordPress ausgeführt (init-Hook), um sicherzustellen, dass das standardmäßige Viewport-Meta-Tag entfernt wird, bevor irgendetwas anderes in den wp_head eingefügt wird.
Hinzufügen eines benutzerdefinierten Viewport-Meta-Tags:
Die Funktion custom_et_add_viewport_meta fügt ein neues, benutzerdefiniertes Viewport-Meta-Tag hinzu. Dieses Tag legt die Breite des Viewports auf die Breite des Geräts fest, die Anfangs-Skalierung auf 1.0, die maximale Skalierung auf 2.0 und erlaubt dem Benutzer, die Seite zu skalieren.
Aktivieren der Änderungen:
Schließlich fügen die beiden add_action-Befehle diese Funktionen zu den entsprechenden Hooks hinzu. Der erste Befehl entfernt das Standard-Viewport-Tag bei der Initialisierung von WordPress. Der zweite Befehl fügt das benutzerdefinierte Tag in den HTML-Header (wp_head-Hook) ein.
Mein Fazit:
Zum Schluss möchte ich sagen: Barrierefreiheit ist super wichtig für jede Website, und die richtigen Tools können wirklich einen großen Unterschied machen. Plugins wie der Divi Assistant von Pee-Aye Creative sind sehr hilfreich, um Dinge, die im Divi Theme nicht standardmäßig enthalten sind, schnell und einfach umzusetzen. Auch Tools wie der Tota11y Button sind klasse, um Barrierefreiheitsprobleme schnell zu erkennen und zu beheben.
Es kann ein bisschen Zeit und Geduld erfordern, die richtigen Tools zu finden, aber es lohnt sich: Eine Website, die für alle zugänglich und benutzerfreundlich ist. Mit zukünftigen Updates von WordPress und anderen Plattformen wird die Barrierefreiheit sicher weiter verbessert. Das ist ein weiterer Grund, warum es wichtig ist, immer alle Systeme aktuell zu halten – auch wegen der Sicherheit.
Diese Tipps und Empfehlungen sollen dir helfen, deine Website barrierefreier zu gestalten. Probiere sie aus und erzähl mir, wie es dir ergangen ist – gemeinsam können wir das Web ein Stück zugänglicher machen! Wenn dir der Beitrag gefallen hat, freue ich mich, wenn du ihn teilst und/oder einen Kommentar hinterlässt.
0 Kommentare