Hinzufügen einer Schriftgrößenanpassung in WordPress für Barrierefreiheit

Haben Sie Probleme damit, Ihre WordPress Website für alle Benutzer zugänglich zu machen? Sie haben wahrscheinlich schon von Schrift-Resizern gehört, aber einen zu implementieren, der tatsächlich funktioniert, ohne das Layout Ihrer Website zu zerstören, kann eine echte Herausforderung sein.

Viele Betreiber von WordPress Websites gehen davon aus, dass die Zoom-Funktionen des Browsers ausreichen, aber sie verzerren oft die Elemente der Seite und erstellen ein schlechtes Benutzererlebnis. Was Sie brauchen, ist ein Schrift-Resizer, mit dem Ihre Besucher die Textgröße einfach anpassen können, ohne dass andere Seitenkomponenten beeinträchtigt werden.

Nach jahrelangem Betrieb von WPBeginner haben wir aus erster Hand erfahren, dass Sie ohne angemessene Funktionen zur Barrierefreiheit Gefahr laufen, einen erheblichen Teil Ihres Publikums zu verprellen. Deshalb haben wir zwei narrensichere Methoden entwickelt, um Ihrer WordPress-Website einen Schrift-Resizer hinzuzufügen.

Warum sollten Sie Ihrer Website größenveränderbaren Text hinzufügen?

Die Wahl der richtigen Schriftart für Ihre WordPress-Website ist wichtig, denn sie trägt wesentlich zur Attraktivität Ihrer Website bei und hilft den Besuchern, Ihre Inhalte zu lesen.

Manchmal reicht es jedoch nicht aus, die beste Schriftart für Ihre Website auszuwählen. Wenn die Schriftgröße zu klein ist, wird es den Besuchern schwer fallen, Ihre Artikel zu lesen, und sie werden Ihre Website schließlich verlassen.

Eine einfachere Möglichkeit, die Lesbarkeit zu verbessern, besteht darin, den Besuchern die Möglichkeit zu geben, die Größe des Haupttextes auf Ihrer Website zu ändern. So können die Nutzer die Textgröße nach ihrem Geschmack anpassen und mehr Zeit auf Ihrer Website verbringen.

Auch wenn Sie die integrierte Zoomfunktion des Browsers nutzen können, indem Sie die Tastenkombination „STRG und +“ drücken, wird dadurch jedes Element auf der Seite vergrößert, nicht nur der Text. Dies kann das Layout der Website stören und die Benutzerfreundlichkeit beeinträchtigen.

Sehen wir uns also an, wie Sie in WordPress ganz einfach größenveränderbaren Text für Ihre Besucher hinzufügen können.

Video-Anleitung

Wenn Sie eine schriftliche Anleitung bevorzugen, dann lesen Sie einfach weiter. Sie können die Links unten verwenden, um zu einer bestimmten Methode zu springen:

Methode 1: Größenveränderbaren Text in WordPress hinzufügen (nur bei klassischen WordPress-Themen)

Der einfachste Weg, um Nutzern die Möglichkeit zu geben, die Größe des Textes auf Ihrer Website zu ändern, ist die Verwendung eines WordPress-Plugins wie Accessibility Widget.

Es ist ein kostenloses WordPress-Plugin, mit dem Sie der Seitenleiste Ihrer Website eine Option zum Ändern der Textgröße hinzufügen können. Das Plugin ist leicht und sehr einfach zu bedienen.

Beachten Sie jedoch, dass das Accessibility Widget Plugin nicht mit Full Site Editing und Block-Themes kompatibel ist. Es funktioniert also nur, wenn Sie ein klassisches Theme verwenden. Sie wissen, dass Sie ein Block-Theme verwenden, wenn der Theme Customizer in Ihrem WordPress-Admin fehlt.

Als Erstes müssen Sie das Accessibility Widget Plugin auf Ihrer Website installieren und aktivieren. Wenn Sie Hilfe benötigen, lesen Sie bitte unsere Anleitung zur Installation eines WordPress-Plugins.

Nach der Aktivierung gehen Sie im WordPress-Administrationsbereich einfach auf Darstellung “ Widget. Als Nächstes können Sie auf die Schaltfläche „+“ klicken und den Block „Accessibility Widget“ zu Ihrer Seitenleiste hinzufügen.

Danach können Sie einen Titel für das Widget eingeben, z. B. „Textgröße ändern“ oder „Textgröße anpassen“.

Als Nächstes müssen Sie auswählen, welche HTML-Elemente oder CSS-Klassen von dem Widget betroffen sein sollen. Die Standardoptionen sind Körper, Absatz, Listenelemente und Tabellenzellen. Diese Optionen sollten für die meisten Websites ausreichen.

Das Widget bietet bis zu vier Optionen für die Größenänderung. Die Standardoptionen sind 90%, 100%, 110% und 120%. Sie können die Schriftgrößen erhöhen oder verringern, indem Sie die Zahlen in das Feld „Auf diese Größen einstellen“ eingeben.

Die letzte Widget-Einstellung ist der Steuerungstext, also der Text, den die Benutzer sehen werden. Sie können die Standardprozentwerte für die Textgröße beibehalten oder einen Buchstaben verwenden, um verschiedene Schriftgrößen anzuzeigen.

Wenn Sie fertig sind, klicken Sie einfach auf die Schaltfläche „Aktualisieren“, um Ihre Widget-Einstellungen zu speichern.

Sie können nun Ihre Website besuchen, um das Widget in Aktion zu sehen. So sollte das Widget in der Seitenleiste Ihrer Website erscheinen:

Wenn Sie der Meinung sind, dass der Controller-Text nicht auffällig ist, können Sie dies mit CSS ändern.

Gehen Sie dazu in Ihren WordPress-Admin und wählen Sie Design „ Anpassen.

Sie sollten nun einige Optionen sehen, mit denen Sie Ihr klassisches Theme individuell anpassen können.

Wählen Sie hier „Zusätzliches CSS“.

Jetzt können Sie etwas CSS-Code hinzufügen, um das Widget zu gestalten. Hier ist, was wir hinzugefügt haben:

.widget_accesstxt a {
border: 2px solid #000;
padding: 2px;
font-weight: bold;
}

Dieses CSS fügt einen Rand um den Controller-Text hinzu, macht ihn fett und fügt einen kleinen Innenabstand hinzu. Wenn Sie mit dem Aussehen des Widgets zufrieden sind, klicken Sie einfach auf „Veröffentlichen“.

Weitere Einzelheiten finden Sie in unserer Anleitung zum Hinzufügen individueller CSS in WordPress.

Methode 2: Größenveränderbaren Text in WordPress hinzufügen (alle WordPress-Themes)

Eine weitere einfache Möglichkeit, Nutzern die Möglichkeit zu geben, die Textgröße auf Ihrer Website zu ändern, ist die Verwendung von WP Accessibility. Mit diesem Plugin können Sie Ihrer Website eine Symbolleiste hinzufügen, um die Textgröße zu ändern, unabhängig davon, welches Theme Sie verwenden.

Als Erstes müssen Sie das WP Accessibility Plugin auf Ihrer Website installieren und aktivieren. Wenn Sie Hilfe benötigen, lesen Sie unsere Anleitung zur Installation eines WordPress-Plugins.

Rufen Sie nach der Aktivierung einfach die WP Accessibility-Seite im WordPress-Administrationsbereich auf.

Klicken Sie im Abschnitt „Symbolleiste für Barrierefreiheit“ auf die Option „Symbolleiste für Barrierefreiheit aktivieren“ und wählen Sie „Schriftgröße“. Dadurch wird der Symbolleiste eine Schriftgrößenänderung hinzugefügt.

Falls erforderlich, können Sie auch die Optionen Kontrast und Graustufen aktivieren.

Außerdem können Sie die Schriftgröße des Inhalts ändern, wenn die Symbolleiste angeklickt wird. Sie können auch einfach „Standardgröße“ im Dropdown-Menü auswählen, wenn Sie nicht sicher sind, was Sie wählen sollen.

Ansonsten empfehlen wir, die Option „Alternatives Stylesheet zur Schriftgrößenanpassung verwenden“ zu aktivieren. Wenn diese Option aktiviert ist, können Benutzer leicht zwischen der Standardschriftgröße und einer größeren, besser lesbaren Version des Textes wechseln.

Es steht Ihnen frei, andere Einstellungen im Plugin zu aktivieren.

Klicken Sie dann einfach auf die Schaltfläche „Symbolleisteneinstellungen aktualisieren“.

Das war’s!

So sieht die Symbolleiste zur Änderung der Schriftgröße auf dem Frontend aus:

Weitere Informationen finden Sie in unserem Leitfaden zur Verbesserung der Barrierefreiheit Ihrer WordPress-Website.

Machen Sie Ihre WordPress Website mit diesen Tipps noch benutzerfreundlicher

Möchten Sie Ihre Website benutzerfreundlicher und attraktiver gestalten? Sehen Sie sich diese hilfreichen Anleitungen an:

• Hinzufügen einer Navigation mit Pfeiltasten in WordPress – Erleichtern Sie die Navigation auf Ihrer Website.
• Wie Sie die Farben Ihrer WordPress Website individuell anpassen können – Wählen Sie die richtigen Farben, damit Ihre Website gut aussieht und leicht zu lesen ist.
• So fügen Sie eine Preloader-Animation in WordPress ein (Schritt für Schritt) – Fügen Sie Ihrer Website eine coole Ansicht zum Laden hinzu.
• So fügen Sie Ihrer WordPress-Website mühelos einen dunklen Modus hinzu – Lassen Sie Benutzer zu einem dunkleren Theme wechseln, wenn sie es bevorzugen.
• Wege zum Erstellen einer mobilfreundlichen WordPress Website – Stellen Sie sicher, dass Ihre Website auf Handys und Tablets gut funktioniert.
• Feedback zum Website-Design in WordPress einholen (Schritt für Schritt) – Erfahren Sie, wie Sie Leute fragen können, was sie über das Design Ihrer Website denken.
• Wie man Text in WordPress hervorhebt (Anleitung für Anfänger) – Lernen Sie, wichtige Wörter auf Ihren Seiten hervorzuheben.

Wir hoffen, dass dieser Artikel Ihnen geholfen hat, Ihrer WordPress Website größenveränderbaren Text hinzuzufügen. Sehen Sie sich auch unsere Expertenauswahl der besten WordPress Drag-and-drop Page-Builder und unseren ultimativen Leitfaden an , wie Sie Ihr WordPress Theme aktualisieren können, ohne die individuelle Anpassung zu verlieren.

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.