Wichtige Tipps für Ihre barrierefreie WordPress-Website

Veröffentlicht am 09.10.2024 von DomainFactory

Barrierefreiheit bedeutet Nutzerfreundlichkeit für alle

Barrierefreiheit bedeutet, dass Menschen mit unterschiedlichen Seh-, Bewegungs- und Hörvermögen und kognitiven Fähigkeiten genauso auf die digitalen Inhalte zugreifen und mit diesen interagieren können wie Personen ohne Beeinträchtigungen. Auch mobile Geräte mit kleinen Bildschirmen und langsame Internetverbindungen sind zu berücksichtigen. Laut einer Studie von Google und der Aktion Mensch sind bisher 75 Prozent aller großen deutschen Onlineshops nicht barrierefrei!

Wichtig: Ab Juni 2025 sind privatwirtschaftliche Anbieter digitaler Dienstleistungen und Produkte dazu verpflichtet, ihre Angebote barrierefrei zu gestalten. Mit einer barrierefreien Website erreichen Sie nicht nur die 7,8 Millionen Menschen mit anerkannter Schwerbehinderung (Stand: Ende 2021), sondern auch Ältere, für die Barrierefreiheit ebenso wichtig ist.

Tipps zur barrierefreien WordPress-Website

Eine sinnvolle und logische Navigation und Struktur sind von genauso großer Bedeutung wie Bildbeschreibungen und Verlinkung der Inhalte. Diese erleichtern Screenreadern und Suchmaschinen-Crawlern das Verständnis und die Navigation. Mit den WAVE Web Accessibility Evaluation Tools können Sie die aktuelle Kompatibilität Ihrer Website mit Screenreadern testen.

Entsprechend den Web Content Accessibility Guidelines (WCAG) sind folgende Kriterien für digitale Barrierefreiheit besonders wichtig. Setzen Sie die Tipps für eine barrierefreie Website um:

• Navigation: Nutzer sollten mit zwei bis drei Klicks zur Zielseite navigieren können. Webseiten müssen auch per Tastatur statt Maus bedienbar sein. Interaktive Elemente wie Links und Buttons sollten über die Tabulator-Taste erreichbar und die Auswahl visuell hervorgehoben sein. Assistenzsysteme müssen interaktive Elemente wie Drop-down-Menüs und Buttons auslesen können.
• Text: Die Textgröße sollte veränderbar sein, ebenso die Zeichen- und Zeilenabstände. Als Standard ist mindestens Schriftgröße 16 empfohlen. Achten Sie auf einen ausreichend großen Kontrast zum Hintergrund. Zum Beispiel ist schwarze Schrift auf weißem Hintergrund gut und weiße Schrift auf gelbem Hintergrund schlecht lesbar. Barrierefreie Schriftarten sind zum Beispiel Times New Roman, Verdana und Arial.
• Bilder und Medien: Multimediale Inhalte sollten Untertitel haben und pausiert, beendet und ausgeblendet werden können. Menschen mit Seheinschränkungen können Bilder kaum oder gar nicht erkennen. Aus diesem Grund gibt es die Alt-Beschreibungen, die Bildern beschreibende Texte hinzufügen. Screenreader lesen diese vor. Browser zeigen die Bildbeschreibungen an, wenn ein Bild nicht geladen werden kann.
• Sprache: Vermitteln Sie Informationen in kurzen und leicht verständlichen Sätzen, damit alle sie verstehen. Bei Formularen ist auf verständlich beschriftete Felder zu achten.
• Struktur: Achten Sie auf aussagekräftige und verständliche Überschriften und Textinhalte. Webseiten sollten strukturiert aufgebaut sein und eine Hauptüberschrift (H1) sowie sinnvolle Zwischenüberschriften (H2-H6) haben, also Überschriften zweiter, dritter und vierter Ordnung etc.
• Links: Linktexte sollten über den Inhalt der Zielseite informieren. Wenn ein Screenreader zum Beispiel „Klicken Sie hier“ für einen Link vorliest, kann der Nutzer nicht wissen, welche Informationen ihn nach dem Klick erwarten.
• Responsives Design: Inzwischen ist „Mobile First“ der Standard. Das bedeutet, dass das Layout einer Webseite für mobile Endgeräte mit kleinen Bildschirmen optimiert ist und es sich automatisch an die Bildschirmgröße anpasst.

Hinweis: Barrierefreiheit beginnt bereits beim Hosting. Die WordPress-Hosting-Pakete von DomainFactory stellen für Besucher schnelle Ladezeiten und Sicherheit und für Betreiber eine einfache Verwaltung sicher.

10% Rabatt auf alle DF Produkte

Jetzt 2-Jahre Laufzeit wählen!

Barrierefreie WordPress-Themes

Mit einem barrierefreien WordPress-Theme schaffen Sie die Basis für einen Internetauftritt, der für alle leicht zu bedienen ist. Auf WordPress.org können Sie kostenlose Themes nach Barrierefreiheit filtern. Abgesehen von den empfehlenswerten Standard-Themes Twenty Twenty-Two, Twenty Twenty-Three und Twenty Twenty-Four sind zum Beispiel Period, Hester und Hemila beliebt.

WordPress-Plug-ins für mehr Barrierefreiheit

Es gibt zwar keine Erweiterung, die aus einer nicht optimierten Website eine zu 100 Prozent barrierefreie WordPress-Website macht, dennoch können die folgenden Plug-ins weiterhelfen.

Equalize Digital Accessibility Checker

Video einbinden: https://youtu.be/ncAfP06dPpU

Der Equalize Digital Accessibility Checker (>3.000 aktive Installationen und 5-Sterne-Bewertung) prüft Ihre Website auf Probleme in Bezug auf Barrierefreiheit. Das Tool führt nach jeder Speicherung einer Seite oder eines Beitrags einen Check von mehr als 40 Kriterien der Content Accessibility Guidelines (WCAG) 2.1 durch.

One Click Accessibility

Abbildung: Die Erweiterung fügt einer Website eine praktische Leiste hinzu, um den Text und Kontrast zu verändern.

Das Plug-in One Click Accessibility (>100.000 aktive Installationen und 4,5-Sterne-Bewertung) fügt einer Website eine Leiste hinzu, über die Seitenbesucher unter anderem die Schriftgröße und den Kontrast zwischen Vorder- und Hintergrund verändern können.

WP Accessibility

Abbildung: Die Erweiterung beseitigt einige typische Probleme und verbessert so die Barrierefreiheit.

Das Tool WP Accessibility (>50.000 aktive Installationen und 4,7-Sterne-Bewertung) hilft bei einer Reihe von typischen Problemen bzgl. der Barrierefreiheit von WordPress-Themes. Es fügt zum Beispiel Seitentitel zu „Weiterlesen“-Links hinzu, findet Bilder ohne Alt-Attribute und ermöglicht den schnellen Farbkontrast-Check von zwei Farbwerten.

Barrierefreie WordPress-Website - Zusammenfassung

Online informieren, einkaufen, behördliche Termine vereinbaren und online arbeiten – mit einer barrierefreien Website ermöglichen Sie Menschen mit Beeinträchtigung und auch vielen Senioren den Zugang zu den Informationen und Angeboten auf Ihrem Internetauftritt. Setzen Sie die Tipps um, damit Ihr Internetauftritt möglichst barrierefrei wird.

Titelmotiv: Photo by Daniel Ali on Unsplash