Wie kann man eine Divi Website barrierefrei machen?

Warum ist Barrierefreiheit für Divi-Websites wichtig?

Mit fast einer Million Abonnenten gehört Divi zu den beliebtesten kostenpflichtigen WordPress-Themes und Page-Builder-Plugins. Leider hat Divi keinen guten Ruf, wenn es um Barrierefreiheit geht. Daher ist es besonders wichtig, dass Sie als Benutzer lernen, wie Sie Ihre Divi-Website barrierefrei gestalten. Dies dient nicht nur dazu, eine gerechtere Web-Erfahrung zu schaffen, sondern auch, um rechtliche Probleme zu vermeiden.

In diesem Leitfaden zeigen wir Ihnen, wie Sie eine barrierefreie Divi-Website von Grund auf erstellen und wie Sie eine bestehende Website so anpassen können, dass sie allen Besuchern zugänglich ist – unabhängig von deren Fähigkeiten. Sie erfahren, welche grundlegenden Barrierefreiheits-Funktionen Divi bietet und worauf Sie besonders achten müssen, um sicherzustellen, dass Ihre Website wirklich barrierefrei ist.

Wie Sie Ihre Divi-Website barrierefrei gestalten

Um sicherzustellen, dass Ihre Divi-Website barrierefrei ist, folgen Sie diesen bewährten Schritten:

1. Verstehen Sie die Architektur des Divi-Themes
2. Fügen Sie einen “Skip-to-Content”-Link hinzu
3. Ergänzen Sie Tastaturnavigation durch sichtbare Umrandungen
4. Wählen Sie die richtigen Divi-Module
5. Installieren Sie die richtigen Plugins
6. Zeigen Sie den Titel und die Tagline Ihrer Website an
7. Wenden Sie ARIA-Rollen auf Ihre Website-Elemente an
8. Nutzen Sie eine saubere Überschriftenstruktur
9. Fügen Sie aussagekräftige Alt-Texte zu wichtigen Bildern hinzu
10. Verwenden Sie gut lesbare Schriftarten
11. Sorgen Sie für ausreichende Farbkontraste
12. Gestalten Sie Formulare barrierefrei
13. Verwenden Sie beschreibende Linktexte
14. Stellen Sie sicher, dass Ihre Online-Dokumente barrierefrei sind
15. Fügen Sie Untertitel und Transkripte für Videos hinzu
16. Nutzen Sie ein Divi-Barrierefreiheits-Plugin

Screenshot eines der vielen Divi Layouts:

Was bedeutet eine barrierefreie Divi-Website?

Eine barrierefreie Divi-Website ist eine, die von allen Besuchern uneingeschränkt genutzt werden kann, unabhängig von deren Fähigkeiten oder Einschränkungen. Um dies zu erreichen, muss Ihre Website den bekannten Standards für Barrierefreiheit im Web entsprechen. Diese Standards bieten detaillierte Anleitungen und Richtlinien zur Konfiguration Ihrer Divi-Website, damit sie allen Nutzern eine gleichberechtigte und inklusive Benutzererfahrung bietet.

Die bekanntesten Richtlinien für Barrierefreiheit im Web sind die Web Content Accessibility Guidelines (WCAG). Diese wurden vom World Wide Web Consortium (W3C) erstellt und gelten als Goldstandard für Barrierefreiheit im Web. Die WCAG haben außerdem einen erheblichen Einfluss auf weltweite Barrierefreiheitsvorschriften, einschließlich der europäischen Vorgaben, wie wir später in diesem Leitfaden erläutern werden.

Um als barrierefrei zu gelten, muss Ihre Divi-Website die Standards AA der WCAG einhalten. Wir werden später im Text genauer darauf eingehen, was das bedeutet.

Schritt-für-Schritt zur barrierefreien Divi-Website

Eine barrierefreie Divi-Website zu erstellen, ist ein mehrstufiger Prozess. Dies liegt nicht nur daran, dass Divi in Bezug auf Barrierefreiheit einige Schwächen aufweist, sondern auch daran, dass Sie die unterschiedlichen Bedürfnisse verschiedener Benutzergruppen berücksichtigen müssen. Menschen mit unterschiedlichen Behinderungen und Einschränkungen benötigen auch individuelle Lösungen, die auf ihre Bedürfnisse zugeschnitten sind.

Ihre Besucher könnten beispielsweise Hörbeeinträchtigungen oder verschiedene Sehbehinderungen wie Blindheit, eingeschränktes Sehen oder Farbblindheit haben. Andere könnten unter epileptischen Anfällen, eingeschränkter Mobilität, neurologischen Erkrankungen oder vielen anderen Einschränkungen leiden. Jede dieser Herausforderungen erfordert unterschiedliche Ansätze, um Ihre Divi-Website barrierefrei zu gestalten. Lassen Sie uns die Schritte durchgehen.

1. Verstehen Sie die Architektur des Divi-Themes

Ein grundlegendes Verständnis der Struktur und Funktionsweise von Divi ist entscheidend, um Barrierefreiheit umzusetzen. Lernen Sie, wie Divi Themes und Module aufgebaut sind, um sie entsprechend anzupassen.

Zunächst ist es wichtig zu wissen, dass Divi sowohl der Name eines Website-Builders als auch eines Themes ist. Das Divi-Theme enthält den gleichnamigen Website-Builder. Wenn Sie ein Divi-Abonnement haben, können Sie den Website-Builder auch separat als Plugin herunterladen und mit jedem anderen Theme verwenden.

Außerdem können Sie Divi mit einem sogenannten “Child Theme” erweitern, das Ihre Webagentur für Sie erstellt, oder das Sie im Elegant Themes Marketplace erwerben können. Die “Child Themes” basieren auf Divi selbst, bieten jedoch zusätzliche oder angepasste Designs und Seitenlayouts.

Dann gibt es noch Layout-Pakete. Diese ähneln auf den ersten Blick Themes, sind aber eher Sammlungen von Seitenlayouts für verschiedene Branchen oder Website-Typen. Sie sind im Divi-Theme und Website-Builder verfügbar und bieten Designvorlagen für Projekte wie Restaurant-, Fotografie- oder Spa-Websites.

300+ fertige Layout Packs für Projekte aller Art

Insgesamt gibt es über 300 solcher Pakete, die alle innerhalb des Themes Divi genutzt werden können.

Warum ist das wichtig? Alle diese Optionen haben dieselben grundlegenden Schwächen in Bezug auf Barrierefreiheit. Selbst wenn Sie ein anderes Theme verwenden, können die von Divi erstellten Seitenelemente problematisch bleiben. Evtl. werden die von Divi 5 bereitgestellten Elemente (wie Kopf- und Fußzeile) könnten besser zugänglich sein – allerdings ohne Garantie.

Fazit: Sie müssen sich mit den zahlreichen Barrierefreiheitsproblemen aller Divi-Themes auseinandersetzen. Diese können effizient durch geeignete Anpassungen oder auch einige kommerzielle Plugins wie accessibe gelöst werden.

2. Fügen Sie einen “Zum Inhalt springen”-Link hinzu

Ein “Skip-to-Content”-Link ermöglicht es Benutzern, die auf Screenreader oder Tastaturnavigation angewiesen sind, direkt zum Hauptinhalt der Seite zu springen und lange Menüs zu überspringen.

Ein “Zum Inhalt springen”-Link wird ganz oben im Dokument angezeigt, noch vor dem Header oder Navigationsmenü. Es ist wichtig, dass dieser Link entweder immer sichtbar ist oder beim Fokussieren erscheint. Für Nutzer dieser unterstützenden Technologie erfüllt der Link eine wichtige Funktion: Er ermöglicht es ihnen, die Navigation zu überspringen. Dies ist besonders nützlich, wenn sie mehrere Seiten derselben Website besuchen und nicht jedes Mal die Liste der Menüelemente durchlaufen möchten.

Leider bietet Divi standardmäßig keinen “Zum Inhalt springen”-Link. Dieser muss manuell hinzugefügt werden. Eine Anleitung dazu finden Sie in zahlreichen Tutorials.

3. Aktivieren Sie Umrandungen für die Tastaturnavigation

Aktivieren Sie sichtbare Umrandungen (Outlines), um sicherzustellen, dass Benutzer sehen können, welches Element aktuell fokussiert ist, wenn sie sich mit der Tastatur durch die Website bewegen. Die kann auch im Browser eingestellt werden.

Ein weiterer bedauerlicher Mangel des Divi-Themes ist, dass es standardmäßig die Umrandungen des Fokus-Zustands entfernt. Der Fokus-Zustand markiert Elemente auf einer Webseite, wenn sie über die Tastatur navigiert werden. Ohne diese Umrandungen ist es für Benutzer, die auf die Tastaturnavigation angewiesen sind, schwierig zu erkennen, welches Element aktuell fokussiert ist.

Um die Umrandungen zu aktivieren, können Sie den folgenden CSS-Code verwenden:

:focus {
    outline: solid #FF7500;
}
        

Fügen Sie diesen Code im Menü für “Zusätzliches CSS” unter Divi > Theme Customizer ein.

Umrandungen kennzeichnen Elemente für die Tastaturnavigation

Dieser einfache Schritt verbessert die Zugänglichkeit Ihrer Website erheblich, da Benutzer mit der Tastatur problemlos navigieren können.

4. Wählen Sie die richtigen Divi-Module

Einige Divi-Module sind barrierefreier als andere. Testen Sie, welche Module sich für Ihre Anforderungen eignen, und vermeiden Sie Module, die keine ordnungsgemäße Barrierefreiheit unterstützen.

Einer der Hauptvorteile von Divi ist die Vielzahl an Modulen, die es den Nutzern ermöglichen, Seitenlayouts modular zu erstellen. Leider gibt es jedoch keine offensichtliche Möglichkeit zu erkennen, welche Module barrierefrei sind und welche nicht.

Es gibt keine Tags oder Markierungen im Shop, die eine Filterung nach Barrierefreiheit ermöglichen. Daher müssen Sie die Module auf einer Seite platzieren und manuell testen, genau wie bei Themes und Plugins.

Eine wichtige Empfehlung: Vermeiden Sie Slider, um die Barrierefreiheit Ihrer Website zu gewährleisten. Divi bietet drei Slider-Typen:

• Einen normalen Bilder-Slider, siehe Divi Slider Module
• Einen Beitrags-Slider, der Blogposts Ihrer Website anzeigt, siehe Divi Post-Slider
• Einen Video-Slider, siehe Divi Video Slider

Wenn möglich sollten Sie diese Module für barrierefreie Websites meiden oder so anpassen lassen, dass die auch mit der Tastatur-Navigation gesteuert werden können.

Slider sind oft problematisch für Screenreader, da sie schwer vorlesbar sind. Außerdem wechseln sie manchmal zu schnell, was ablenkend und verwirrend sein kann.

Andere Beispiele für Module mit eingeschränkter Barrierefreiheit sind Toggles und Accordions, die nicht mit der Tastatur fokussierbar sind. Vermeiden Sie diese Module, wenn möglich.

5. Installieren Sie die richtigen Plugins

Nutzen Sie Plugins, die speziell dafür entwickelt wurden, Barrierefreiheit zu unterstützen, wie Plugins zur Verbesserung der Tastaturnavigation oder zur Prüfung der Farbkontraste.

Neben den Funktionen, die Divi selbst bietet, stellt das WordPress-Ökosystem viele Plugins bereit, mit denen Sie zusätzliche Features und Funktionen zu Ihrer Website hinzufügen können. Divi (bzw. der Hersteller Elegant Themes) bietet Erweiterungen für verschiedene Zwecke, wie Pop-ups oder Social Sharing. Weitere nützliche Plugins finden Sie im WordPress-Plugin-Verzeichnis.

Jedes Plugin, das Sie auf Ihrer Divi-Website verwenden möchten, sollte auf seine Barrierefreiheit geprüft werden. Dies gilt insbesondere für Erweiterungen, die visuelle Elemente zu Ihrer Website hinzufügen, ähnlich den Divi-Modulen, die wir zuvor besprochen haben.

Achten Sie darauf, dass die Plugins vollständig mit der Tastaturnavigation nutzbar sind. Überprüfen Sie Support- und Bewertungsforen, da Nutzer dort oft über Probleme mit Barrierefreiheit berichten. Zudem sollte jede Funktionalität, die Sie Ihrer Website hinzufügen, folgende Kriterien erfüllen:

• sie sollten Ihren Besuchern die möglichkeit geben, Zeitbegrenzungen zu kontrollieren, z.B. automatische Logouts
• sie sollten keine Elemente enthalten, die mehr als dreimal pro Sekunde blinken
• sie sollte keine bewegten oder automatisch aktualisierten Inhalte enthalten

Aufgrund der vielfältigen Anforderungen für Barrierefreiheit ist es notwendig, dass auch alle WordPress-Plugins, die Sie verwenden, vollständig den WCAG-Richtlinien entsprechen.

6. Zeigen Sie Ihren Seitentitel und Ihre Tagline an

Stellen Sie sicher, dass der Titel und die Tagline Ihrer Website für Screenreader sichtbar sind, um den Kontext der Website zu vermitteln.

Seitentitel und Taglines sind wichtige Barrierefreiheits-Tools. Sie vermitteln das Thema und den Inhalt Ihrer Seiten, was sie leichter identifizierbar macht – in Suchergebnissen, Sitemaps oder bei mehreren geöffneten Tabs im Browser.

Überprüfung Ihrer Seitentitel

Der einfachste Weg, die Titel Ihrer Website-Seiten zu überprüfen, ist das Öffnen der Seiten in einem Browser. Wenn Sie mit der Maus über einen Browser-Tab fahren, werden Titel und Tagline angezeigt.

Der Seitentitel ist wichtig für Barrierefreiheit!

Alternativ können Sie die Entwickler-Tools Ihres Browsers nutzen. Untersuchen Sie eine Seite und suchen Sie nach den <title>– und <meta name="description">-Tags. Manche WordPress-Themes kombinieren diese auch in einem einzigen <title>-Tag.

Erstellen von Seitentiteln und Untertitel (Tagline) in Divi

Das Ändern Ihres Seitentitels und Ihrer Untertitel funktioniert in Divi genauso wie in WordPress allgemein. Gehen Sie zu Einstellungen > Allgemein im WordPress-Backend, um die Felder für Seitentitel und Tagline oben auf der Seite zu finden.

Einstellungen für Seitentitel und Untertitel in den WordPress-Einstellungen.

Nehmen Sie die erforderlichen Änderungen vor und speichern Sie diese, um die Informationen zu aktualisieren. Alternativ können Sie auch den Theme-Customizer über Divi > Theme Customizer verwenden. Dort finden Sie dieselben Optionen unter Allgemeine Einstellungen > Website-Identität.

Wenn Sie möchten, dass Ihr Seitentitel und der Untertiel auch auf den Seiten Ihrer Website angezeigt werden, können Sie diese über das “Call to Action“-Modul hinzufügen. Eine Anleitung dazu finden Sie in diesem Divi-Tutorial.

Für alle anderen Beiträge und Seiten können Sie den Titel oben im WordPress-Editor festlegen. Komfortabler geht dies auch mit SEO-Tools wie Yoast SEO.

7. Verwenden Sie ARIA-Rollen für Ihre Website-Elemente

Verwenden Sie ARIA-Rollen (Accessible Rich Internet Applications), um Elementen ihrer Website semantische Bedeutung zu geben, z. B. role="banner" oder role="navigation".

ARIA-HTML-Attribute (Accessible Rich Internet Applications) bieten zusätzliche Kontexte für die Funktion verschiedener Seiten- und Layout-Elemente, insbesondere für Screenreader. Sie sind besonders hilfreich für Menschen mit Sehbehinderungen, um Websites zu navigieren.

ARIA-Attribute sind vor allem bei Navigationsmenüs wichtig. Sie ermöglichen es Screenreadern zu erkennen, ob ein Dropdown-Menü geöffnet ist, auf welcher Seite sich der Benutzer befindet, wo der Link zur Startseite ist oder ob ein bestimmter Link ein Untermenü enthält.

ARIA ist auch entscheidend für Fehlermeldungen, erweiterbare Inhalte (z. B. Akkordeons oder Toggles), Informationen zu Links und Formularsteuerelementen sowie viele andere Bereiche Ihrer Website.

Neben ARIA gibt es auch native semantische HTML-Attribute wie <nav>, <button> oder <footer>, die ähnliche Funktionen erfüllen.

Divi verwendet zwar semantisches HTML, allerdings ist es nicht bekannt für die umfassende Nutzung von ARIA-Attributen; zudem bietet Divi keine native Funktionalität, um diese manuell hinzuzufügen.

Daher ist erforderlich, fehlende ARIA-Attribute zu ergänzen die erforderlichen Markierungen auf unzugängliche Elemente anzuwenden.

Um Ihre Divi-Website wirksam barrierefrei zu machen, empfehlen wir, dass Sie allen Funktionselementen wie Buttons, Links, Schaltflächen, etc. die entsprechenden Aria-Rollen geben, so dass die Bedienung dieser Elemente selbsterklärend wird. Erfreundlicherweise gibt es Barrierefreiheits-PlugIns für Divi wie Accessibility Attributes , die Ihnen die Arbeit etwas erleichtern. Sollten Sie weitere Content-Module in Ihrer Website nutzen, etwas aus PlugIns, sind evtl. individuelle Anpassungen erforderlich, so dass auch diese Module die benötigten ARIA-Rollen erhalten. Gern unterstützen wir Sie dabei!

8. Verwenden Sie eine ordnungsgemäße Überschriftenstruktur

Eine logische Überschriftenhierarchie (h2 bis H6) erleichtert es Nutzern, die Inhalte Ihrer Website zu erfassen und zu navigieren.

Überschriften geben sowohl Besuchern als auch Suchmaschinen einen Überblick über die Struktur und das Thema einer Webseite, indem sie die Inhalte in thematische Abschnitte unterteilen. Jede Seite sollte eine h1-Überschrift mit den wichtigsten Informationen an der Spitze haben, gefolgt von weiteren Überschriften in hierarchischer Reihenfolge.

Überschriften sind eine wesentliche Unterstützung für die Lesbarkeit und Navigation. Sie helfen sowohl sehenden als auch sehbehinderten Besuchern, den Inhalt einer Webseite zu verstehen. Für Nutzer von Screenreadern sind sie jedoch unverzichtbar.

Überschriften ermöglichen es Screenreader-Nutzern, direkt zu den Abschnitten zu springen, die sie interessieren. Ihre Reihenfolge (h1, h2, h3 usw.) liefert zudem Informationen über die Bedeutung der einzelnen Inhaltsabschnitte.

Es ist daher wichtig, nicht einfach Text fett zu formatieren oder die Schriftgröße zu erhöhen, um Überschriften darzustellen, sondern echte Überschriften-Tags zu verwenden. Für Screenreader zählt nicht das visuelle Erscheinungsbild von Textelementen, sondern das HTML-Markup.

Verwendung von Überschriften-Tags in Divi

Divi verfügt über ein Überschriften-Modul, mit dem Sie Überschriften in Ihre Seiten einfügen können. Im Tab “Design” können Sie die Reihenfolge der Überschriften (von h1 bis h6) festlegen.

Alternativ können Sie im Textmodul Überschriften erstellen. Es funktioniert ähnlich wie der klassische WordPress-Editor, bei dem Sie den Typ der Überschrift im Dropdown-Menü oben links auswählen können.

Da Divi modular aufgebaut ist, kann es etwas schwierig sein, den Überblick über die Überschriftenstruktur zu behalten. Zudem gibt es manchmal Probleme mit bestimmten Modulen, die standardmäßig Überschriften-Tags enthalten, die nicht der gewünschten Reihenfolge entsprechen.

Aus diesem Grund ist es ratsam, Ihre Seiten durch Tools wie die Chrome Extension “SEO META in 1 Click” zu prüfen, um eine Aufschlüsselung der Überschriftenstruktur zu erhalten und bei Bedarf Korrekturen vorzunehmen.

9. Fügen Sie Alt-Texte zu aussagekräftigen Bildern hinzu

Beschreiben Sie den Inhalt und die Bedeutung von Bildern mit alternativen Texten, damit sie für Screenreader zugänglich sind.

Alt-Texte sind textbasierte Beschreibungen, die in den HTML-Quellcode einer Webseite eingebettet sind und mit einem Bild verknüpft werden. Sie erscheinen als Platzhalter, wenn ein Bild nicht geladen wird, und sind für die Barrierefreiheit von entscheidender Bedeutung. Screenreader lesen Alt-Texte vor, damit sehbehinderte Besucher verstehen, welches Bild auf der Seite angezeigt wird.

Wichtig ist, dass nur aussagekräftige Bilder mit Alt-Text versehen werden sollten.

Aussagekräftige Bilder enthalten wichtige, nützliche und kritische Informationen und sind nicht nur zu dekorativen Zwecken eingefügt. Das Hinzufügen von Alt-Text zu rein dekorativen Bildern kann Screenreader-Benutzer ablenken, weshalb dies vermieden werden sollte.

Was sollte in einem Alt-Text enthalten sein?

Idealerweise vermittelt der Alt-Text die gleiche Information wie das Bild, mit dem er verknüpft ist. Er sollte eine klare Beschreibung des Bildinhalts liefern.

Schlechtes Beispiel: „Asymmetrisches Kleid mit einer Schulter.“
Gutes Beispiel: „Frau in einem knielangen himmelblauen Kleid, bedeckt von Hals bis Handgelenk auf der rechten Seite, mit freiem linken Arm.“

Gleichzeitig sollten Sie präzise sein. Halten Sie den Alt-Text idealerweise zwischen 80 und 100 Zeichen. Nutzen Sie bei Bedarf einen Zeichenzähler, um die Länge im Blick zu behalten.

Hinzufügen von Alt-Texten in Divi

Der einfachste Schritt zur Verwendung von Alt-Texten auf Ihrer Divi-Website ist, diese beim Hochladen eines Bildes in die Mediathek einzufügen. So wird der Alt-Text automatisch eingefügt, wenn Sie das Bild an einer beliebigen Stelle auf Ihrer Website verwenden.

Sie können dies entweder über das Medien-Menü im Dashboard oder direkt beim Zugriff auf die Mediathek aus dem WordPress-Editor heraus tun.

Beachten Sie, dass Divi Alt-Texte aus der WordPress-Mediathek übernimmt, diese jedoch nicht für bereits vorhandene Bilder aktualisiert, wenn Sie Alt-Texte später in der Mediathek hinzufügen. In solchen Fällen müssen Sie die Alt-Texte individuell im Erweitert-Tab des Bildmoduls ändern (Erweitert > Attribute > Bild-Alt-Text).

Tipp: Regelmäßige Überprüfungen Ihrer Alt-Texte sorgen dafür, dass Ihre Inhalte für alle Nutzer zugänglich bleiben.

Einstellung der Meta-Daten im Divi-Bild-Modul

An einem Bild können in WordPress zwar einige Meta-Daten angepasst werden, allerdings werden diese Daten dann in der Mediathek gespeichert und auch ausgegeben, wenn das selbe Bild in einem anderen Kontext erneut gezeigt wird.

Das Bild Modul “PCM Image für Divi” von PERIMETRIK® erlaubt eine differenzierte Steuerung der Ausgabe von Meta-Daten am Bild, auch dynamisch aus Infos des Posts. Die Angaben können statisch in Eingabefeldern hinterlegt werden oder dynamisch aus unterschiedlichen Quellen geladen werden.

10. Verwenden Sie gut lesbare Schriftarten

Wählen Sie Schriftarten, die leicht zu lesen sind, und vermeiden Sie dekorative oder schwer lesbare Typografien.

Schriftarten sind ein wichtiger Aspekt der Barrierefreiheit im Web, da sie die Lesbarkeit stark beeinflussen. Hier sind die Kriterien, die eine Schriftart zugänglich machen:

• Sie sind einfach und vertraut.
• Buchstaben und Zeichen sind leicht zu unterscheiden (so können in vielen Schriften rn und m leicht verwechselt werden)
• Ausreichender Abstand zwischen Zeichen und Zeilen.
• Keine übermäßige Verzierung oder Kursivierung.
• Ausreichend große Textgröße.
• Genügender Kontrast zwischen Schriftfarbe und Hintergrund.

Google bietet z.B. einige moderne, besonders gut lesbare Schriften wie Raleway und Noto Sans.

Auch Serifenlose Schriften können den Anforderungen der Barrierefreiheit genügen

Auswahl von Schriftarten in Divi

In Divi können Sie die Standardeinstellungen für Schriftarten unter Divi > Theme Customizer > Allgemeine Einstellungen > Typografie anpassen.

Dort stehen Ihnen Optionen für alles von Schriftgröße und Schriftfamilie bis hin zu Stil und Farbe zur Verfügung. Änderungen, die Sie hier vornehmen, wirken sich auf Ihre gesamte Website aus.

Zusätzlich haben Sie die Möglichkeit, lokale Schriftanpassungen in jedem Textmodul auf individuellen Seiten vorzunehmen. Gehen Sie dazu in den Design-Tab unter Text.

Diese Flexibilität erlaubt es Ihnen, Schriftarten sowohl global als auch lokal anzupassen, um sicherzustellen, dass Ihre Inhalte immer gut lesbar sind.

Google-Schriften und DSGVO

Beachten Sie, dass Sie Schriften nicht einfach von Google direkt einbinden dürfen. Auch die Schriften, die Sie standardmäßig im Divi-Theme Customizer festlegen können, werden normalerweise direkt von Google geladen. Dies ist in der EU aufgrund der GDPR bzw. DSGVO nicht zulässig. Sie können die Schriften jedoch legal von Google herunterladen, lokal auf Ihrem Webserver speichern und von dort aus einbinden. Sprechen Sie uns an, wenn Sie dabei Unterstützung benötigen.

11. Sorgen Sie für ausreichende Farbkontraste

Stellen Sie sicher, dass Texte und Hintergründe einen ausreichenden Farbkontrast aufweisen, um für Menschen mit Sehbehinderungen lesbar zu sein.

Farbkontraste spielen eine entscheidende Rolle für die Barrierefreiheit. Jeder Text auf Ihrer Divi-Website muss ein Mindest-Kontrastverhältnis von 4,5:1 zum Hintergrund aufweisen. Für Text über 18pt gilt ein Mindestverhältnis von 3:1.

Anpassung der Farbkontraste in Divi

In Divi finden Sie entsprechende Einstellungen im Theme Customizer unter Allgemeine Einstellungen. Gehen Sie zu Typografie > Fließtextfarbe und Hintergrund > Hintergrundfarbe, um allgemeine Farbkontrasteinstellungen für Ihre gesamte Website vorzunehmen.

Im Web gibt es eine ganze Reihe von Farbkontrast-Checkern wie den webaim Contrast Checker.
Die Farbkontrast-Checker ermitteln den Farbkontrast für beliebige Farbkombinationen und bewerten, ob diese ausreichen für verschieden große Schriften

Natürlich können Sie diese Anpassungen auch in einzelnen Modulen vornehmen. Die Einstellungen für Schriftarten in Textmodulen haben wir oben bereits behandelt. Zusätzlich finden Sie die Option Hintergrund im Inhalts-Tab, um die Hintergrundfarben anzupassen.

Besondere Anforderungen für Farbkontraste

Die Anforderungen an Farbkontraste gelten auch für aussagekräftige Nicht-Text-Elemente wie grafische Objekte, Interface-Komponenten und wichtige Icons. Dazu gehören beispielsweise Home-Icons, Menü-Icons oder Eingabefelder in Online-Formularen.

Auf Logos hingegen gelten keine Kontrastvorgaben.

Regelmäßige Überprüfungen Ihrer Website mit Tools zur Kontrastprüfung stellen sicher, dass Ihre Inhalte für alle Nutzer zugänglich bleiben.

12. Stellen Sie sicher, dass Formulare barrierefrei sind

Nutzen Sie beschriftete Eingabefelder, klare Fehlermeldungen und gut zugängliche Beschriftungen, um Formulare für alle Benutzer zugänglich zu machen.

Formulare sind ein wesentliches Werkzeug, um Kontaktinformationen zu sammeln, Zahlungen zu akzeptieren und andere wichtige Online-Interaktionen durchzuführen. Leider sind Formulare oft standardmäßig nicht barrierefrei, da sie falsch markiert oder Formularelemente unsachgemäß verwendet werden. Hier sind die wichtigsten Anforderungen, um sicherzustellen, dass Ihre Formulare für alle Besucher zugänglich sind:

• Verwenden Sie korrektes Markup, wie <label>– und <fieldset>-Tags.
• Beschriften Sie Formularfelder ordnungsgemäß, damit sie von Screenreadern erkannt werden.
• Nutzen Sie Platzhalter, um zu zeigen, wie die Formularfelder ausgefüllt werden sollen (z. B. das korrekte E-Mail-Format).
• Machen Sie Ihre Formulare für die Tastaturnavigation zugänglich.
• Stellen Sie das gleiche Kontrastverhältnis wie für Text sicher.
• Verwenden Sie Text, Icons, Symbole und Hinweise, um Fehlermeldungen anzuzeigen – nicht nur Farben.

Barrierefreiheit von Formularen in Divi

Leider verbergen Divi-Formulare ihre Labels standardmäßig, weshalb sie nicht barrierefrei sind. Um die Labels anzuzeigen, können Sie den folgenden CSS-Code verwenden:

.et_pb_contact_form_label {
    display: block;
}
        

Darüber hinaus gibt es in Divi keine integrierten Optionen, um die Farben und Kontraste des Kontaktformularmoduls anzupassen. Diese Anpassungen müssen ebenfalls mit benutzerdefiniertem CSS vorgenommen werden. Alternativ können Sie professionelle Formulare mit Gravity Forms erstellen (lassen).

13. Verwenden Sie beschreibende Linktexte

Vermeiden Sie generische Linktexte wie „Klicken Sie hier“ und nutzen Sie stattdessen aussagekräftige Beschreibungen des Linkziels.

Links sind das zentrale Werkzeug zur Navigation auf Websites. Sie erscheinen in Navigationsmenüs und im gesamten Webinhalt, um verschiedene Seiten miteinander zu verbinden.

Da sie eine entscheidende Rolle für die Benutzerfreundlichkeit spielen, müssen Links barrierefrei gestaltet werden. Ein wesentlicher Schritt dazu ist die Verwendung klarer Linktexte. Linktexte sind der sichtbare, anklickbare Text, der als Link auf Webseiten erscheint.

Ähnlich wie Überschriften können Nutzer von Screenreadern Links als Ankerpunkte nutzen, um schnell durch Seiten zu navigieren. Dafür ist es wichtig, dass der Linktext allein verständlich macht, wohin der Link führt. Der Text sollte ohne weiteren Kontext klar und eindeutig sein.

Anpassen von Linkstilen in Divi

In Divi unterscheidet sich die Erstellung von Linktexten nicht von der Arbeit im normalen WordPress-Editor. Allerdings sollten Sie darauf achten, dass die Links ausreichend mit ihrem Hintergrund und dem umgebenden Text kontrastieren.

Sie können die Linkfarben im Theme Customizer unter Allgemeine Einstellungen > Typografie > Fließtext-Linkfarbe anpassen.

Screenshot der Optionen zur Anpassung von Linkfarben im Divi Theme Customizer

Ebenso können Sie die Styling-Optionen für Header-Links im Bereich Header & Navigation > Einstellungen für feste Navigation anpassen.

Schließlich gibt es auch in einzelnen Modulen Möglichkeiten, die Linkfarben anzupassen, etwa im Design-Panel des Menümoduls.

Screenshot der Optionen zur Anpassung von Menü-Linkfarben im Divi-Menümodul

Beschreibende und gut sichtbare Links verbessern nicht nur die Barrierefreiheit Ihrer Website, sondern auch die Benutzererfahrung insgesamt.

14. Stellen Sie sicher, dass Ihre Online-Dokumente barrierefrei sind

Dokumente wie PDFs sollten barrierefrei sein, indem sie durchsuchbar, mit Tags versehen und mit alternativen Texten für Grafiken ausgestattet sind.

Wenn Sie auf Ihrer Website Online-Dokumente zur Ansicht oder zum Download bereitstellen, müssen auch diese barrierefrei sein. Leider sind sie oft standardmäßig nicht zugänglich. Um Dokumente barrierefrei zu machen, müssen Sie weitgehend dieselben Richtlinien befolgen, die auch für den Rest Ihrer Divi-Website gelten:

• Stellen Sie sicher, dass die Struktur der Elemente durch korrekte Tags für Screenreader sichtbar ist.
• Sorgen Sie für eine logische Lesereihenfolge und Tabulator-Reihenfolge.
• Stellen Sie ausreichende Farbkontraste zwischen Text und Hintergrund sicher.
• Fügen Sie Alt-Texte für aussagekräftige Bilder hinzu.
• Verwenden Sie beschreibende Linktexte.

Anwendungen wie Adobe Acrobat und Microsoft Office bieten die Möglichkeit, barrierefreie Dokumente zu erstellen. Wenn Sie jedoch bereits Dokumente auf Ihrer Website haben, die nicht vollständig barrierefrei sind, müssen Sie diese nachbearbeiten, andernfalls erreicht Ihre Website als Ganzes nicht den Status “barrierefrei”!

Einbinden von Dokumenten in Divi

Divi bietet die Möglichkeit, Dokumente als Downloads auf Ihrer Website bereitzustellen. Eine der Hauptmethoden besteht darin, das Call to Action-Modul zu verwenden und dessen Button auf ein PDF-Dokument in Ihrer Mediathek zu verlinken. Dies können Sie unter Content > Link festlegen. Alternativ können Sie eine spezialisierte Lösung wie den Download Manager für Ihre Downloads nutzen.

Screenshot der Einstellungen des Call-to-Action-Moduls zum Verlinken eines Mediendownloads

Barrierefreie Dokumente tragen wesentlich zur Zugänglichkeit Ihrer Website bei und verbessern die Benutzererfahrung für alle Besucher.

15. Fügen Sie Untertitel und Transkripte für Videos hinzu

Videos sollten immer Untertitel und, wenn möglich, vollständige Transkripte enthalten, um für hörgeschädigte Nutzer zugänglich zu sein.

Divi bietet verschiedene Module, um Videoinhalte zu Ihren Webseiten hinzuzufügen, darunter das Video-Modul und das Video-Slider-Modul (denken Sie an die Hinweise zu Slidern oben). Sie können Videos von Ihrem eigenen Server einbinden oder Inhalte von Plattformen wie YouTube oder Vimeo einfügen. Bei Videos von Ihrem eigenen Server sollten Sie die Ladezeiten beachten, bei Videos von externen Streaming-Plattformen müssen Sie die Datenschutz-Aspekte der DSGVO bzw. GDPR beachten! Wir haben mit PCM-Video ein Video-Modul für Divi entwickelt, das erst dann Daten mit den Videoplattformen austauscht, wenn User Ihre Zustimmung erteilt haben.

Wenn die von Ihnen gezeigten Videos bedeutungsvolle Audioinhalte enthalten – also kritische Informationen wie in Anleitungs- oder Interview-Videos und nicht nur dekorativ sind –, benötigen sie Untertitel.

Die Rolle von Untertiteln für Barrierefreiheit

Untertitel enthalten nicht nur das, was die Personen im Video sagen, sondern beschreiben auch relevante nicht-sprachliche Elemente wie Geräusche und Soundeffekte. Es ist wichtig, dass die Untertitel genau und synchron sind. Dies gilt insbesondere für automatisch generierte Untertitel, wie sie beispielsweise von YouTube angeboten werden. Wenn Sie auf solche automatisch generierten Untertitel zurückgreifen, müssen Sie diese überprüfen und sicherstellen, dass sie den WCAG-Richtlinien vollständig entsprechen.

Die Bedeutung von Transkripten

Ein weiteres wichtiges Element für die Barrierefreiheit von Videos sind Transkripte. Diese sind besonders hilfreich für gehörlose, blinde und taubblinde Menschen. Transkripte ähneln Untertiteln, da sie den Inhalt des Videos beschreiben. Sie werden jedoch separat vom Video bereitgestellt, oft direkt unterhalb des Videos auf der Webseite. Mit Transkripten ermöglichen Sie es Nutzern, die Inhalte Ihrer Videos auf alternative Weise zu erfassen, was die Zugänglichkeit Ihrer Website erheblich verbessert.

Best Practices für Video-Barrierefreiheit

• Fügen Sie präzise und synchronisierte Untertitel hinzu.
• Überprüfen Sie automatisch generierte Untertitel auf Genauigkeit.
• Erstellen Sie detaillierte Transkripte und platzieren Sie diese in der Nähe des Videos.
• Nutzen Sie Divi-Module, um Videos barrierefrei in Ihre Website einzubinden.

16. Nutzen Sie ein Tool zur Verbesserung der Barrierefreiheit Ihrer Website

Es gibt spezielle Plugins, die die Barrierefreiheit von Divi-Websites verbessern. Diese können Tastaturnavigation, ARIA-Rollen und andere wichtige Funktionen erweitern.

Die Umsetzung aller zuvor genannten Barrierefreiheitsrichtlinien auf Ihrer Divi-Website erfordert zweifellos erheblichen Aufwand. Selbst bei größter Sorgfalt kann es vorkommen, dass Ihre Website nicht vollständig barrierefrei ist.

Um auf der sicheren Seite zu sein, empfiehlt es sich, ein Plugin zur Verbesserung der Barrierefreiheit zu integrieren. Solche Plugins können den Quellcode Ihrer Website analysieren, problematische Bereiche identifizieren und automatisch Anpassungen vornehmen, wie beispielsweise das Hinzufügen von beschreibenden Alt-Texten und ARIA-Attributen, wo dies erforderlich ist.

Darüber hinaus bieten viele dieser Plugins Ihren Besuchern eine Benutzeroberfläche, mit der sie Designelemente entsprechend ihren individuellen Bedürfnissen anpassen können. Dazu gehören unter anderem die Möglichkeit, Farbkontraste zu verändern, die Schriftgröße zu erhöhen oder Animationen zu stoppen.

Es gibt verschiedene Plugins, die diese Funktionen bereitstellen. Einige der bekanntesten sind:

• WP Accessibility
• Divi Accessibility Sidebar
• Accessibility by UserWay
• Eye-Able Assist

Jedes dieser Plugins bietet unterschiedliche Funktionen und Vorteile. Es ist daher ratsam, die jeweiligen Eigenschaften zu prüfen und das Plugin auszuwählen, das am besten zu den Anforderungen Ihrer Website passt.

Professionelle Beseitigung von Barrieren in Ihrer Divi Website

Wenn Sie sich nicht selbst um die Umsetzung der diversen Maßnahmen für Barrierefreiheit kümmern möchten bieten wir bei PERIMETRIK® ein komfortable und zuverlässige Lösung für Sie! Zunächst führen wir professionelle Barrierefreiheits-Audit zu wichtigen URLs Ihrer Website durch und erstellen umfassende Barrierefreiheits-Reports. So ermitteln wir den StatusQuo Ihrer Website in Bezug auf Barrierefreiheit. Je nachdem welches Level der Barrierefreiheit Sie anstreben (meisten Level AA, ggf. auch AAA) erstellen wir in Abstimmung mit Ihnen einen Maßnahmenplan für die Optimierung Ihrer Website für Barrierefreiheit.

Was bedeutet die WCAG eigentlich?

Die Web Content Accessibility Guidelines (WCAG) sind ein umfangreiches und komplexes Dokument, das jedoch auf vier grundlegenden Prinzipien basiert:

• Wahrnehmbar: Der Inhalt Ihrer Divi-Website sollte über Klang, Sicht und Berührung zugänglich sein.
• Bedienbar: Ihre Divi-Website muss von allen Nutzern bedient werden können, unabhängig von ihren Fähigkeiten. Dazu gehört die Navigation per Tastatur, assistiven Technologien für sehunterstützte Navigation oder alternativen Eingabemethoden.
• Verständlich: Der Inhalt Ihrer Divi-Website muss leicht zu verstehen sein. Vermeiden Sie technisches Fachjargon, komplexe Terminologie und komplizierte Anweisungen, die für Personen mit kognitiven Beeinträchtigungen schwer nachvollziehbar sind.
• Robust: Eine barrierefreie Divi-Website sollte den HTML- und CSS-Spezifikationen entsprechen und mit assistiven Technologien kompatibel sein.

Die Konformitätsstufen der WCAG

Die WCAG unterscheiden drei Level der Konformität mit Barrierefreiheits-Standards:

• Level A: Die niedrigste Konformitätsstufe ➞ sie beinhaltet die absoluten Mindeststandards.
• Level AA: Die Konformitätsstufe, die in den meisten Barrierefreiheitsvorschriften weltweit referenziert wird ➞ In der Regel sollte Ihre Divi-Website diesen Standard erfüllen.
• Level AAA: Die anspruchsvollste Konformitätsstufe, die zu erreichen ist ➞ dieses Level sollten alle erfüllen, die sich explizit an Menschen mit Einschränkungen wenden.

Wir haben für Sie eine ausführliche, detaillierte Erläuterung der der Anforderungen der WCAG (Web Content Accessibility Guidelines) erstellt.

Wie Sie die WCAG-Konformität erreichen

Um dies zu erreichen, muss Ihre Divi-Website eine Reihe von technischen und gestalterischen Anforderungen erfüllen, darunter:

• Navigation nur mit der Tastatur
• Kompatibilität mit assistiven Technologien wie Screenreadern
• Mobilfreundliches Design
• Ausreichende Farbkontraste
• Untertitel für bedeutungsvolle Videoinhalte
• Alt-Texte für bedeutungsvolle Bilder
• Barrierefreie Online-Dokumente

Weitere Informationen zu diesem Thema finden Sie in folgenden Artikeln und Leitfäden:

• The Ultimate Guide to WCAG: The Web Content Accessibility Guidelines
• Everything on WCAG Conformance

Was bietet Divi in Bezug auf Barrierefreiheit?

Das Divi-Theme und der Page Builder sind nicht gerade bekannt für ihre Barrierefreiheit, auch wenn sie auf der WordPress-Plattform basieren, die sich aktiv um Barrierefreiheit bemüht (einschließlich eines dedizierten Accessibility-Teams). Divi selbst zeigt jedoch in diesem Bereich einige Schwächen.

Die Hauptprobleme von Divi in Bezug auf Barrierefreiheit

• Fehlende Umrandungen für Seitenelemente, die bei der Tastaturnavigation helfen.
• Dropdown-Menüs sind für die Tastaturnavigation nicht zugänglich.
• Ein “Zum Inhalt springen”-Link ist standardmäßig nicht verfügbar.
• Gelegentlich unzureichende Kontraste für eine gute Lesbarkeit.
• Einige Divi-Module, wie Slider, weisen zusätzliche Barrierefreiheitsprobleme auf.

Tipps zur Erstellung eines barrierefreien Navigationsmenüs in Divi

Die gravierendsten Schwächen von Divi in Bezug auf Barrierefreiheit zeigen sich bei den Navigationsmenüs. Standardmäßig sind die Dropdown-Menüs von Divi nicht mit der Tastaturnavigation kompatibel. In Kombination mit dem bereits erwähnten Problem der fehlenden Umrandungen wird schnell klar, warum viel Aufwand erforderlich ist, um die Barrierefreiheit der Navigationsmenüs in Divi sicherzustellen.

Best Practices für barrierefreie Navigationsmenüs

Um die unzureichenden Standardfunktionen auszugleichen, müssen Sie proaktiv vorgehen. Befolgen Sie zunächst die allgemeinen Best Practices, die wir in diesem Leitfaden beschrieben haben:

• Verwenden Sie beschreibende Linktexte.
• Passen Sie das Design mithilfe der Einstellungen im Menümodul an, um sicherzustellen, dass Texte und Hintergrundfarben ausreichende Kontraste bieten.
• Verwenden Sie geeignete Schriftgrößen, -stile und -farben.
• Fügen Sie ausreichende Abstände und Polsterungen um jedes Menüelement hinzu, damit Benutzer mit motorischen Einschränkungen die gewünschten Links leicht anklicken können.

Eine barrierefreie Navigation ist essenziell, um sicherzustellen, dass alle Nutzer Ihre Website problemlos erkunden können. Investieren Sie daher die nötige Zeit oder nutzen Sie unterstützende Tools, um dies zu erreichen.

Do it Yourself, Magie oder professioneller Support

Divi ist ein tolles Theme, aber in Bezug auf Barrierefreiheit optimierungswürdig. Sie habe folgende Optionen:

1. Lernen Sie die Webentwicklung von der Pike auf und lösen Sie die Herausforderungen Schritt für Schritt
2. Nutzen Sie PlugIns wie accessWidget die versprechen, alle Probleme automatisch zu beheben: von Tastaturnavigation über ARIA-Rollen und barrierefreie Menüs 😉
3. Oder Sie beauftragen eine erfahrene Agentur wie PERIMETRIK® – abhängig von Ihren Wünschen und der angestrebten Barrierefreiheits-Konformität werden wir die erforderlichen ARIA-Rollen hinzufügen, die Tastaturnavigation für Dropdown-Menüs einrichten , Ihre Bilder und Videos mit Alt-Texten und Transkripten versehen, Ihre Downloads barrierefrei machen etc.