Barrierefreie Websites mit WordPress und Divi

Wer ist verpflichtet, seine Website barrierefrei aufzubauen?

Zusammenfassend sind hauptsächlich öffentliche Stellen in der EU verpflichtet, ihre Websites barrierefrei zu gestalten. Private Unternehmen sind in vielen Fällen ebenfalls dazu angehalten, dies zu tun, insbesondere wenn sie im öffentlichen Sektor tätig sind oder eine große Reichweite haben.

Das Barrierefreiheitsstärkungsgesetz (BFSG) gilt nicht für private und rein geschäftliche (B2B) Angebote. Kleinunternehmen, die weniger als zehn Mitarbeiter haben oder einen Jahresumsatz bzw. eine Bilanzsumme von höchstens zwei Millionen Euro erreichen, sind ebenfalls von den Anforderungen des BFSG ausgenommen. Zudem können Unternehmen von den Verpflichtungen des BFSG befreit werden, wenn Änderungen an einer Dienstleistung ein wirtschaftliches Risiko darstellen.

In der Europäischen Union sind mehrere Richtlinien und Gesetze in Kraft,...

… die die Barrierefreiheit von Websites regeln, insbesondere für öffentliche Einrichtungen und bestimmte private Unternehmen. Hier sind die wichtigsten Punkte:

EU-Richtlinie über die Barrierefreiheit von Websites und mobilen Anwendungen öffentlicher Stellen (2016/2102): Diese Richtlinie verpflichtet alle öffentlichen Einrichtungen der EU, ihre Websites und mobilen Anwendungen barrierefrei zu gestalten. Dazu gehören Ministerien, Behörden, Schulen, Universitäten und andere öffentliche Institutionen.

Behindertenrechtskonvention der Vereinten Nationen (UN-BRK): Die EU und ihre Mitgliedstaaten sind verpflichtet, die UN-Behindertenrechtskonvention zu ratifizieren, die auch das Recht auf Zugang zu Informationen und Dienstleistungen umfasst. Dies erweitert die Verantwortung zur Barrierefreiheit auf weitere Bereiche.

Wirtschaftliche Akteure: Auch private Unternehmen, die Dienstleistungen für die Öffentlichkeit anbieten oder unter bestimmten Bedingungen an Ausschreibungen teilnehmen wollen, können verpflichtet sein, ihre Webseiten barrierefrei zu gestalten, insbesondere wenn sie öffentlichen Aufträgen nachgehen oder Dienstleistungen im öffentlichen Interesse anbieten.

Nationale Gesetze: Darüber hinaus haben viele EU-Mitgliedstaaten eigene Gesetze und Vorgaben zur Barrierefreiheit, die über die EU-Richtlinien hinausgehen können. Diese variieren von Land zu Land und können spezielle Anforderungen an die Barrierefreiheit von Websites und digitalen Inhalten stellen.

Um eine barrierefreie WordPress-Website mit dem Divi-Theme aufzubauen, folgen Sie diesen Schritten:

1. Wählen Sie eine geeignete Farbpalette:

Achten Sie darauf, dass der Kontrast zwischen Text und Hintergrund ausreichend ist, um die Lesbarkeit zu gewährleisten. Verwenden Sie Farben, die für Farbenblinde zugänglich sind. Diese am besten direkt im Backend von Divi speichern.

2. Verwenden Sie klare Schriftarten:

Wählen Sie Schriftarten, die gut lesbar sind. Achten Sie darauf, dass die Schriftgröße ausreichend groß ist und dass der Text in angemessenem Zeilenabstand präsentiert wird. Am besten serifenlose Schriften. Bewährt hat sich hier die Schrift Arial, die auch als Websicher gilt und nicht erst von Google geladen werden muss.

3. Semantisches HTML:

Verwenden Sie die korrekten HTML-Tags (z.B. Überschriften wie H1, H2) für Ihre Inhalte. Dies hilft Screenreadern, die Struktur der Seite zu verstehen.
ACHTUNG: Hier wirklich ganz oben die H1 definieren und nicht via CSS diese nur für die Suchmaschine irgendwo darstellen.

4. Alt-Text für Bilder:

Stellen Sie sicher, dass alle Bilder mit beschreibenden Alt-Texten versehen sind. Dies ist wichtig für Benutzer, die Screenreader verwenden. Das sollte eigentlich Grundvoraussetzung sein, da dies auch für den SEO-Bereich wichtig ist.

5. Tastaturnavigation:

Testen Sie, ob die Navigation durch die Website auch mit der Tastatur möglich ist. Alle interaktiven Elemente sollten mit der Tabulatortaste erreichbar sein.
ACHTUNG: Stand 2025 Februar ist das nur mit Divi noch nicht möglich.
Hier helfen zusätzliche Plugins wie der Divi Assistant oder andere sehr kostspielige Programme.

6. Vermeiden von automatischen Medien:

Stellen Sie sicher, dass Videos und Audioinhalte nicht automatisch abgespielt werden. Bieten Sie auch Transkripte für Audioinhalte und Untertitel für Videos an.

7. Responsive Design:

Da viele Nutzer von mobilen Geräten aus auf Webseiten zugreifen, stellen Sie sicher, dass Ihre Divi-Website auf verschiedenen Bildschirmgrößen gut aussieht und funktional ist. Ergo: Bitte die Abstände und Größen am besten auf Standard stehen lassen!

8. Verwenden Sie Plugin-Lösungen:

Es gibt verschiedene Plugins, die helfen können, die Barrierefreiheit zu verbessern. Einige Plugins bieten zusätzlich Tools zur Überprüfung der Barrierefreiheit Ihrer Website. Ein sehr gutes Tool ist zB der Divi Assistant.

9. Testen der Barrierefreiheit:

Verwenden Sie Tools wie WAVE, axe oder Lighthouse, um die Barrierefreiheit Ihrer Website zu bewerten. Lassen Sie auch echte Benutzer mit Behinderungen Ihre Website testen und um Feedback bitten.
Ich nutze hier oft folgende Website: https://wave.webaim.org/

10. Regelmäßige Updates:

Sollte selbstverständlich sein!

Leider gibt es noch mehr zu beachten…

Nach einem Kontakt mit dem Regierungspräsidium Gießen als Überwachungsstelle des Landes Hessen Bereich
Landeskompetenzzentrum für Barrierefreie IT
Durchsetzungs- und Überwachungsstelle

musste ich erst einmal schlucken… daher hier noch ein paar weitere Punkte, die beachtet werden sollten:

1. Erklärung zur Barrierefreiheit (EzB)

Text durch ein Tool wie das von eRecht24 zusammenstellen und als Link im Bereich Footer zum Impressum / Datenschutz mit ablegen.

2. Grafische Elemente überprüfen

Elemente, die rein zum Aufhübschen der Website dargestellt werden sollte im Bereich Alt-Tag und Titel überprüft werden. Insbesondere wenn es ich um Piktogramme handelt.

3. Leichte Sprache & Gebärdensprache

Jetzt wird es teuer, habe ich gedacht. Hier brauche ich einen Germanisten, der alles übersetzt und am besten WPML als Plugin um die leichte Sprache auswählen zu können…

Bevor man hier das Geld ausgibt, am besten bei der zuständigen Stelle nachfragen oder einen Fachmann befragen!

Bei meinen Kunden, die ich bisher bei der Umstellung begleiten durfte, war dies „Gott sein Dank“ nie notwendig.

4. SVG

Text Auszug durch KI erstellt:

Aufgrund der gestiegenen Nutzung von HTML-SVG-Elementen möchten wir auf einige Probleme hinweisen. Wenn ein HTML-SVG-Element gemäß den WCAG-Richtlinien implementiert wurde, wird dies nicht als Fehler, sondern als Usability-Problem betrachtet. Je nach Schnittstelle und verwendeter assistiver Technologie können unerwartete Schwierigkeiten auftreten, die das Auslesen der Textalternative erschweren. Wir empfehlen daher, dieses Element korrekt zu implementieren und seine programmatische Erkennbarkeit zu verbergen. Dies kann durch das Attribut „aria-hidden“ mit dem Wert „true“ erreicht werden. In diesem Fall sollte das HTML-SVG-Element in einen Container eingebettet werden, der die aria-Attribute aria-role und aria-label enthält. Für diesen Zweck eignet sich das HTML-div-Element gut. Das aria-role-Attribut des Containers sollte den Wert „img“ erhalten, während das aria-label-Attribut mit der Textalternative befüllt wird.

Fazit:

Persönlich finde ich das neue Gesetz in Zeiten von KI für einfache Websites fehl am Platz. Durch den Einsatz von KI hat sich hier vieles geändert und Inhalte von Websites können per Sprachanforderung zusammengefasst und in diversen Möglichkeiten ausgegeben werden.

Aber Gesetz ist nun mal Gesetz…

Mit dem Divi Assistant und ca. einem Tag Arbeit kann man kleine bis mittlere Divi Websites zu 80-90% barrierefrei umstellen. Ob dies ausreicht wird die Zukunft zeigen.