Wie man die Barrierefreiheit des Divi Slider-Moduls nur mit CSS verbessert

Das Divi Slider-Modul weist standardmäßig viele erhebliche Barrierefreiheitsverstöße auf. Die Tastatursteuerung ist mangelhaft, da man beim Durchlaufen der Navigationselemente nicht sehen kann, was ausgewählt ist.
 
Außerdem ist der Kontrast der Navigationssymbole (Punkte und Pfeile) oft unzureichend. Du solltest dieses Divi Barrierefreiheitsproblem beheben mit der unten aufgeführten Anleitung.
 
Für ein Beispiel eines barrierefreien Sliders siehe die Demo des W3C[1].
 
In diesem Artikel stelle ich etwas CSS bereit, das in Kombination mit dem Divi Accessibility-Plugin die Barrierefreiheit der Navigationssteuerung des Divi Slider-Moduls erheblich verbessert, indem der Kontrast und die Sichtbarkeit der Tastaturnavigation optimiert werden.
 
Diese Änderungen machen den Divi Slider in WordPress jedoch nicht vollständig barrierefrei.
 
Barrierefreiheit erfordert etwa eine Schaltfläche, um die Animation zu stoppen (wenn das automatische Weiterblättern aktiviert ist), was im Divi Slider nicht vorgesehen ist.
 
Um dieses Problem zu lösen, könntest du deinen Slider so einstellen, dass er nur manuell weiterschaltet.
 
Es werden wahrscheinlich noch weitere Barrierefreiheitsprobleme bestehen bleiben, selbst nach der Umsetzung dieser Änderungen. Aber sie sollten die Barrierefreiheit im Vergleich zum ursprünglichen Divi Slider erheblich verbessern.

BONUS: Lade meine ultimatives WordPress PDF herunter – Website auf ein neues Level heben

Die Ziele

Das Ziel ist es, Folgendes zu erreichen:

1. Den Kontrast der Navigationspfeile und -punkte des Sliders sowohl für helle als auch für dunkle Fälle zu erhöhen.
2. Die Größe des Punktes für die aktuelle Folie zu ändern, sodass deutlicher wird, auf welcher Folie man sich befindet (nicht nur durch die Farbe).
3. Die Navigationselemente beim Tabben mit der Tastatur hervorzuheben.
4. Einen Umriss, um den Punkt hinzuzufügen, den man mit der Tastatur ausgewählt hat.

Das Divi Accessibility-Plugin

Damit die Navigationsfunktionen der Tab-Taste funktionieren, musst du das Divi Accessibility-Plugin auf deiner Website installieren. Dies ist ein großartiges, kostenloses Plugin, das du auf Github herunterladen kannst.

Das CSS um die Divi Slider Modul Barrierefreiheit zu verbessern

Hier ist das CSS, das du zu deinem Child-Theme oder direkt im Customizer hinzufügen kannst:

/* ------------------------------------------------------------- */
/* VERBESSERUNG DER BARRIEREFREIHEIT DES DIVI SLIDER-MODULS
https://trabolda25.com */
/* VERBESSERUNG DES KONTRASTS DER SLIDER-PUNKTE */
/* ------------------------------------------------------------- */
.et_pb_slider .et-pb-controllers {
 left: 50%;
 transform: translateX(-50%);
 width: auto;
 text-align: center;
 z-index: 10;
 padding-top: 10px;
 height: 28px;
 padding: 10px 15px 0;
 border-radius: 14px;
}
.et_pb_slider.et_pb_bg_layout_light .et-pb-controllers {
 background-color: #fff !important;
}
.et_pb_slider.et_pb_bg_layout_dark .et-pb-controllers {
 background-color: #000 !important;
}
.et_pb_slider.et_pb_bg_layout_dark .et-pb-controllers a {
 background-color: #fff !important;
}

/* DUNKLERE PUNKTE AUF WEIßEM HINTERGRUND */
.et_pb_bg_layout_light .et-pb-controllers a {
 background-color: rgba(0, 0, 0, 0.8) !important;
color: white !important;
}

/* GRÖSSERER PUNKT FÜR AKTUELLE FOLIE */
.et_pb_slider .et-pb-controllers a.et-pb-active-control {
 width: 11px;
height: 11px;
transform: translateY(-2px);
}

/* DICKES VIERECK UM MIT TASTATUR GEWÄHLTEN PUNKT (ERFORDERT DIVI ACCESSIBILITY-PLUGIN) */
.et_pb_slider .et-pb-controllers a.keyboard-outline {
 opacity: 1;
 outline-width: 3px !important;
 border-radius: 0;
}
.et_pb_slider.et_pb_bg_layout_dark .et-pb-controllers a.keyboard-outline {
 outline-color: white;
}
.et_pb_slider.et_pb_bg_layout_light .et-pb-controllers a.keyboard-outline {
 outline-color: black;
}

/* ENTFERNEN DER UNTERSTRICHENEN PFEILE (VERURSACHT DURCH DAS DIVI ACCESSIBILITY-PLUGIN) */
#main-content .et_pb_slider .et-pb-arrow-prev,
#main-content .et_pb_slider .et-pb-arrow-next {
text-decoration: none !important;
}
/* SICHTBARE NAVIGATIONSPFEILE BEIM TABBEN MIT DER TASTATUR */
.et-pb-arrow-next.keyboard-outline {
opacity: 1;
right: 22px;
}
.et-pb-arrow-prev.keyboard-outline {
opacity: 1;
left: 22px;
}
/* HINTERGRUND FÜR PFEILE HINZUFÜGEN */
.et_pb_slider.et_pb_bg_layout_dark .et-pb-arrow-next:before,
.et_pb_slider.et_pb_bg_layout_dark .et-pb-arrow-prev:before {
 background-color:black;
color: white;
}
.et_pb_slider.et_pb_bg_layout_light .et-pb-arrow-next:before,
.et_pb_slider.et_pb_bg_layout_light .et-pb-arrow-prev:before {
 background-color:white;
color: black;
}

 
Das Tolle daran ist, dass der passende Hintergrund basierend auf deiner hellen oder dunklen Texteinstellung in Design -> Text -> Textfarbe der Folie hinzugefügt wird.
 
Wenn du diese auf Dunkel setzt, wird der Hintergrund weiß und umgekehrt. Hier ist ein Beispiel, das den weißen Hintergrund mit dunkler Textfarbe zeigt:

Dies sollte jetzt für alle deine Slides funktionieren.

FAQ