Wie Sie die Barrierefreiheit auf Ihrer WordPress-Website verbessern

Haben Sie sich jemals vorgestellt, eine Website zu besuchen und festzustellen, dass Sie den Text nicht lesen, die Menüs nicht verwenden oder überhaupt nichts verstehen konnten? Es ist schwer zu glauben, aber das ist für viele Menschen mit Behinderungen jeden einzelnen Tag Realität.

Wenn Leute Websites erstellen, wird die Barrierefreiheit oft übersehen. Aber das sollte sie wirklich nicht, denn sie kann eine Barriere zwischen Ihren Inhalten und vielen Ihrer Besucher schaffen. Nach unserer Erfahrung kann sich eine nicht barrierefreie Website sehr unwillkommen und sogar exklusiv anfühlen.

Sicherzustellen, dass Ihre Website barrierefrei ist, bedeutet nicht nur, die Regeln zu befolgen, sondern auch sicherzustellen, dass jeder eine großartige Erfahrung auf Ihrer Website hat. Es geht darum, inklusiv zu sein und allen Ihren Besuchern, unabhängig von ihren Bedürfnissen oder Fähigkeiten, ein außergewöhnliches Benutzererlebnis zu bieten.

Wenn Sie also bereit sind, Ihre Website für alle willkommen zu heißen, zeigen wir Ihnen Schritt für Schritt, wie Sie die Barrierefreiheit Ihrer WordPress-Website verbessern können.

Warum ist Barrierefreiheit für meine WordPress-Website wichtig?

Im Bereich Webdesign bezieht sich Barrierefreiheit auf Techniken, die verwendet werden, um eine Website für Menschen mit Behinderungen einfacher nutzbar zu machen. Einige Besucher verwenden assistierende Technologien, um im Web zu navigieren, wie z. B. Bildschirmlesegeräte für Menschen mit Sehbehinderungen und Tastaturnavigation für Personen, die keine Maus verwenden können.

Es gibt einige gängige Best Practices, die von Experten empfohlen werden, um Websites barrierefreier zu gestalten. Sie helfen dabei, Websites inklusiver und benutzerfreundlicher für alle zu machen, unabhängig von ihren Fähigkeiten.

Durch die Priorisierung der Barrierefreiheit können mehr Menschen Ihre WordPress-Website navigieren und Ihre Inhalte erkunden. Wenn Sie einen Online-Shop betreiben, erhöhen Sie auch Ihre Chancen, Benutzer in Kunden umzuwandeln.

Barrierefreiheit ist auch wichtig für die Suchmaschinenoptimierung (SEO). Google schätzt benutzerfreundliche Websites. Neben der besseren Anpassung Ihrer Website an mobile Geräte können Sie auch die Inklusivität in Ihrem Webdesign priorisieren, um Rankings zu verbessern.

Darüber hinaus könnten Sie als Inhaber einer Geschäftswebsite rechtliche Konsequenzen erleiden, wenn das Frontend Ihrer Website unzugänglich ist.

Der Americans with Disabilities Act (ADA) besagt, dass Verbraucher eine Beschwerde einreichen können, wenn eine Website nicht den Richtlinien zur Barrierefreiheit entspricht. Darüber hinaus könnte Ihr Ruf ruiniert werden, was zu finanziellen Verlusten führen könnte.

Wie macht WordPress meine Website zugänglicher?

WordPress verfügt über mehrere integrierte Funktionen, die Benutzern helfen, ihre WordPress-Websites zugänglich zu machen. Zum Beispiel können Sie standardmäßig alternative Texte (Alt-Texte) und Titelattribute zu Bildern hinzufügen, damit Screenreader diese für Benutzer mit Sehbehinderungen vorlesen können.

WordPress hat es auch zur Pflicht gemacht, dass neuer und aktualisierter Code in WordPress seinen Barrierefreiheits-Codierungsstandards befolgt. Dies soll sicherstellen, dass WordPress-Entwickler bei der Erstellung von Themes und Plugins die Best Practices für Barrierefreiheit einhalten.

Abgesehen davon enthält WordPress Funktionen, die es Benutzern mit Behinderungen erleichtern, ihre eigenen Websites zu erstellen, wie z. B. den Barrierefreiheitsmodus zum Hinzufügen von Widgets.

Für weitere Informationen empfehlen wir, den Accessibility-Tag auf der Seite Make WordPress Core für weitere Informationen zu verfolgen.

Angesichts all dessen ist WordPress nicht von Haus aus vollständig barrierefrei. Als Website-Besitzer ist es wichtig, zusätzliche Schritte zu unternehmen, um sicherzustellen, dass Ihre Website die Barrierefreiheitsstandards erfüllt.

Wir haben diesen Leitfaden in einige einfache Tipps unterteilt, um die Barrierefreiheit Ihrer WordPress-Website zu verbessern. Sie können diese Schnelllinks verwenden, um zu einem bestimmten Abschnitt zu navigieren:

1. Machen Sie sich mit den Web Content Accessibility Guidelines (WCAG) vertraut
2. Verwenden Sie ein Barrierefreiheits-fähiges WordPress-Theme
3. Installieren Sie ein WordPress-Barrierefreiheits-Plugin
4. Überprüfen Sie den Farbkontrast Ihrer Website
5. Alternative Texte und Titelattribute zu Bildern hinzufügen
6. Beschriftungen für alle Formularfelder hinzufügen
7. Verwenden Sie die richtigen Überschriften-Tags in Ihren Inhalten
8. Verwenden Sie beschreibenden Ankertext
9. Untertitel oder Transkripte zu Video- und Audiocontent hinzufügen
10. Führen Sie Usability- und Barrierefreiheitstests durch
11. Experten-Anleitungen zur WordPress-Barrierefreiheit

1. Machen Sie sich mit den Web Content Accessibility Guidelines (WCAG) vertraut

Zuerst empfehlen wir, die Web Content Accessibility Guidelines (WCAG) zu lesen. Dies sind die Standards, die vom W3C Web Accessibility Initiative (WAI) festgelegt wurden, damit Benutzer ihre Websites zugänglicher machen können.

Sie können sich zunächst die WCAG 2.1 und WCAG 2.2 Updates ansehen. Wenn beide Dokumente zu lang zum Lesen erscheinen, können Sie stattdessen diese Kurzübersicht als Lesezeichen speichern.

2. Verwenden Sie ein barrierefreies WordPress-Theme

Barrierefreiheits-Themes erfüllen die Mindeststandards für Barrierefreiheit, die das WordPress-Theme-Review-Team festgelegt hat.

Die Verwendung eines barrierefreien WordPress-Themes bedeutet nicht, dass Ihre Website automatisch alle Barrierefreiheitsanforderungen erfüllt, da Sie immer noch einige Anpassungen selbst vornehmen müssen. Es kann Ihnen jedoch einen guten Startpunkt geben, um Ihre Website barrierefreier zu gestalten.

Zumindest wird ein barrierefreies Theme Folgendes haben:

• Menüs, die nur mit der Tastatur navigiert werden können.
• Guter Farbkontrast, der den Inhalt für Benutzer mit Sehbehinderungen lesbar macht.
• Semantisch korrektes HTML, das assistiven Technologien hilft, den Inhalt und die Struktur einer Webseite zu verstehen.

Wenn Sie die Dinge noch weiter vorantreiben möchten, sollten Sie auch prüfen, ob das Theme ARIA-Attribute enthält. Diese Attribute sind wie zusätzliche Informationen, die das HTML Ihres Themes ergänzen, um eine Website für assistierende Technologien noch einfacher navigierbar zu machen.

Der einfachste Weg, nach einem barrierefreien Theme zu suchen, ist, in Ihrem WordPress-Dashboard zu Design » Themes zu gehen. Klicken Sie dann auf „Neues Theme hinzufügen“.

Wählen Sie von hier aus „Feature Filter“ und wählen Sie „Accessibility Ready“.

Fügen Sie weitere Filter hinzu, um das Thema zu finden, das Ihren genauen Anforderungen entspricht.

Scrollen Sie nun nach unten und klicken Sie auf „Filter anwenden“.

Sie sehen dann einige barrierefreie Themes auf dem Bildschirm.

Weitere Theme-Empfehlungen finden Sie in unseren Expertenauswahl der besten WordPress-Themes.

3. Installieren Sie ein WordPress-Barrierefreiheits-Plugin

Ein WordPress-Plugin für Barrierefreiheit fügt Funktionen hinzu, die Besuchern mit Behinderungen helfen, Ihre Website zu navigieren.

Ein WordPress-Plugin für Barrierefreiheit, das wir empfehlen, ist WP Accessibility. Einige der Dinge, die dieses Plugin tun kann, sind:

• Hinzufügen einer Barrierefreiheits-Toolbar
• Erkennen, ob Ihr Theme barrierefrei ist
• Verfolgen, wie die Barrierefreiheitsfunktionen auf Ihrer Website genutzt werden, damit Sie diese bewerten können

Zuerst müssen Sie das Plugin installieren und aktivieren auf WordPress.

Nach der Aktivierung müssen Sie zu Einstellungen » WP Accessibility gehen, um das Plugin zu konfigurieren.

Werfen wir einen Blick auf jeden Abschnitt der Einstellungsseite.

Skip-Links hinzufügen

Im ersten Abschnitt der Plugin-Einstellungen können Sie Skip-Links auf Ihrer Website verwenden, und diese Einstellung ist standardmäßig aktiviert. Ein Skip-Link ermöglicht es Benutzern, direkt zum Inhaltsbereich eines Beitrags oder einer Seite zu springen.

Dies ist eine äußerst nützliche Funktion für Personen, die Screenreader verwenden. Ohne einen Skip-Link müssen sie alles anhören, was auf Ihrer Website angezeigt wird, einschließlich Ihrer Navigationsmenüs, bevor sie zum Inhaltsbereich gelangen.

Wenn Ihr Theme bereits Skip-Links verwendet, erhalten Sie eine entsprechende Benachrichtigung.

Barrierefreiheits-Symbolleiste

Das WP Accessibility Plugin wird mit einer Barrierefreiheits-Toolbar geliefert.

Wenn Sie es aktivieren, fügt das Plugin eine Symbolleiste auf Ihrer Website hinzu, auf der Benutzer Schriftarten ändern oder Ihre Website im Hochkontrast-Farbmodus anzeigen können.

Dies ermöglicht es Ihren Benutzern, die Optionen auszuwählen, die sie benötigen, um die Seite leichter lesbar zu machen.

Um die Symbolleiste zu aktivieren, aktivieren Sie einfach die Kontrollkästchen 'Schriftgröße' und 'Kontrast'.

Es gibt auch Einstellungen, mit denen Sie die Schriftgröße und Platzierung der Symbolleiste steuern können.

Wenn Sie Änderungen an diesen Einstellungen vornehmen, stellen Sie sicher, dass Sie auf die Schaltfläche „Toolbar-Einstellungen aktualisieren“ klicken, um Ihre Einstellungen zu speichern.

So sieht die Symbolleiste auf unserer Testwebsite aus.

Barrierefreiheitskorrekturen

WP Accessibility bietet auch verschiedene Barrierefreiheitskorrekturen, die potenzielle Probleme auf Ihrer Website lösen könnten. Sie können jede Option durchgehen und sehen, ob Sie sie benötigen.

Einige empfohlene Einstellungen sind standardmäßig aktiviert. Diese Optionen verhindern, dass Links in neuen Fenstern geöffnet werden, zeigen eine Fehlermeldung an, wenn Sie eine leere Suche absenden, und entfernen das tabindex HTML-Attribut, wo es zur Vereinfachung der Tastaturnavigation nicht benötigt wird.

Wenn Sie ein barrierefreies Theme verwenden, das einige dieser Funktionen bereits aktiviert hat, sehen Sie oben im Abschnitt eine Meldung, die dies bestätigt.

Vergessen Sie nicht, auf die Schaltfläche „Sonstige Einstellungen aktualisieren“ zu klicken, um Ihre Änderungen zu speichern.

Barrierefreiheitsfunktionen

Das Plugin bietet auch einige Optionen, um Ihre Inhalte zugänglicher zu machen.

Die erste Gruppe von Einstellungen erleichtert die Handhabung von Bildern für Benutzer von Screenreadern.

Es gibt auch Optionen, um Zusammenfassungen am Anfang Ihrer Beiträge und Seiten anzuzeigen. Dies ermöglicht es Personen mit Bildschirmlesegeräten, eine Zusammenfassung des Inhalts zu hören, bevor sie entscheiden, den gesamten Artikel anzuhören.

Wenn Sie eine dieser Optionen ändern, denken Sie bitte daran, auf die Schaltfläche „Accessibility Features aktualisieren“ zu klicken.

Testen & Admin-Erfahrung

Als Nächstes finden Sie einige Einstellungen, mit denen Sie die Barrierefreiheit Ihres WordPress-Adminbereichs verbessern und beim Testen helfen können.

Dieser Abschnitt ist technischer, stellen Sie also sicher, dass Sie die Dokumentation des Plugins konsultieren, bevor Sie die Kontrollkästchen aktivieren.

Stellen Sie sicher, dass Sie auf die Schaltfläche „Barrierefreiheitstools aktualisieren“ klicken, um Ihre Änderungen zu speichern.

Titelattribute entfernen

Dieser Abschnitt ermöglicht es Ihnen, das Titelattribut von Tag-Clouds zu entfernen.

Das title-Attribut wird von einigen Barrierefreiheitsexperten als nutzlos angesehen. Die meisten Screenreader ignorieren normalerweise das title-Attribut und lesen stattdessen den Linktext.

Diese Einstellung ist standardmäßig aktiviert. Wenn Sie sie jedoch ändern, stellen Sie sicher, dass Sie auf die Schaltfläche „Update Title Attributes Settings“ klicken.

4. Überprüfen Sie den Farbkontrast Ihrer Website

Der Farbkontrast bezeichnet den Unterschied zwischen der Textfarbe und der Hintergrundfarbe. Er ist ein sehr wichtiger Bestandteil der Barrierefreiheit von Websites, da er die Lesbarkeit Ihrer Website-Inhalte für Menschen mit Sehschwäche und Farbenblindheit beeinträchtigen kann.

Um die Standards für Web-Barrierefreiheit zu erfüllen, sollte normaler Text einen hohen Kontrast von mindestens 4,5 zu 1 aufweisen. Das bedeutet, dass der Text 4,5-mal heller sein muss als der Hintergrund.

Für größere Textgrößen ist die Anforderung etwas geringer, nämlich 3 zu 1. Das bedeutet, dass ein etwas geringerer Kontrast akzeptabel ist. Die gleiche Regel gilt für Grafiken und Benutzeroberflächenelemente, wie z. B. Formular-Eingabegrenzen.

Das WP Accessibility Plugin verfügt über einen integrierten Farbkontrastprüfer, den Sie verwenden können.

Scrollen Sie in den Plugin-Einstellungen einfach nach unten zum Abschnitt 'Color Contrast Tester' und wählen Sie eine Vordergrundfarbe (die Farbe, die Sie für Ihren Text verwenden) und deren Hintergrundfarbe.

Klicken Sie dann auf „Farbenkontrast prüfen“.

Das Plugin teilt Ihnen dann mit, ob die Farben den Kontrasttest bestehen oder nicht.

So sieht das Ergebnis aus:

Alternativ können Sie den kostenlosen WebAIM Contrast Checker verwenden. Wie beim vorherigen Tool müssen Sie nur eine Vordergrundfarbe und eine Hintergrundfarbe auswählen.

Dieses Tool testet nicht nur Ihren Farbkontrast, sondern zeigt Ihnen auch, wie die Farben bei normalem und großem Text sowie bei grafischen Objekten und Benutzeroberflächenkomponenten aussehen können.

Für weitere Details können Sie sich unseren Leitfaden ansehen: So wählen Sie das perfekte Farbschema für Ihre WordPress-Website aus.

5. Alternativtexte zu Bildern hinzufügen

Neben der Nützlichkeit für Suchmaschinen ist Alt-Text auch für Screenreader hilfreich, um Bilder für Menschen mit Sehbehinderungen zu beschreiben.

Zuvor haben wir erwähnt, dass WordPress eine integrierte Funktion zum Hinzufügen von Alternativtexten hat. Der Vorgang ist ziemlich einfach und Sie können alles darüber in den folgenden Anleitungen lesen:

• Leitfaden für Anfänger zur Bild-SEO – Bilder für Suchmaschinen optimieren
• Bild-Alt-Text vs. Bildtitel in WordPress – Was ist der Unterschied?

6. Beschriftungen zu allen Formularfeldern hinzufügen

Wenn Sie Formulare auf Ihrer Website haben, sollten Sie sicherstellen, dass Sie die entsprechenden Bezeichnungen für jedes Formularelement verwenden. Dazu gehören Formularfelder, Schaltflächen, Menüs und so weiter.

Die WCAG empfiehlt, allen Formularelementen Beschriftungen hinzuzufügen, damit assistive Werkzeuge sie leichter identifizieren und Informationen über jedes einzelne an die Benutzer weitergeben können.

Darüber hinaus ist das Hinzufügen klarer und beschreibender Labels eine gute Webdesign-Praxis. Indem Sie den Benutzern helfen zu verstehen, wofür jedes Formularfeld bestimmt ist, treten weniger Benutzerfehler auf und mehr Personen können ihre Formulare absenden.

Wenn Sie sich nicht sicher sind, wie Sie großartige Formulare erstellen, empfehlen wir Ihnen, sich WPForms anzusehen. Es ist der beste WordPress-Formularersteller, der es super einfach macht, Formulare an Ihre genauen Bedürfnisse anzupassen, einschließlich der Verbesserung der Barrierefreiheit.

Sie können mehr über WPForms in unserem WPForms-Testbericht lesen. Sehen Sie sich auch diese Anleitungen an, wie Sie Formulare in WordPress erstellen:

• So erstellen Sie ein Kontaktformular in WordPress (Schritt für Schritt)
• So erstellen Sie ein Buchungsformular in WordPress
• So erstellen Sie ein benutzerdefiniertes Registrierungsformular für Benutzer in WordPress

7. Verwenden Sie richtige Überschriften-Tags in Ihrem Inhalt

Überschriften-Tags sind HTML-Tags, die die Titel oder Untertitel einer Webseite markieren können. Auf diese Weise ist Ihr Inhalt viel besser organisiert und leichter zu verfolgen.

Diese Tags helfen Tools wie Screenreadern auch dabei, eine navigierbare Gliederung für Benutzer mit Sehbehinderungen zu erstellen. So können sie zwischen Abschnitten springen und die Gesamtstruktur Ihrer Inhalte verstehen.

Wenn Sie sich nicht sicher sind, wie Sie Überschriften-Tags nutzen können, lesen Sie unseren Leitfaden zur richtigen Verwendung von Überschriften-Tags in WordPress.

8. Verwenden Sie beschreibenden Ankertext

Anker- oder Linktext sind im Grunde die klickbaren Wörter oder Phrasen in einem Link. Sie können normalerweise erkennen, welcher Text verlinkt ist, da er eine andere Farbe hat.

Oft verwenden Blogger den Linktext 'hier klicken' oder 'mehr lesen', um Besucher auf eine Seite zu leiten.

Dies ist keine gute Praxis für die Barrierefreiheit, da sie keine Informationen darüber liefert, wohin der Link führt. Dies erschwert es Menschen, die assistierende Technologien nutzen, den Zweck des Links zu verstehen.

Deshalb ist es am besten, stattdessen beschreibenden Ankertext zu verwenden. Das bedeutet, Wörter zu verwenden, die beschreiben, worum es in dem Inhalt geht, wenn Sie auf den Link klicken.

Nehmen wir zum Beispiel an, Sie möchten einen Link zu einem Artikel über das beste WordPress-Hosting in diesem Satz hinzufügen: „Folgen Sie diesem Leitfaden, um mehr über die besten WordPress-Hosting-Dienste auf dem Markt zu erfahren.“

Anstatt den Link zu 'Folgen Sie dieser Anleitung' oder irgendwo anders in diesem Satz einzufügen, sollten Sie ihn in 'besten WordPress-Hosting-Dienste' einfügen. Auf diese Weise erhält der Benutzer einen Überblick darüber, was er im verlinkten Inhalt finden wird.

Weitere Informationen zu Links und Ankertext finden Sie in unserem Anfängerleitfaden zum Verlinken in WordPress.

9. Fügen Sie Videos und Audioinhalte mit Untertiteln oder Transkripten hinzu

Einer der größten Schwierigkeiten für Benutzer mit Hörbehinderungen ist die Unfähigkeit, gesprochene Inhalte in Videos und Audio zu verstehen. Deshalb fügen viele Video-Content-Ersteller und Podcaster Untertitel oder Transkripte hinzu.

Bei WPBeginner raten wir Ihnen dringend davon ab, Videos auf Ihre eigene Website hochzuladen, da diese Ihre Website verlangsamen können. Stattdessen ist es am besten, Dienste wie YouTube oder Vimeo zu nutzen, die beide integrierte Tools zum Hinzufügen von Untertiteln haben.

Für Audioinhalte sollten Sie in Erwägung ziehen, einen Transkriptionsdienst zu nutzen, um Sprache einfach in Text umzuwandeln. Auf diese Weise müssen Sie keine schriftliche Version Ihrer Audioinhalte manuell erstellen.

Schauen Sie sich unsere Liste der besten Transkriptionsdienste für weitere Informationen an.

10. Usability- und Barrierefreiheitstests durchführen

Wenn Sie alle Tipps aus diesem Leitfaden umgesetzt haben, ist der letzte Schritt, Usability- und Barrierefreiheitstests für Ihre WordPress-Website durchzuführen.

Diese Tests können Ihnen helfen, verbleibende Probleme zu identifizieren und Ihre Website benutzerfreundlich und für alle zugänglich zu machen.

WebAIM verfügt über ein Web Accessibility Evaluation Tool (WAVE), das Sie kostenlos nutzen können.

Geben Sie einfach den Domainnamen Ihrer Website ein, und das Tool identifiziert alle Probleme im Zusammenhang mit der Barrierefreiheit für Sie.

Sie können auch einen Barrierefreiheits-Scanner verwenden. Wir empfehlen, sich den Accessibility Checker von Equalize Digital anzusehen. Er wird auch mit einer kostenlosen Plugin-Version geliefert, um unbegrenzt viele Beiträge und Seiten auf Ihrer Website zu scannen.

Nach der Installation des Plugins können Sie einfach zum Block-Editor Ihrer Seite oder Ihres Beitrags gehen. Wenn Sie nach unten zum Abschnitt Meta-Box scrollen, finden Sie einen Barrierefreiheits-Checker, der Ihre Barrierefreiheitsprobleme identifiziert.

Eine weitere Option ist die Durchführung eines UX-Audits, was im Grunde bedeutet, Ihre Website zu überprüfen, um festzustellen, ob sie eine gute Benutzererfahrung bietet. Besuchen Sie einfach unseren Leitfaden zum UX-Audit für weitere Informationen.

Zu guter Letzt ermutigen wir Sie, Ihr Benutzerfeedback einzuholen. Während Tests Ihnen Ergebnisse liefern können, liefert das Feedback von tatsächlichen Besuchern, die die Barrierefreiheitsfunktionen Ihrer Website nutzen, weitaus genauere Einblicke.

UserFeedback ist das beste Plugin für diese Aufgabe. Es ermöglicht Ihnen, Umfragen zu erstellen, um die Meinungen und Gedanken Ihrer Benutzer zu sammeln. Es gibt auch Vorlagen für Feedback zum Website-Design, sodass Sie die Umfrage nicht von Grund auf neu erstellen müssen.

Weitere Informationen finden Sie in unserem Leitfaden zur Einholung von Feedback zum Website-Design in WordPress.

Experten-Anleitungen zur WordPress-Barrierefreiheit

Jetzt, da Sie wissen, wie Sie die Barrierefreiheit auf Ihrer Website verbessern können, möchten Sie vielleicht einige andere Anleitungen zu WordPress-Barrierefreiheitsproblemen sehen:

• So fügen Sie WordPress-Widgets im Barrierefreiheitsmodus hinzu
• So wählen Sie ein perfektes Farbschema für Ihre WordPress-Website
• Wie man einen Schriftgrößen-Änderer in WordPress für Barrierefreiheit hinzufügt
• Wie man einfach Titelattribute zu Bildern in WordPress hinzufügt
• Text in WordPress hervorheben (Anfängerleitfaden)
• Bild-Alt-Text vs. Bildtitel in WordPress – Was ist der Unterschied?

Wenn Ihnen dieser Artikel gefallen hat, abonnieren Sie bitte unseren YouTube-Kanal für WordPress-Video-Tutorials. Sie finden uns auch auf Twitter und Facebook.