Barrierefreiheiut optimieren

Hier ist die Zusammenfassung mit den jeweiligen CSS-Codes und Links zu den Plugins, wie man Divi bzgl. der Barrierefreiheit optimieren kann:

---

1. Divi Accessibility Plugin installieren

• Plugin: Divi Accessibility Plugin auf GitHub
• Hinweis: Du kannst die Version von Github nutzen und musst nicht die kostenpflichtige Version im Divi Marketplace verwenden.

---

2. Navigation und Kontrast im Divi Slider verbessern (CSS)

/* Beispiel: Kontrast und Tastatur-Outline für Navigationspfeile im Divi Slider */
.et_pb_slider .et-pb-arrow-prev,
.et_pb_slider .et-pb-arrow-next {
    color: #000; /* Schwarz für besseren Kontrast */
    outline: none;
}
.et_pb_slider .et-pb-arrow-prev:focus,
.et_pb_slider .et-pb-arrow-next:focus {
    outline: 2px solid #00ff00; /* Grüne Umrandung bei Tastaturfokus */
}

Für den vollständigen CSS-Code siehe den separaten Artikel „Barrierefreiheit des Divi Slider Moduls verbessern“.

---

3. Elternmenüpunkten mit Dropdowns Links hinzufügen

Kein CSS nötig, sondern Menüstruktur anpassen:
Elternmenüpunkten einen Link geben (z.B. den gleichen Link wie beim ersten Unterpunkt).

---

4. Hamburger-Menü sichtbar machen (CSS)

span.et_pb_header_toggle:focus {
    outline: 2px solid white;
}

---

5. Tastaturnavigationsreihenfolge im Slideout-Menü (CSS + jQuery)

CSS:

.et_slide_in_menu_container {
    display: none;
}

jQuery:

jQuery(".et_slide_in_menu_container").insertAfter("#main-header");

---

6. Divi Blurb Module Tastaturnavigation verbessern (CSS)

.et_pb_blurb a.keyboard-outline {
    display: inline-block;
}

Zusätzlich Links in den Modulen manuell hinzufügen.

---

7. Footer-Header-Tags ändern (PHP)

add_action ('widgets_init', 'tb_modify_footer', 100);

function tb_modify_footer() {
    global $wp_registered_sidebars;
    $before = "<h2 class='widgettitle'>";
    $after = "</h2>";

    $wp_registered_sidebars['sidebar-2']['before_title'] = $before;
    $wp_registered_sidebars['sidebar-3']['before_title'] = $before;
    $wp_registered_sidebars['sidebar-4']['before_title'] = $before;
    $wp_registered_sidebars['sidebar-5']['before_title'] = $before;
    $wp_registered_sidebars['sidebar-6']['before_title'] = $before;

    $wp_registered_sidebars['sidebar-2']['after_title'] = $after;
    $wp_registered_sidebars['sidebar-3']['after_title'] = $after;
    $wp_registered_sidebars['sidebar-4']['after_title'] = $after;
    $wp_registered_sidebars['sidebar-5']['after_title'] = $after;
    $wp_registered_sidebars['sidebar-6']['after_title'] = $after;

    return true;
}

---

8. aria-label für Video-Wiedergabe-Button hinzufügen (JS)

jQuery(document).ready(function() {
    jQuery('.et_pb_video_play').attr('aria-label', 'Video abspielen');
});

Einfügen unter Divi Theme Optionen → Integration → Code in den Body-Bereich.

---

9. WAVE Browser Erweiterung installieren

• Link: WAVE Accessibility Tool für Chrome

---

10. Colour Contrast Analyzer herunterladen

• Link: Colour Contrast Analyzer – Paciello Group

---

11. Alt-Texte zu Bildern hinzufügen

• Im WordPress-Mediathek-Bereich Alt-Texte ergänzen
• In Divi Bildmodulen unter Advanced → Attribute Alt-Text setzen

---

12. Tastaturnavigation für Nicht-Anker-Tags (JS Beispiel)

// Beispiel: tabindex für ein div hinzufügen, um es fokussierbar zu machen
document.querySelectorAll('div.navigable').forEach(el => el.setAttribute('tabindex', '0'));

---

13. Tastaturnavigations-Umrisse (CSS)

:focus-visible {
    outline-style: solid !important;
    outline-width: 2px !important;
    -webkit-transition: none !important;
    transition: none !important;
    border: 2px solid limegreen !important;
}

---

14. Kontrastreiche Hintergrundfarbe für Text über Bildern (Beispiel CSS)

.et_pb_slider .et_pb_slide_description {
    background-color: rgba(0, 0, 0, 0.7); /* Schwarzer halbtransparenter Hintergrund */
    color: #fff; /* Weißer Text */
}

---

15. Hintergrundfarbe im Customizer ändern

Im WordPress Customizer → Farben → Hintergrundfarbe auf Weiß oder Schwarz setzen.

---

16. Hintergrundfarbe mit geringer Deckkraft (CSS)

.element-mit-kontrastproblem {
    background-color: rgba(0, 0, 0, 0.01);
}

Alternativ für weißen Hintergrund:

background-color: rgba(255, 255, 255, 0.01);

---

17. Unsichtbare WAVE Fehler im Social Media Modul beheben (CSS)

.et_pb_social_media_follow_network_name,
.et_pb_search .screen-reader-text {
    color: black;
    background-color: white;
}

#et-main-area .et_pb_social_media_follow a.icon {
    text-decoration: none;
}

---

18. Monarch Plugin Social Sharing Buttons verbessern (CSS + JS)

CSS für Fokusrahmen:

.et_social_networks a.et_social_share:focus {
    border: 1px solid black;
}

JS für ARIA-Labels:

<script>
document.addEventListener("DOMContentLoaded", function() {
    jQuery('[data-social_name="facebook"]').attr("aria-label", "Facebook");
    jQuery('[data-social_name="twitter"]').attr("aria-label", "Twitter");
    jQuery('[data-social_name="linkedin"]').attr("aria-label", "LinkedIn");
    jQuery('[data-social_name="gmail"]').attr("aria-label", "Gmail");
});
</script>

---

19. Plugins aktuell halten & Barrierefreiheitsfehler melden

Regelmäßig Updates durchführen und Probleme den Entwicklern melden.

---

20. Checkliste und Bonus Tipp

• Schriftgröße mindestens 16px verwenden
• Gut lesbare Schriftarten auswählen

---