Trusted WordPress tutorials, when you need them most.
Beginner’s Guide to WordPress
WPB Cup
25 Million+
Websites using our plugins
16+
Years of WordPress experience
3000+
WordPress tutorials
by experts

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

Sie möchten Ihre WordPress Website barrierefrei gestalten, haben aber Probleme mit der Anpassung von Schriften? Es gibt zwar Funktionen zum Vergrößern von Browsern, aber sie zerstören oft das Layout Ihrer Website und erstellen ein frustrierendes Erlebnis für Benutzer, die größeren Text benötigen 😞.

Wir haben Tausenden von WordPress-Anfängern geholfen, das Design ihrer Website zu verbessern. Dabei haben wir Folgendes gelernt: Mit einem geeigneten Schrift-Resizer sollten Besucher die Textgröße anpassen können, ohne dass andere Seitenelemente verzerrt werden.

Diese scheinbar kleine Funktion kann einen großen Unterschied machen, wenn es darum geht, Besucher mit Ihren Inhalten zu beschäftigen.

In diesem Leitfaden zeigen wir Ihnen zwei bewährte Methoden, um Ihrer WordPress Website eine Schriftgrößenanpassung hinzuzufügen – eine für klassische Themes und eine andere, die mit jedem Theme funktioniert. Beide Methoden sind anfängerfreundlich und werden das Design Ihrer Website nicht beeinträchtigen.

How to add resizeable text for site visitors in WordPress

Ist es wichtig, größenveränderbaren Text auf Ihrer Website hinzuzufü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 Schriftgröße in WordPress zu wä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 im Browser eingebaute Funktion zum Zoomen verwenden können, indem Sie die Tasten „STRG und +“ drücken, wird dadurch jedes WordPress-Design-Element auf der Seite vergrößert, nicht nur der Text. Dies kann das Layout der Website beeinträchtigen und dem Benutzer kein gutes Gefühl geben.

Sehen wir uns also an, wie Sie in WordPress ganz einfach größenveränderbaren Text für Ihre Besucher hinzufügen können. Sie können die Links unten verwenden, um zu einer bestimmten Methode zu springen:

Methode 1: WordPress Schriftgröße mit Plugin und Code hinzufügen

Eine einfache Möglichkeit, Benutzern die Möglichkeit zu geben, die Schriftgröße auf Ihrer Website zu ändern, ist die Verwendung eines WordPress-Plugins zur Anpassung der Schriftgröße wie Accessibility Widget.

Es ist ein kostenloses WordPress Plugin, mit dem Sie eine Option in die Seitenleiste Ihrer Website einfügen können, um die Textgröße zu ändern. Das Plugin ist leichtgewichtig und sehr einfach zu verwenden.

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.

Add an accessibility widget block

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.

Change accessibility widget settings

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:

Change text size preview

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.

Opening the WordPress theme customizer for classic themes

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

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

Opening the Additional CSS tab in Theme Customizer

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

1
2
3
4
5
.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.

Adding additional CSS to a classic theme to style the accessibility widget

Methode 2: WordPress Plugin für Barrierefreiheit verwenden

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.

WP Accessibility Settings

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“.

WP Accessibility toolbar settings

Das war’s!

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

Gif of how the WP Accessibility plugin works

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:

Video-Anleitung

Subscribe to WPBeginner

Wir hoffen, dass dieser Artikel Ihnen geholfen hat, Ihrer WordPress Website größenveränderbaren Text hinzuzufügen. Vielleicht möchten Sie auch unsere Expertenauswahl der besten WordPress Drag-and-drop Page-Builder und unseren vollständigen Leitfaden für WordPress Theme-Updates lesen.

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.

Disclosure: Our content is reader-supported. This means if you click on some of our links, then we may earn a commission. See how WPBeginner is funded, why it matters, and how you can support us. Here's our editorial process.

Avatar

Editorial Staff at WPBeginner is a team of WordPress experts led by Syed Balkhi with over 16 years of experience in WordPress, Web Hosting, eCommerce, SEO, and Marketing. Started in 2009, WPBeginner is now the largest free WordPress resource site in the industry and is often referred to as the Wikipedia for WordPress.

The Ultimate WordPress Toolkit

Get FREE access to our toolkit - a collection of WordPress related products and resources that every professional should have!

Reader Interactions

7 KommentareLeave a Reply

  1. Shushanna

    Hi, thanks for the amazing post. I wonder if your site does not have a sidebar, is it possible to to put the widget somewhere else, for example above the navigation.

    • WPBeginner Support

      You can place it in your theme’s widget areas if your theme has widget areas available!

      Admin

  2. Jasper

    I have installed the widget but don’t have the Set Controller Text box so on the website it shows the %s.
    Any sugestions? Thanks

  3. Ivo

    Hi, I followed the instructions as on the video but noting happens. Please help.
    I actually wont it to make my girlfriend site to be zoom-able when open in mobile devices. Please suggest…
    Regards,
    Ivo

  4. Eric Paquette

    is it possible to make the A A A bigger ?

  5. Wrenling

    This widget is AMAZING, thank you so much!!

    I’m curious, I added it to my blog and it is EXACTLY what I wanted, but it only affects the main page of the blog – if you click on an individual post, the widget disappears. Can you tell me how to fix this?

Leave A Reply

Thanks for choosing to leave a comment. Please keep in mind that all comments are moderated according to our comment policy, and your email address will NOT be published. Please Do NOT use keywords in the name field. Let's have a personal and meaningful conversation.