Wie Sie die Barrierefreiheit Ihrer WordPress-Website verbessern können

Stellen Sie sich vor, Sie besuchen eine Website und stellen fest, dass Sie den Text nicht lesen, nicht durch die Menüs navigieren oder den Inhalt nicht verstehen können. Leider ist dies für viele Menschen mit Behinderungen eine alltägliche Realität.

Bei der Erstellung einer Website wird die Barrierefreiheit oft vernachlässigt, so dass eine Barriere zwischen Ihren Inhalten und vielen Ihrer Besucher erstellt wird. Wir haben die Erfahrung gemacht, dass sich dies unangenehm und ausgrenzend anfühlen kann.

Die Gewährleistung der Barrierefreiheit Ihrer Website ist nicht nur eine Frage der Einhaltung gesetzlicher Vorschriften, sondern sorgt auch für ein außergewöhnliches Benutzererlebnis (UX) für alle Besucher, unabhängig von ihren Bedürfnissen oder Fähigkeiten.

In diesem Artikel zeigen wir Ihnen, wie Sie die Barrierefreiheit Ihrer WordPress-Website verbessern können.

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

Im Webdesign bezieht sich der Begriff Zugänglichkeit auf Techniken, die die Nutzung einer Website für Menschen mit Behinderungen erleichtern sollen. Einige Besucher verwenden unterstützende Technologien, um im Internet zu navigieren, wie z. B. Bildschirmleser für Menschen mit Sehbehinderungen und Tastaturnavigation für Menschen, die keine Maus benutzen können.

Es gibt einige bewährte Praktiken, die von Experten empfohlen werden, um Websites zugänglicher zu machen. Sie tragen dazu bei, dass Websites für alle Menschen, unabhängig von ihren Fähigkeiten, integrativer und benutzerfreundlicher werden.

Wenn Sie die Barrierefreiheit in den Vordergrund stellen, können mehr Menschen auf Ihrer WordPress-Website navigieren und Ihre Inhalte erkunden. Wenn Sie ein Online-Geschäft betreiben, erhöhen Sie auch Ihre Chancen, Nutzer in Kunden zu verwandeln.

Barrierefreiheit ist auch für die Suchmaschinenoptimierung (SEO) wichtig. Google schätzt Websites mit guter Benutzerfreundlichkeit. Sie können Ihre Website nicht nur für mobile Geräte zugänglicher machen, sondern auch bei der Gestaltung Ihrer Website auf Barrierefreiheit achten, um die Platzierung zu verbessern.

Wenn Sie eine geschäftliche Website besitzen und das Frontend Ihrer Website nicht zugänglich ist, kann dies rechtliche Konsequenzen haben.

Der Americans with Disabilities Act (ADA) besagt, dass Verbraucher eine Beschwerde einreichen können, wenn eine Website nicht den Zugänglichkeitsrichtlinien entspricht. Außerdem 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 den Nutzern helfen, ihre WordPress-Websites zugänglich zu machen. So können Sie beispielsweise standardmäßig alternativen Text (Alt-Text) und Titelattribute zu Bildern hinzufügen, damit Bildschirmlesegeräte sie für Benutzer mit Sehbehinderungen laut vorlesen können.

WordPress hat außerdem vorgeschrieben, dass alle neuen und aktualisierten Codes in WordPress den Standards für barrierefreies Coding entsprechen müssen. Damit soll sichergestellt werden, dass WordPress-Entwickler bei der Erstellung von Themes und Plugins die Best Practices für Barrierefreiheit einhalten.

Darüber hinaus bietet WordPress Funktionen, die es Nutzern mit Behinderungen leicht machen, ihre eigenen Websites zu erstellen, wie z. B. den barrierefreien Modus zum Hinzufügen von Widgets.

Für weitere Informationen empfehlen wir Ihnen, den Tag „Barrierefreiheit“ auf der Seite „Make WordPress Core “ zu lesen, um weitere Informationen zu erhalten.

Aus diesem Grund ist WordPress nicht von Haus aus barrierefrei. Als Website-Besitzer ist es wichtig, zusätzliche Maßnahmen zu ergreifen, damit Ihre Website die Zugänglichkeitsstandards erfüllt.

Wir haben diesen Leitfaden in ein paar einfache Tipps zur Verbesserung der Barrierefreiheit Ihrer WordPress-Website unterteilt. Sie können diese schnellen Links verwenden, um zu einem bestimmten Abschnitt zu navigieren:

1. Machen Sie sich mit den Zugänglichkeitsrichtlinien für Webinhalte (WCAG) vertraut

Als Erstes empfehlen wir die Lektüre der Web Content Accessibility Guidelines (WCAG). Dabei handelt es sich um die von der W3C Web Accessibility Initiative (WAI) aufgestellten Standards, mit denen Nutzer ihre Websites besser zugänglich machen können.

Für den Anfang können Sie sich die Aktualisierungen der WCAG 2.1 und WCAG 2.2 ansehen. Wenn Ihnen beide Dokumente zu lang erscheinen, können Sie stattdessen diese Kurzreferenz als Lesezeichen speichern.

2. Verwenden Sie ein barrierefreies WordPress-Theme

Barrierefreie Themes haben die Mindeststandards für Barrierefreiheit erfüllt, die das WordPress-Theme-Review-Team festgelegt hat.

Die Verwendung eines barrierefreien WordPress-Themes bedeutet nicht, dass Ihre Website automatisch alle Anforderungen an die Barrierefreiheit erfüllt, da Sie selbst noch einige Anpassungen vornehmen müssen. Es kann Ihnen jedoch eine Starthilfe geben, um Ihre Website zugänglicher zu machen.

Das Mindeste, was ein barrierefreies Thema haben sollte:

• Menüs, die nur mit der Tastatur navigiert werden können.
• Guter Farbkontrast, der den Inhalt für Nutzer mit Sehschwäche lesbar macht.
• Semantisch korrektes HTML, das Hilfstechnologien hilft, den Inhalt und die Struktur einer Webseite zu verstehen.

Wenn Sie noch einen Schritt weiter gehen wollen, sollten Sie auch prüfen, ob das Theme ARIA-Attribute enthält. Diese Attribute sind wie zusätzliche Informationen, die den HTML-Code Ihres Themes ergänzen, um die Navigation auf einer Website für unterstützende Technologien noch einfacher zu machen.

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

Wählen Sie hier „Funktionsfilter“ und dann „Barrierefrei“.

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

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

Sie sehen dann einige barrierefreie Themen auf dem Bildschirm.

Weitere Theme-Empfehlungen finden Sie in unseren Expertenempfehlungen für die besten WordPress-Themes.

3. Installieren Sie ein WordPress Plugin für Barrierefreiheit

Ein WordPress-Zugänglichkeits-Plugin fügt hilfreiche Funktionen für Besucher mit Behinderungen hinzu, um auf Ihrer Website zu navigieren.

Ein WordPress-Zugänglichkeits-Plugin, das wir empfehlen, ist WP Accessibility. Einige der Dinge, die dieses Plugin tun kann, sind:

• Hinzufügen einer Symbolleiste für Barrierefreiheit
• Erkennen, ob Ihr Thema für die Barrierefreiheit geeignet ist
• Verfolgen, wie die Zugänglichkeitsfunktionen Ihrer Website genutzt werden, damit Sie sie bewerten können

Zunächst müssen Sie das Plugin in WordPress installieren und aktivieren.

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

Schauen wir uns die einzelnen Abschnitte der Einstellungsseite an.

Überspringen von Links hinzufügen

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

Dies ist eine äußerst nützliche Funktion für Personen, die Bildschirmlesegeräte verwenden. Ohne einen Link zum Überspringen müssen sie sich alles anhören, was auf Ihrer Website angezeigt wird, einschließlich der Navigationsmenüs, bevor sie den Inhalt erreichen.

Wenn Ihr Thema bereits Skip-Links verwendet, erhalten Sie eine Benachrichtigung, die dies bestätigt.

Symbolleiste für Barrierefreiheit

Das WP Accessibility Plugin verfügt über eine Symbolleiste für Barrierefreiheit.

Wenn Sie es aktivieren, fügt das Plugin eine Symbolleiste auf Ihrer Website hinzu, mit der Benutzer die Schriftgröße ändern oder Ihre Website im kontrastreichen Farbmodus anzeigen können.

So können Ihre Benutzer die Optionen auswählen, die sie benötigen, um die Seite leichter lesen zu können.

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, klicken Sie auf die Schaltfläche „Symbolleisteneinstellungen aktualisieren“, um Ihre Einstellungen zu speichern.

So sieht die Symbolleiste auf unserer Test-Website aus.

Korrekturen der Zugänglichkeit

WP Accessibility bietet auch mehrere Zugänglichkeitskorrekturen, die mögliche Probleme auf Ihrer Website lösen könnten. Sie können jede Option durchgehen und sehen, ob Sie sie brauchen.

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 Suchanfrage einreichen, und entfernen das HTML-Attribut tabindex, wenn es nicht benötigt wird, um die Tastaturnavigation zu vereinfachen.

Wenn Sie ein barrierefreies Theme verwenden, in dem einige dieser Funktionen bereits aktiviert sind, wird oben im Abschnitt eine entsprechende Meldung angezeigt.

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

Zugänglichkeitsmerkmale

Das Plugin bietet auch einige Optionen, um den Zugang zu Ihren Inhalten zu erleichtern.

Die erste Gruppe von Einstellungen erleichtert die Handhabung von Bildern für Benutzer von Bildschirmlesegeräten.

Es gibt auch die Möglichkeit, Zusammenfassungen am Anfang Ihrer Beiträge und Seiten anzuzeigen. So können Personen mit Bildschirmlesegeräten eine Zusammenfassung des Inhalts hören, bevor sie sich entscheiden, den gesamten Artikel anzuhören.

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

Erfahrung in Prüfung und Verwaltung

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

Dieser Abschnitt ist eher technisch, daher sollten Sie die Dokumentation des Plugins konsultieren, bevor Sie die Kästchen ankreuzen.

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

Titelattribute entfernen

In diesem Abschnitt können Sie das Titelattribut aus Tagclouds entfernen.

Das title-Attribut wird von einigen Experten für Barrierefreiheit als nutzlos angesehen. Die meisten Bildschirmlesegeräte ignorieren in der Regel das Attribut title und lesen stattdessen den Ankertext.

Diese Einstellung ist standardmäßig aktiviert, aber wenn Sie sie ändern, müssen Sie auf die Schaltfläche „Einstellungen für Titelattribute aktualisieren“ klicken.

4. Überprüfen Sie den Farbkontrast Ihrer Website

Der Farbkontrast ist der Unterschied zwischen der Textfarbe und der Hintergrundfarbe. Er ist ein sehr wichtiger Bestandteil der Barrierefreiheit einer Website, da er die Lesbarkeit des Inhalts Ihrer Website für Menschen mit Sehschwäche und Farbenblindheit beeinflussen kann.

Um den Normen für Barrierefreiheit im Internet zu entsprechen, sollte normaler Text einen hohen Kontrast von mindestens 4,5 zu 1 haben, d. h. der Text muss 4,5 Mal heller sein als der Hintergrund.

Für größeren Text ist die Anforderung mit 3 zu 1 etwas geringer, d. h. ein etwas geringerer Kontrast ist akzeptabel. Die gleiche Regel gilt für Grafiken und Elemente der Benutzeroberfläche, wie z. B. die Ränder von Formulareingaben.

Das WP Accessibility Plugin hat einen eingebauten Farbkontrast-Checker, den Sie verwenden können.

Blättern Sie in den Plugin-Einstellungen einfach zum Abschnitt Farbkontrasttester und wählen Sie eine Vordergrundfarbe (die Farbe, die Sie für Ihren Text verwenden werden) und die dazugehörige Hintergrundfarbe.

Klicken Sie dann auf „Farbkontrast 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 auch den kostenlosen WebAIM Contrast Checker verwenden. Wie bei dem vorherigen Tool müssen Sie nur eine Vordergrund- und eine Hintergrundfarbe auswählen.

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

Weitere Einzelheiten finden Sie in unserem Leitfaden zur Auswahl des perfekten Farbschemas für Ihre WordPress-Website.

5. Alternativtext zu Bildern hinzufügen

Der Alt-Text ist nicht nur für Suchmaschinen nützlich, sondern auch für Bildschirmlesegeräte, die Bilder für Menschen mit Sehbehinderungen beschreiben.

Wir haben bereits erwähnt, dass WordPress über eine integrierte Funktion zum Hinzufügen von Alt-Text verfügt. Der Prozess ist ziemlich einfach, und Sie können alles über die Einrichtung in den folgenden Anleitungen lesen:

• Anfängerleitfaden für Bild-SEO – Optimieren Sie Bilder für Suchmaschinen
• Image Alt Text vs Image Title 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 empfehlen, alle Formularelemente zu beschriften, um es Hilfsmitteln zu erleichtern, die einzelnen Elemente zu identifizieren und Informationen an die Benutzer weiterzugeben.

Darüber hinaus ist das Hinzufügen klarer und anschaulicher Beschriftungen eine gute Web-Design-Praxis. Wenn die Benutzer verstehen, wofür die einzelnen Formularfelder gedacht sind, ist die Wahrscheinlichkeit von Benutzerfehlern geringer, und mehr Menschen können ihre Formulare ausfüllen.

Wenn Sie sich nicht sicher sind, wie Sie großartige Formulare erstellen können, dann empfehlen wir Ihnen WPForms. Es ist der beste WordPress-Formular-Builder, mit dem Sie Formulare ganz einfach an Ihre Bedürfnisse anpassen können, einschließlich der Verbesserung der Barrierefreiheit.

Sie können mehr über WPForms in unserer WPForms Rezension lesen. Sehen Sie sich auch diese Anleitungen zum Erstellen von Formularen in WordPress an:

• Wie man ein Kontaktformular in WordPress erstellt (Schritt für Schritt)
• Wie man ein Buchungsformular in WordPress erstellt
• Wie man ein benutzerdefiniertes Benutzerregistrierungsformular in WordPress erstellt

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

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

Diese Tags helfen auch Tools wie Bildschirmlesegeräten, eine navigierbare Gliederung für Nutzer mit Sehbehinderungen zu erstellen. So können sie zwischen Abschnitten springen und die Gesamtstruktur Ihres Inhalts verstehen.

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

8. Beschreibenden Anchor-Text verwenden

Anker- oder Linktext sind im Grunde die anklickbaren Wörter oder Ausdrücke in einem Link. Normalerweise können Sie erkennen, welcher Text verlinkt ist, weil er in einer anderen Farbe dargestellt wird.

Häufig 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 es keine Informationen darüber gibt, wohin der Link führt. Dies erschwert es Menschen, die assistive Technologien verwenden, den Zweck des Links zu verstehen.

Deshalb ist es am besten, stattdessen beschreibenden Ankertext zu verwenden. Das bedeutet, dass Sie Wörter verwenden, die beschreiben, worum es bei 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 einfügen: „Folgen Sie diesem Leitfaden, um mehr über die besten WordPress-Hosting-Dienste auf dem Markt zu erfahren“.

Anstatt den Link zu „Folgen Sie diesem Leitfaden“ oder irgendwo anders in diesem Satz einzufügen, sollten Sie ihn in „beste WordPress-Hostingdienste“ einfügen. Auf diese Weise erhält der Nutzer einen Überblick darüber, was er in dem verlinkten Inhalt finden wird

Weitere Informationen über Links und Ankertext finden Sie in unserem Leitfaden für Einsteiger zum Thema Verlinkung in WordPress.

9. Hinzufügen von Untertiteln oder Transkripten zu Video- und Audioinhalten

Eines der größten Probleme für Menschen mit Hörbehinderungen ist die Unfähigkeit, gesprochene Inhalte in Videos und Audios zu verstehen. Deshalb fügen viele Ersteller von Videoinhalten und Podcaster Untertitel oder Transkripte hinzu.

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

Für Audioinhalte sollten Sie einen Transkriptionsdienst in Betracht ziehen, der Sprache problemlos in Text umwandelt. Auf diese Weise müssen Sie nicht manuell eine schriftliche Version Ihrer Audioinhalte erstellen.

Weitere Informationen finden Sie in unserer Liste der besten Transkriptionsdienste.

10. Testen Sie die Benutzerfreundlichkeit und Zugänglichkeit

Wenn Sie alle Tipps aus diesem Leitfaden umgesetzt haben, ist der letzte Schritt die Durchführung von Tests zur Benutzerfreundlichkeit und Barrierefreiheit auf Ihrer WordPress-Website.

Diese Tests können Ihnen helfen, verbleibende Probleme zu erkennen 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 Domänennamen Ihrer Website ein, und das Tool ermittelt für Sie alle Probleme im Zusammenhang mit der Erreichbarkeit.

Sie können auch einen Zugänglichkeitsscanner verwenden. Wir empfehlen den Accessibility Checker von Equalize Digital. Es gibt auch eine kostenlose Plugin-Version, mit der Sie eine unbegrenzte Anzahl von Beiträgen und Seiten auf Ihrer Website scannen können.

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

Eine weitere Möglichkeit ist die Durchführung eines UX-Audits, d. h. die Überprüfung Ihrer Website auf ein gutes Nutzererlebnis. Weitere Informationen finden Sie in unserem UX-Audit-Leitfaden.

Zu guter Letzt möchten wir Sie ermutigen, Ihre Nutzer um Feedback zu bitten. Tests können zwar Ergebnisse liefern, aber das Feedback von tatsächlichen Besuchern, die die Zugänglichkeitsfunktionen Ihrer Website nutzen, kann viel genauere Erkenntnisse liefern.

UserFeedback ist das beste Plugin für diese Aufgabe. Damit können Sie Umfragen erstellen, um die Meinungen und Gedanken Ihrer Nutzer zu sammeln. Es gibt auch Vorlagen für Feedback zum Website-Design, so dass Sie die Umfrage nicht von Grund auf neu erstellen müssen.

Weitere Informationen finden Sie in unserem Leitfaden für Feedback zum Website-Design in WordPress.

Expertenleitfäden zur Barrierefreiheit von WordPress

Da Sie nun wissen, wie Sie die Zugänglichkeit Ihrer Website verbessern können, möchten Sie vielleicht einige andere Anleitungen zu Fragen der Zugänglichkeit von WordPress lesen:

• Hinzufügen von WordPress-Widgets im barrierefreien Modus
• Wie Sie ein perfektes Farbschema für Ihre WordPress-Website auswählen
• Hinzufügen einer Schriftgrößenanpassung in WordPress für Barrierefreiheit
• Einfaches Hinzufügen von Titelattributen zu Bildern in WordPress
• Wie man Text in WordPress hervorhebt (Anleitung für Anfänger)
• Image Alt Text vs Image Title in WordPress – Was ist der Unterschied?

Wenn Ihnen dieser Artikel gefallen hat, dann abonnieren Sie bitte unseren YouTube-Kanal für WordPress-Videotutorials. Sie können uns auch auf Twitter und Facebook finden.