Werbung

Der Classic-Editor: Vertraut und zuverlässig –
Ihr bewährter Begleiter.

Viele Nutzer schätzen die vertraute Umgebung des Classic-Editors, die eine einfache und schnelle Bearbeitung ermöglicht.

---

Werbung

Mit dem Advanced Editor Tools auf das nächste Level –
Mehr Funktionen, mehr Möglichkeiten.

Der Advanced Editor erweitert den Funktionsumfang des Classic-Editors und ermöglicht es, Inhalte noch effektiver zu bearbeiten.

---

Werbung

Einfach und intuitiv –
Der Classic-Editor für alle.

Der Classic-Editor zeichnet sich durch Stabilität und Zuverlässigkeit aus, was für professionellen Anwender von Bedeutung ist.

---

Werbung

Mehr schaffen in weniger Zeit –
Der Advanced Editor für kreative Köpfe.

Mit dem Advanced Editor können Designer und
Content Creatoren kreative Ideen umsetzten.

---

Die individuelle Anpassung der Schriftgrößen auf einer WordPress-Website kann für die Benutzerfreundlichkeit von Bedeutung sein. Mit Plug-ins wie 'Accessibility Font Resizer' und 'Zeno Font Resizer' lassen sich Texte flexibel vergrößern oder verkleinern, um den unterschiedlichen Bedürfnissen der Nutzer gerecht zu werden.

Darüber hinaus kann es für die Zugänglichkeit wichtig sein, dass die Tastaturnavigation integriert wird, um allen Nutzern eine einfache Bedienbarkeit zu ermöglichen. Dieser Artikel zeigt, wie diese Tools effektiv eingesetzt werden können, um das Schriftbild einer Website optimal anzupassen und die Tastaturnavigation zu verbessern.

Accessibility Font Resizer

Das Plug-in Accessibility Font Resizer.

Accessibility Font Resizer

Ans Herz zu legen ist das Video Accessibility Font Resizer tutorial, hier wird gezeigt, wie das richtig zu integrieren ist. Und nochmal Wie verwende ich dieses Plugin?

• Für dieses Plug-in gibt es keinen Shortcode. Sie können die CSS-Classen direkt aufrufen, ohne dass ein Shortcode erforderlich ist.

Einstellung 'Accessibility Font Resizer'

Es ist darauf zu achten, welche Elemente der Website thematisiert werden sollen.

Zum Beispiel: soll hier nur der Contentbereich, das ist der Bereich, der nur dem Inhalt von einem Beitrag oder Seite ist, der Schriftgröße einzustellen sein. Somit ist das der Inhalt, dem ID-Selektor #entry-content p und diversen anderen HTML-Elementen. Die Einstellung bei "HTML elements" ist wie folgt:

.entry-content p:not(blockquote)
.entry-content p:not(pre)
.entry-content p:not(.ez-toc-link)
.entry-content ol
.entry-content ul
.entry-content dl
.entry-content td
.entry-content li
.entry-content a
.entry-content h6

Die anderen Überschriften bleiben auf der Website unverändert, da sie bereits groß genug sind und so besser mit dem Gesamtdesign harmonieren.

😉 Unsere Bewertung des Plug-ins: Sehr praktisches, effektives Font-Resizer-Plugin mit Lernkurve.

Klein ist fein, aber groß ist besser!

Wenn du neugierig bist, was der Autor des 'Accessibility Font Resizer' sonst noch macht, schaue auf SatelliteWP vorbei. Seine eigene persönliche Internetseite Maxime Jobin:

🧡 Tastaturnavigation bedienbar machen

• Zu den Einfügungen der Buttons – wie im Video eingangs gezeigt – wäre noch anzumerken, dass man die Buttons auch der Tastaturnavigation zugänglich machen sollte.

Für die Benutzererfahrung ist es weiterhin wichtig, dass die Tastaturnavigation integriert ist. Dies betrifft auf dieser Website auch die Schriftgrößen-Resizer.

Grundprinzipien der Tastaturnavigation:

• Tabulatortaste (Tab): Mit der Tabulatortaste kannst du durch die interaktiven Elemente einer Seite navigieren, wie z.B. Links, Formulareingabefelder, Buttons und andere steuerbare Elemente. Jedes Mal, wenn du die Tabulatortaste drückst, wird der Fokus auf das nächste interaktive Element verschoben.
• Shift + Tab: Dies verschiebt den Fokus zurück zum vorherigen interaktiven Element. Diese Kombination wird verwendet, um rückwärts durch die Elemente zu navigieren.

Das Menü konfigurieren

In unserem Beispiel haben wir im Header-Menü das "Font Resize"  nicht untereinander, sondern nebeneinander umgesetzt.

• Nach dem Hinzufügen der Menü-Widgets bitte dem Feld URL den Hashtag oder das Doppelkreuz [#] entfernen.

Im Menü jeweils eintragen:

• CSS-Klassen (optional)
  afr-normal
• CSS-Klassen (optional)
  afr-large
• CSS-Klassen (optional)
  afr-xlarge

So wie es dem Video eingangs gezeigt wurde.

Dann unter:

• "Angezeigter Name"

jeweils das entsprechende HTML:

<span class="focusable" aria-label="Text Normal" tabindex="0" role="button">
    T e x t Normal
</span>

<span class="focusable" style="margin: 0 15px;" aria-label="Text Mittel" tabindex="0" role="button">
    Large
</span>

<span class="focusable" aria-label="Text Groß" tabindex="0" role="button">
    X-Large
</span>

• Die Class focusable ist folgend dem JavaScript für die Tastaturnavigation.
• aria-label="Text Normal": Dieses Attribut wird verwendet, um eine textliche Beschreibung für Benutzer bereitzustellen, die assistive Technologien wie Screenreader verwenden.
• tabindex="0": Dieses Attribut macht das <span>-Element fokussierbar, sodass Benutzer es per Tastatur erreichen können. Der Wert 0 bedeutet, dass das Element in der normalen Tab-Reihenfolge erscheint und durch Drücken der Tab-Taste angesprungen werden kann.
• role="button": Dieses Attribut definiert das <span>-Element als Schaltfläche für assistive Technologien. Obwohl es sich physisch um ein <span>-Element handelt, wird es für Screenreader und andere Hilfsmittel als Schaltfläche erkannt, was wichtig für die Zugänglichkeit ist.

Das JavaScript zur Tastaturnavigation

Mit diesem JavaScript und Dank an ChatGPT:

/* ––– Tastaturnavigantion Headerzeile ––– */

document.addEventListener('DOMContentLoaded', function() {
    const body = document.body;

    function handleFirstTab(event) {
        if (event.key === 'Tab') {
            body.classList.add('keyboard-focused');
            window.removeEventListener('keydown', handleFirstTab);
            window.addEventListener('mousedown', handleMouseDown);
        }
    }

    function handleMouseDown() {
        body.classList.remove('keyboard-focused');
        window.removeEventListener('mousedown', handleMouseDown);
        window.addEventListener('keydown', handleFirstTab);
    }

    window.addEventListener('keydown', handleFirstTab);

    document.querySelectorAll('.focusable').forEach(button => {
        button.addEventListener('keydown', function(event) {
            if (event.key === 'Enter' || event.key === ' ') {
                event.preventDefault();
                button.click();
            }
        });
    });
});

/* – Ende Tastaturnavigantion Headerzeile – */

CSS-Vorschlag zur Tastaturnavigation

… unserem CSS Beispiel für Twenty Fourteen Theme:

/* --- Tastaturfokus ––– */
/* Standard-Fokus-Stil Browsers entfernen */
.focusable:focus {
    outline: none;
}

.keyboard-focused .focusable:focus {
    background-color: #f1f1f1;
    border-radius: 3px;
    box-shadow: 0 0 2px 2px rgba(33, 117, 155, 0.6);
    /*outline-style: dotted;*/
    outline: thin dotted;
    color: #21759b;
    font-weight: bold;
    padding: 12px 20px;
}

/* Theme spezifisch 20/14 */
.screen-reader-text:focus {
    box-shadow: 0 0 2px 2px rgba(33, 117, 155, 0.6) !important;
    font-size: 15px;
    padding: 12px 20px !important;
}

/* - Ende Tastaturfokus – */

… sollte das funktionell werden.

Das Gleiche gilt für die anderen Buttons im Menü, wie das in einem anderen Beitrag gezeigt wird.

Tastaturnavigation: Fokussierung und Interaktion mit JavaScript

Warum hier das Plug-in 'Accessibility Font Resizer' und nicht 'Zeno Font Resizer'? Das "Accessibility Font Resizer" Plug-in wird hier der Website bevorzugt, da es sich besser ins Header-Menü integriert und für die Tastaturnavigation sehr geeignet ist.

Zeno Font Resizer

Plug-in als Tool zur individuellen Größendarstellung der Schrift.

Das Plug-in Zeno Font Resizer.

Zeno Font Resizer

Das 'Zeno' Plug-in hat auch ein Widget und die Einstellungen zur Schriftanpassung sind etwas unterschiedlich. Jedoch ist beiden darauf zu achten, welche Elemente der Website thematisiert werden sollen. In den Einstellungen gibt es die Option, ob die Schriftanpassung nur den Contentbereich ansprechen soll oder auch andere Bereiche der Website, wie z.B. der Seitenleisten.

Im Speziellen geht es um die Handhabung von CSS-Elementen, um sicherzustellen, dass nur der Text im Inhaltsbereich oder auch die gesamte Website von der Schriftanpassung angesprochen ist. Diese Feinabstimmung kann für Anfänger von WordPress schwierig sein, daher ist hier eine Empfehlung.

Einstellung "Zeno Font Resizer"

Grundeinstellungen

• Standard-Einstellung, die Größe gesamten Inhalt in HTML-Element <html> Alle Inhalte der Website </ html>)
• Ändern Sie die Größe gesamten Inhalt in Körperelement <body> Alle Inhalte Ihrer Website </ body>.
• Verwenden div mit id Innenkörpers (<div id = "Innenkörper"> Resizable Text </ div>).
• Verwenden Sie Ihre eigenen div id (<div id = "yourid"> Resizable Text </ div>).
• Verwenden Sie Ihre eigenen Elemente (Zum Beispiel: eine Spanne mit Classe "bla" (<span class = "bla"> Resizable Text </ span>), geben Sie die CSS-Definition "span.bla" (ohne Anführungszeichen)).

Über den mittleren Buchstaben AAA erfolgt der Reset zur normalen Schriftgröße. Das Plug-in ist mit einem Widget (Dashboard/Design/Widget) vertreten. In Anwendung von Cookies wird die jeweilige Schriftgröße der weiteren besuchten Seiten selbiger Website weitergegeben.

Zum Shortcode siehe cyclotouriste/zeno-font-resizer-shortcode 

• Im Zusammenhang zur Schriftgröße, siehe:

Font-Resizer: Wie Schriftgröße und Textauszeichnungen interagieren

Der Beitrag wurde mit fachlicher Unterstützung erstellt.

Aktualisiert im Jahr 2024 August