Semanticality™ – Semantik- & Accessibility-Tool für WordPress

Semanticality™ ist ein Werkzeug zur Verbesserung der Semantik und Zugänglichkeit von WordPress-Websites mit dem Gutenberg-Editor, ohne dass Du direkt in den Code des Themes eingreifen musst. Es arbeitet über dem bestehenden HTML, das von Blöcken generiert wird, und ermöglicht eine flexible Konfiguration von Tags und Attributen direkt über die Editor-Oberfläche.

Es löst drei Hauptprobleme:

• Vereinfachung semantischer Bearbeitungen: Ändere Tags, Attribute und ARIA ohne benutzerdefinierten Code.
• Flexibilität in der Verwaltung: Lokale Regeln für einzelne Seiten + globale Regeln für die gesamte Website.
• Unterstützung der Zugänglichkeit: Hilft, WCAG-Konformität zu erreichen und verbessert die Benutzerfreundlichkeit für Screenreader.

Kurz gesagt: Du schreibst Regeln → schaust Dir die Live-Vorschau an → testest mit einem Screenreader → veröffentlichst.

Die Grundidee ist einfach: Jeder Block in WordPress hat eine HTML-Ausgabe. Manchmal entspricht diese Ausgabe nicht den Anforderungen an Semantik, Zugänglichkeit oder SEO-Standards. Mit Semanticality™ kannst Du diese Ausgabe zur Renderzeit der Seite „überschreiben“: <div> durch <section> ersetzen, aria-*-Attribute hinzufügen, eindeutige IDs einfügen oder die Struktur ändern, ohne den Quellcode des Themes oder Plugins zu berühren.

Manchmal sehen die Änderungen visuell unauffällig aus, sind aber für Screenreader entscheidend.

<!-- Vorher -->
<div class="kt-accordion-header-wrap">
  <div class="kt-accordion-title">FAQ</div>
</div>

<!-- Nachher -->
<section aria-labelledby="faq-title">
  <h2
    id="faq-title"
    class="kt-accordion-title"
    aria-label="FAQ – Frequently Asked Questions"
  >
    FAQ
  </h2>
</section>

Eine so einfache Änderung:

• bietet die korrekte Überschriftenstruktur (WCAG 2.2 SC 2.4.6 Überschriften und Beschriftungen),
• verbessert die Navigation für Screenreader-Benutzer (WCAG 2.2 SC 2.4.1 Blöcke umgehen),
• ermöglicht es dem Screenreader, den Block als „Überschrift der zweiten Ebene“ vorzulesen (WCAG 2.2 SC 1.3.1 Informationen und Beziehungen),
• verbessert SEO (Google mag strukturierte Überschriften).

Wichtig: Bei der Arbeit mit dem Plugin wird empfohlen, eine Staging- oder lokale Version der Website zu verwenden und Änderungen niemals ohne vorherige Prüfung auf einer Live-Website anzuwenden. Für einige HTML-Elemente gibt es Standardstile, und Änderungen können das Erscheinungsbild der Website beeinträchtigen oder bestimmte JavaScript-Skripte beschädigen.

Performance und Last

Semanticality™ arbeitet schnell, aber Folgendes solltest Du beachten:

1. Regeln werden während des Renderings des Frontends angewendet, was bedeutet, dass sehr komplexe oder unnötige Selektoren die Anzeige verlangsamen können.
2. Je mehr Regeln in Global sind, desto höher ist die Last. Lösung: optimiere und fasse sie zusammen.
3. Wenn die Website Zehntausende von Seiten hat:
   • teste zuerst auf Staging,
   • konfiguriere das Seiten-Caching,
   • verwende das Plugin nur für das, was die Zugänglichkeit wirklich verbessert.

Kompatibilität und Einschränkungen

Semanticality™ ist mit den meisten Themes und Plugins kompatibel, es gibt jedoch einige Nuancen:

• Funktioniert nur mit Gutenberg / dem WordPress-Block-Editor.
• Unterstützt nicht: Elementor, Divi und andere visuelle Builder.
• Funktioniert mit Block-Themes und klassischen Themes. Selbst wenn der Block-Editor für einen Inhaltstyp deaktiviert ist, können Site-/Page-Regeln weiterhin klassisches Markup wie h1.entry-title ansprechen, solange irgendwo auf der Website Blöcke verwendet werden.
• Funktioniert mit Multisites, aber globale Regeln werden für jedes Netzwerk separat gespeichert. Jede Website-Instanz muss eine eigene Lizenz haben.
• Wiederverwendbare Blöcke und Patterns werden unterstützt, aber überprüfe die Live-Vorschau, da die Selektoren innerhalb solcher Blöcke instabil sein können.

Schnellstart

Um mit dem Semanticality™ Plugin zu starten, führe die folgenden Schritte aus:

1. Öffne einen Beitrag oder eine Seite im Editor. Semanticality™ arbeitet direkt während des Bearbeitungsprozesses von Blöcken. Um zu beginnen, öffne einen beliebigen Beitrag oder eine Seite im Gutenberg-Editor. Stelle sicher, dass das Plugin installiert und aktiviert ist und die Lizenz eingegeben wurde. Wenn ein Plugin-Update verfügbar ist, installiere es unbedingt.

2. Wähle den gewünschten Block aus. Sobald der Block ausgewählt ist, erscheint in der oberen Werkzeugleiste eine neue Schaltfläche „Semanticality™ Rules“ – dies ist der Zugang zum Regel-Editor.

   

3. Klicke auf die Schaltfläche „Semanticality™ Rules“. Ein modales Fenster mit dem Editor wird angezeigt, in dem Du Regeln hinzufügen und verwalten kannst.

   

4. Wähle den Tab aus:

   • (1) Local Block Rules – wenn Du Regeln nur für diesen spezifischen Block auf dieser spezifischen Seite erstellen möchtest.
   • (2) Global Block Rules – wenn Du möchtest, dass die Regel automatisch auf alle Blöcke dieses Typs auf der gesamten Website auf allen Seiten und Beiträgen angewendet wird.

   

5. Füge eine neue Regel hinzu. Klicke auf „+ Add Rule“, gib einen CSS-Selektor an, wähle eine Aktion (z. B. Tag oder Attribut ändern) und lege die Parameter fest.

   

6. Speichere die Regeln. Wenn Du lokal bearbeitest, werden die Regeln im Block gespeichert. Wenn Du global bearbeitest, werden die Regeln sofort auf alle Blöcke des entsprechenden Typs angewendet.

   

7. Veröffentliche oder aktualisiere den Beitrag. Dies ist ein obligatorischer Schritt für lokale Regeln: Solange der Beitrag nicht gespeichert ist, bleiben lokale Änderungen nur im Editor. Bei globalen Regeln ist das Speichern des Beitrags nicht erforderlich – sie werden sofort angewendet. Wende globale Regeln daher mit Vorsicht an.

Benutzeroberfläche des Semanticality™ Rules Editor

Der Semanticality™ Rules Editor ist ein leistungsstarkes Werkzeug zur Erstellung und Verwaltung von Regeln. In diesem Abschnitt werden wir seine Benutzeroberfläche und Funktionalität detailliert betrachten.

Überblick über die Benutzeroberfläche

Der Semanticality™ Rules Editor (Editor für semantische Regeln) ist ein separates Fenster, das sich über der WordPress-Gutenberg-Oberfläche öffnet.

Er hat mehrere Schlüsselbereiche:

• Die Tabs Lokal und Global, die es Dir ermöglichen, zwischen den Anwendungsebenen der Regeln zu wechseln.
• Die Schaltflächen Kopieren und Einfügen zum Arbeiten mit Regelsätzen. Mehrfachauswahl wird unterstützt: Du kannst mehrere Regeln gleichzeitig auswählen und kopieren.
• Die Liste der Regeln. Die Reihenfolge ist wichtig, daher wird das Ziehen und Ablegen mit der Maus unterstützt, um die Reihenfolge zu ändern. Untere Regeln können obere Regeln überschreiben.
• Die Schaltflächen Speichern und Schließen.
• Das rechte Panel Live Code Preview, das den Unterschied im HTML des Blocks vor und nach der Anwendung der Regeln zeigt.

Tastenkombinationen

Der Editor unterstützt Standard-Tastenkombinationen:

• Linksklick — wählt eine Regel aus.
• Shift+Klick — wählt einen Bereich von Regeln zum Kopieren aus.
• Cmd/Strg+C — kopiert die ausgewählten Regeln.
• Cmd/Strg+V — fügt Regeln ein.
• Entf / Rücktaste — löscht die ausgewählten Regeln.
• Cmd/Strg+Klick — fügt eine einzelne Regel zur Auswahl hinzu oder entfernt sie.

Diese Funktionen machen die Arbeit mit einer großen Anzahl von Regeln bequemer und schneller. Das Überschreiben dieser Kombinationen ist derzeit leider nicht möglich – dies wird in neuen Versionen des Plugins hinzugefügt.

Live Code Preview

Das integrierte Live Code Preview Panel auf der rechten Seite hilft Dir, sofort den Unterschied zwischen dem ursprünglichen HTML und dem resultierenden Code nach Anwendung der Regeln zu sehen. Dies ist besonders wichtig bei komplexen Szenarien: Du kannst sofort überprüfen, ob die Änderungen genau wie beabsichtigt funktionieren.

Sidebar „Site/Page Rules“

Zusätzlich zur Schaltfläche in der oberen Werkzeugleiste fügt Semanticality™ im rechten Inspector (Seitenleiste) des Gutenberg-Editors einen eigenen Bereich hinzu.

In diesem Bereich stehen zwei Regel-Ebenen zur Verfügung:

• Site Rules – Editor für seitenübergreifende Websites-Regeln. Diese Regeln:
  • werden in den Seiteneinstellungen gespeichert;
  • gelten für das gesamte HTML-Dokument (sowohl <head> als auch <body>, inklusive klassischer Theme-Markup und Wrapper);
  • bilden die Basis für Semantik und Zugänglichkeit auf allen Seiten.
• Page Rules – Editor für seitenspezifische Regeln. Diese Regeln:
  • sind an einen bestimmten Beitrag oder eine bestimmte Seite gebunden;
  • überschreiben Site Rules nur für die aktuelle Seite;
  • eignen sich für Landingpages oder Spezialvorlagen mit eigenen Semantik-Anforderungen.

Beide Editoren verwenden dieselbe komfortable RuleEditor-Oberfläche (Regelliste, Drag&Drop, Kopieren/Einfügen, Live Preview), arbeiten jedoch auf einer höheren Ebene als lokale und globale Block-Regeln.

Inhaltlich sind Site- und Global-Regeln ähnlich:

• beide werden in Seiteneinstellungen gespeichert und erfordern kein Speichern des aktuellen Beitrags;
• der Unterschied liegt im Geltungsbereich:
  • Site Rules wirken im Kontext des gesamten HTML (Head + Body);
  • Global Rules betreffen nur das HTML der Blöcke eines bestimmten Block-Typs.

Typischer Anwendungsfall:

• mit Site Rules definierst Du allgemeine Vorgaben (z. B. tabindex, ARIA-Attribute oder globale IDs);
• mit Page Rules passt Du diese Vorgaben für einzelne wichtige Seiten an;
• mit Global/Local-Regeln feinstimmst Du die Ausgabe auf Ebene einzelner Blöcke.

Funktionsweise und Funktionalität von Semanticality™

Semanticality™ fungiert als Zwischenschicht zwischen Gutenberg und dem finalen HTML. Jedes Mal, wenn ein Block gerendert wird, "geht" das Plugin seine Struktur durch und prüft, ob es Regeln für diesen Block gibt. Wenn ja, wird das HTML on-the-fly geändert.

Das Plugin basiert auf der Arbeit mit CSS-Selektoren. Dies ist eine gängige Methode, um anzugeben, welches Element geändert werden soll. Der Selektor wird automatisch in XPath konvertiert, um mit dem Dokumentenbaum arbeiten zu können.

Verfügbare Aktionen

• Tag ändern — Ersetzen des Tags eines Elements durch ein anderes (z. B. <div> → <section> oder <p> → <h3>). Dies ist besonders nützlich, um die Überschriftenhierarchie zu verbessern oder "bedeutungslose" Container in semantisch bedeutsame Elemente umzuwandeln.
• Attribut ändern — Arbeit mit Attributen. Es können neue hinzugefügt, bestehende ersetzt und unnötige gelöscht werden. Dies wird zum Beispiel für ARIA-Attribute, class, id, Mikrodaten usw. verwendet.

Anwendungsmodi des Selektors

• First (ähnlich wie querySelector) — Die Regel wird nur auf das erste gefundene Element innerhalb des Blocks angewendet.
• All (ähnlich wie querySelectorAll) — Die Regel wird auf alle Elemente angewendet, die dem Selektor entsprechen.

Einfügen eines Attributwerts:

Wähle zuerst das Attribut:

• CSS-Selektor — jeder gültige CSS-Selektor, einschließlich: .class, #id, div > p, figure img, a[href^="/"], :not(), :nth-child(), usw.

Wähle dann die Aktion:

• Hinzufügen / Ersetzen — schreibt den Wert vollständig und ersetzt den alten vollständig. Wenn das Attribut nicht existiert, wird es erstellt.
• Anhängen — fügt den Wert am Ende hinzu (für class – mit Leerzeichen, für style – mit Semikolon) nach dem bestehenden Wert.
• Voranfügen — fügt den Wert am Anfang des Attributs vor dem bestehenden Wert hinzu.
• Entfernen — entfernt das Attribut vollständig.

Und gib den Wert ein:

• Attributwert — der Textwert des Attributs. Variablen können verwendet werden (siehe unten).

Variablen in Attributwerten innerhalb von Regeln

Semanticality™ unterstützt dynamische Ersetzungen in Attributwerten. Dies ermöglicht die Erstellung eindeutiger IDs oder die Verwendung von Postdaten ohne manuelle Eingabe. Im Feld Attributwert können dynamische Platzhalter eingefügt werden:

• {post_title} — der Titel des aktuellen Beitrags aus der WordPress-Datenbank.
• {post_id} — die ID des Beitrags aus der WordPress-Datenbank.
• {meta_key} — der Wert eines benutzerdefinierten Meta-Feldes aus der WordPress-Datenbank. Beispiel: {meta_price}.
• {id_dein-label} — eine eindeutige Zufalls-ID während des Renderings des Blocks. Beispiel: {id_dein-label} → barrierenlos-abc123…, wobei dein-label ein beliebiger Text-Label ist, den Du festlegst, und abc123 eine zufällige Zeichenfolge. barrierenlos ist ein Präfix, um Konflikte mit anderen IDs auf der Seite zu vermeiden.

Diese Variablen sind besonders nützlich, z. B. für aria-labelledby / id-Verknüpfungen oder für Mikrodaten.

Regeltypen: lokale und globale

Das Verständnis der Unterschiede zwischen lokalen und globalen Regeln ist der Schlüssel zur korrekten Arbeit mit dem Plugin.

Lokale Regeln (Tab Local Block Rules)

Lokale Regeln werden direkt im Block gespeichert. Das bedeutet, dass sie nur für die jeweilige Instanz gelten. Wenn Du einen Block duplizierst, werden die Regeln mit ihm dupliziert.

• Werden in den Attributen des spezifischen Blocks gespeichert.
• Gelten nur für den aktuellen Block.
• Erfordern das Speichern des Beitrags. Wenn Du den Editor ohne Speichern schließt, gehen alle lokalen Änderungen verloren.

Wichtig: Wenn Du den gesamten Code des Beitrags kopierst (drei Punkte → Code-Editor) und ihn in einen anderen Beitrag einfügst, werden die lokalen Regeln zusammen mit den Blöcken übernommen – dies ist eine schnelle Methode, um Regeln der gesamten Seite zu übertragen. Zum Beispiel von einer Testversion in eine produktive.

Globale Regeln (Tab Global Block Rules)

Globale Regeln werden in den Website-Einstellungen gespeichert. Sie werden sofort auf alle Blöcke dieses Typs angewendet, nachdem die Einstellungen im Plugin gespeichert wurden.

• Werden in den Website-Optionen gespeichert.
• Gelten für alle Seiten und Beiträge. Werden auf alle Blöcke dieses Typs angewendet (einschließlich bereits veröffentlichter).
• Erfordern kein Speichern des aktuellen Beitrags – Änderungen treten sofort nach dem Speichern im Plugin in Kraft.

Praktisches Beispiel: Wenn Du möchtest, dass alle Bilder (core/image) auf der Website loading="lazy" haben, konfiguriere dies einmal über die globalen Regeln – und es funktioniert überall.

Prioritäten und Anwendungsreihenfolge von Regeln

Bei der Arbeit mit mehreren Regeln ist es wichtig zu verstehen, welche davon Priorität hat, um Konflikte und unerwünschte Effekte zu vermeiden.

1. Die Reihenfolge in der Liste ist wichtig. Regeln werden von oben nach unten angewendet. Wenn zwei Regeln dasselbe Element und dasselbe Attribut beeinflussen, wird der endgültige Wert durch die letzte Regel festgelegt. Das bedeutet, dass die „letzte Regel die Hauptregel“ ist.

2. Lokale Regeln haben Vorrang vor globalen Regeln. Wenn eine lokale Regel in Aktion, Selektor und Attribut mit einer globalen Regel übereinstimmt, überschreibt sie die globale Regel.

3. Übergeordnete und untergeordnete Blöcke. In der Vorschau werden bei Auswahl eines übergeordneten Elements die untergeordneten Elemente bereits mit den angewendeten lokalen Regeln angezeigt. Wenn Du im übergeordneten Block eine eigene Regel erstellst, hat diese Vorrang vor den Änderungen des untergeordneten Elements.

Kopieren/Einfügen von Regelsätzen

Im Semanticality™ Editor kannst Du Regelsätze im JSON-Format kopieren und einfügen. Dies ist praktisch für die Übertragung oder Sicherung.

1. Wähle die gewünschten Regeln aus. Verwende Shift+Klick zum Auswählen eines Bereichs oder Cmd/Strg+Klick zum Auswählen einzelner Regeln. Sobald Regeln ausgewählt sind, erscheint neben der Schaltfläche Kopieren eine Zahl, die die Anzahl der ausgewählten Regeln anzeigt.

   

2. Kopiere die Regeln. Drücke Cmd/Strg+C oder die Schaltfläche Kopieren, um die ausgewählten Regeln in die Zwischenablage zu kopieren – ein JSON-Paket wird in die Zwischenablage gelegt, zum Beispiel:

   {
     "type": "semanticality.rules",
     "version": 1,
     "scope": "local",
     "rules": [
       {
         "actionType": "modifyAttribute",
         "selector": "img",
         "selectorMode": "querySelectorAll",
         "attributeName": "loading",
         "insertionMode": "replace",
         "value": "lazy"
       }
     ]
   }

3. Füge die Regeln ein. Gehe zur gewünschten Stelle und drücke Cmd/Strg+V oder die Schaltfläche Einfügen, um die Regeln aus der Zwischenablage einzufügen.

Auf diese Weise kannst Du Regeln einfach zwischen verschiedenen Beiträgen oder Websites übertragen. Da lokale Regeln in den Attributen der Blöcke gespeichert werden, werden sie beim Kopieren des Beitragscodes zusammen mit den Blöcken übertragen. Das heißt, Du kannst den gesamten Beitragscode (drei Punkte → Code-Editor) kopieren und in einen anderen Beitrag einfügen – die lokalen Regeln werden zusammen mit den Blöcken übernommen.

Du kannst sogar Regeln automatisch im JSON-Format über einen Chat (z. B. ChatGPT) generieren und in den Editor einfügen.

Besonderheiten beim Kopieren/Einfügen

• Einfügen fügt aus der Zwischenablage ein. Wenn das Format nicht erkannt wird, erscheint ein Hinweis zum manuellen Einfügen (im modalen Feld).
• Beim Einfügen werden die Regeln als aktuelle Registerkarte gekennzeichnet (lokal oder global).
• Ungültige Elemente werden mit einer Benachrichtigung ignoriert.

Verhalten des Plugins bei der Arbeit mit wiederverwendbaren Blöcken und Patterns

Wiederverwendbare Blöcke und Patterns in Gutenberg ermöglichen die wiederholte Verwendung von Blocksets auf verschiedenen Seiten. Semanticality™ unterstützt die Arbeit mit solchen Blöcken, es gibt jedoch einige wichtige Besonderheiten zu beachten:

1. Lokale Regeln in wiederverwendbaren Blöcken: Lokale Regeln, die innerhalb eines wiederverwendbaren Blocks erstellt wurden, werden auf alle Instanzen dieses Blocks auf allen Seiten angewendet, auf denen er verwendet wird. Das bedeutet, wenn Du die lokalen Regeln in einem wiederverwendbaren Block änderst, werden diese Änderungen überall dort sichtbar, wo dieser Block eingefügt ist.
2. Globale Regeln: Globale Regeln, die für Blöcke innerhalb von wiederverwendbaren Blöcken erstellt wurden, funktionieren genauso wie für normale Blöcke. Sie werden auf alle Instanzen der entsprechenden Blöcke auf der Website angewendet.
3. Bearbeiten von wiederverwendbaren Blöcken: Stelle beim Bearbeiten eines wiederverwendbaren Blocks in einem separaten Fenster sicher, dass Du die Änderungen speicherst, damit die lokalen Regeln aktualisiert werden. Nach dem Speichern des wiederverwendbaren Blocks erhalten alle Seiten, auf denen er verwendet wird, automatisch die aktualisierten Regeln.
4. Bearbeiten eines wiederverwendbaren Blocks auf einer Seite: Bei Auswahl eines wiederverwendbaren Blocks auf einer Seite werden die für diesen Block erstellten lokalen Regeln als bereits angewendet angezeigt und das Bearbeitungsfenster für Regeln bleibt leer. In der Live-Code-Vorschau siehst Du bereits die Änderungen, die durch die lokalen Regeln des wiederverwendbaren Blocks bei dessen Erstellung in einem separaten Fenster vorgenommen wurden. Auf der Beitragsbearbeitungsseite kannst Du neue lokale Regeln hinzufügen, die direkt auf diese Instanz des wiederverwendbaren Blocks angewendet werden.
5. Patterns: Patterns (Muster) in Gutenberg sind vordefinierte Blocksets. Semanticality™ funktioniert mit Blöcken innerhalb von Patterns genauso wie mit normalen Blöcken. Lokale Regeln, die innerhalb eines Patterns erstellt wurden, werden nur auf jene Instanzen des Patterns angewendet, die auf der Seite eingefügt wurden.

Auf diese Weise kannst Du Semanticality™ nutzen, um die Semantik und Zugänglichkeit sowohl in wiederverwendbaren Blöcken als auch in Patterns zu verbessern und so eine einheitliche und bequeme Verwaltung der Regeln auf der gesamten Website zu gewährleisten.

Mit wiederverwendbaren Blöcken kannst Du lokale Regeln für alle Seiten, auf denen dieser Block verwendet wird, global machen. Dies ist besonders nützlich für häufig verwendete Komponenten wie Akkordeons, Tabs, Schaltflächen usw.

Die wichtigsten Punkte bei der Arbeit mit dem Plugin

Hier ist eine Zusammenfassung der wichtigsten Punkte, die Du bei der Arbeit mit Semanticality™ beachten solltest:

• Die letzte (unten in der Liste) Regel für dasselbe Attribut ist die wichtigste.
• Auswahl von Regeln: Shift — Bereich, Cmd/Strg — Hinzufügen/Entfernen, Tastenkombinationen funktionieren.
• Die Vorschau des übergeordneten Elements zeigt die untergeordneten Elemente unter Berücksichtigung ihrer Regeln; im übergeordneten Element können sie überschrieben werden.
• Wenn Du den Editor ohne Speichern des Beitrags schließt, werden die lokalen Regeln zurückgesetzt.
• Globale Regeln werden überall sofort angewendet — auch ohne Speichern des Beitrags.
• Eine sehr große Anzahl lokaler Regeln kann den Editor merklich belasten.
• Das Kopieren des Beitragscodes überträgt auch lokale Regeln — praktisch für Migrationen/Tests.
• Nach dem Speichern der Regeln erstellt die Live Preview die Basis neu und zeigt den Unterschied zum neuen Zustand an.
• Vergiss niemals, Änderungen auf einer Staging- oder lokalen Version der Website zu testen – dafür brauchst Du keine separate Lizenz.

Die häufigsten Anwendungsfälle

Hier sind einige gängige Szenarien und wie Du sie mit Semanticality™ implementieren kannst:

• Tag ersetzen: Change Tag → CSS Selector → New Tag Name.
• Klasse hinzufügen: Modify Attribute → class → Append → my-class.
• Rolle entfernen: Modify Attribute → role → Remove.
• Erstes/Alle Elemente: Mode = First / All.
• ID + ARIA: auf Überschrift id: {id_title}, auf Schaltfläche aria-labelledby: {id_title}.

Die häufigsten Fehler

Einige Fehler können dazu führen, dass Regeln nicht wie erwartet funktionieren. Hier sind einige Dinge, auf die Du achten solltest:

• Leerer Selektor → die Regel wird nicht ausgeführt.
• Nicht existierendes Attribut + Append/Prepend → das Plugin erstellt das Attribut korrekt (zusammen mit dem Trennzeichen), aber überprüfe, ob dies wirklich notwendig ist.
• Zu allgemeiner Selektor in Global (z. B. *) kann viele Stellen betreffen. Begrenze den Bereich.

Tipps zur Fehlerbehebung

Wenn etwas schiefgegangen ist, hier ein paar Tipps zur Fehlerbehebung:

1. Zuerst – lokal. Überprüfe die Regel an einem Block, dann übertrage sie in die globalen Regeln.
2. Schau Dir die Live Preview an. Dort siehst Du sofort, welche Zeile hinzugefügt/geändert/gelöscht wurde.
3. Verwende Variablen ({post_title}, {meta_*}, {id_*}) – das ist praktisch und erspart Dir manuelle IDs.
4. Scheue Dich nicht vor komplexen Selektoren, aber vermeide „redundante“ – sie sind schwerer zu lesen und zu pflegen.

Praktische Szenarien (Kadence + Core)

Dieser Abschnitt enthält Beispiele für reale Aufgaben und Lösungen. Jedes Beispiel ist als Regelsatz formuliert, den Du im Editor festlegen kannst. Verwende sie zum Testen im lokalen Tab und übertrage sie bei Bedarf in den globalen Tab.

Kadence Akkordeon → semantische Liste

Block: kadence/accordion und untergeordnete kadence/pane. Ziel: Das Akkordeon soll als semantische Liste mit Überschriften wahrgenommen werden, um die Zugänglichkeit und die Wahrnehmung des Inhalts zu verbessern und die Anforderungen des WCAG 2.2 Kriteriums 1.3.1 „Info und Beziehungen“ zu erfüllen. Dazu ist Folgendes erforderlich:

1. Für kadence/accordion global:

   • div.kt-accordion-inner-wrap durch <ul> ersetzen.
   • div.wp-block-kadence-pane durch <li> ersetzen.
   • Attribut aria-label="FAQ - Frequently Asked Questions" zu .kt-accordion-header-wrap hinzufügen.

2. Für kadence/pane:

   • .kt-accordion-header-wrap durch <h3> ersetzen.

Ergebnis: Screenreader nehmen das Akkordeon als Liste von Abschnitten mit Überschriften wahr, was die Zugänglichkeit erheblich verbessert. So können wir dies mit dem Semanticality™ Regel-Editor erreichen:

Für kadence/accordion (global)

Zuerst erstellen wir drei globale Regeln für kadence/accordion. Wir machen sie sofort global, damit diese Regeln auf alle Instanzen dieses Blocks auf der gesamten Website angewendet werden und wir keine neuen Regeln für jede Instanz erstellen müssen.

1. Erstelle eine Regel mit der Aktion "Tag ändern"

• CSS-Selektor: div.kt-accordion-inner-wrap
• Modus: First
• Neuer Tag-Name: ul

2. Erstelle eine Regel mit der Aktion "Tag ändern"

• CSS-Selektor: div.wp-block-kadence-pane
• Modus: All
• Neuer Tag-Name: li

3. Erstelle eine Regel mit der Aktion "Attribut ändern"

• CSS-Selektor: .kt-accordion-header-wrap
• Modus: First
• Attributname: aria-label
• Einfügung: Hinzufügen / Ersetzen
• Attributname: aria-label
• Wert: FAQ - Frequently Asked Questions

Jetzt sind alle kadence/accordion Listen und enthalten li-Elemente. Außerdem haben wir das Attribut aria-label hinzugefügt, um Screenreadern mitzuteilen, dass es sich um ein Akkordeon mit Fragen und Antworten handelt.

Für kadence/pane (global)

Als Nächstes legen wir Regeln für kadence/pane fest. Auch hier machen wir sie global, damit diese Regeln auf alle Instanzen dieses Blocks auf der Website angewendet werden und wir nicht für jede Instanz neue Regeln erstellen müssen.

1. Erstelle eine Regel mit der Aktion "Tag ändern"

• CSS-Selektor: .kt-accordion-header-wrap
• Modus: First
• Neuer Tag-Name: h3

Jetzt sind alle Überschriften in kadence/pane Überschriften der dritten Ebene, und Benutzer von Screenreadern können sich schnell in der Inhaltsstruktur über das Überschriftenmenü orientieren.

Kadence InfoBox: Überschrift und Text vertauschen

Block: kadence/infobox Ziel: Überschrift und Text vertauschen, sodass der Text in <h3> und die Überschrift in <p> steht. Dies verbessert die Überschriftenhierarchie auf der Seite und macht den Inhalt logischer und erfüllt die Anforderungen von WCAG 2.2 2.4.10 "Abschnitts-Überschriften".

1. Erstelle eine Regel mit der Aktion "Tag ändern"

• Selektor: .kt-blocks-info-box-title
• Neuer Tag-Name: p

2. Erstelle eine Regel mit der Aktion "Tag ändern"

• Selektor: p.kt-blocks-info-box-text
• Neuer Tag-Name: h3

Core Image: <figure>/<figcaption> ersetzen

Block: core/image Ziel: In diesem Szenario ersetzen wir semantische Elemente durch einfachere, um die HTML-Struktur zu vereinfachen. Es ist nicht immer notwendig, <figure>-Elemente zu verwenden, wenn im Text nicht auf sie verwiesen wird oder wenn sie keinen signifikanten Inhalt enthalten.

1. Erstelle eine Regel mit der Aktion "Tag ändern"

• Selektor: figure
• Neuer Tag-Name: div

2. Erstelle eine Regel mit der Aktion "Tag ändern"

• Selektor: figcaption
• Modus: All
• Neuer Tag-Name: small

3. Erstelle eine Regel mit der Aktion "Attribut ändern"

• Selektor: small
• Attr: id
• Einfügung: Hinzufügen / Ersetzen
• Wert: {id_figure_caption}

Füge das Attribut id zur Beschriftung hinzu, um sie mit anderen Blöcken verknüpfen zu können.

4. Erstelle eine Regel mit der Aktion "Attribut ändern"

• Selektor: img
• Attr: aria-describedby
• Einfügung: Hinzufügen / Ersetzen
• Wert: {id_figure_caption}

Mit dieser Regel fügen wir das Attribut aria-describedby zum Bild hinzu, um es mit der Bildunterschrift zu verknüpfen. Dies verbessert die Zugänglichkeit, da Screenreader die Bildunterschrift zusammen mit dem Bild vorlesen können.

Automatische IDs und Verknüpfungen für „Mehr erfahren“-Buttons

Für Karten:

1. Attribut ändern

• Selektor: .card-title
• Attr: id
• Wert: {id_card_title}

2. Attribut ändern

• Selektor: .card-readmore
• Attr: aria-labelledby
• Wert: {id_card_title}

Mikrodaten für Zitate

Block: core/quote

1. Attribut ändern

• Selektor: blockquote
• Attr: itemtype
• Wert: https://schema.org/Quotation

2. Attribut ändern

• Selektor: blockquote
• Attr: itemscope
• Wert: (leer lassen – das Vorhandensein des Attributs aktiviert den Scope bereits)

Fazit

In diesem Handbuch haben wir gelernt, wie Du den Semanticality™ Editor verwendest, um Regeln für die Inhaltskonvertierung in Kadence-Blöcken zu erstellen und zu bearbeiten. Wir haben die grundlegenden Konzepte wie Selektoren, Aktionen und Attribute besprochen und Beispiele für die Verwendung von Variablen und vorgefertigten Vorlagen gegeben.

Jetzt kannst Du dieses Wissen anwenden, um die Zugänglichkeit und Semantik Deiner Inhalte zu verbessern sowie die Arbeit mit Blöcken im Gutenberg-Editor zu optimieren.

Wenn Du weitere Fragen hast oder Hilfe benötigst, zögere nicht, uns per E-Mail an den Support zu kontaktieren, falls Du eine entsprechende Lizenz besitzt.

Mit freundlichen Grüßen,

Dein Semanticality™ Support-Team

semanticality@barrierenlos.com

FAQ - Häufig gestellte Fragen

Was passiert, wenn ich sehr viele Regeln hinzufüge?

Der Editor wird langsamer arbeiten, da jede Regel die Vorschau neu rendert. Für eine spürbare Verlangsamung ist jedoch eine wirklich sehr große Anzahl von Regeln erforderlich.

Aus Sicht des End-Renderings für den Client erhöht die Anzahl der Regeln die Serverlast, da der Server beim Rendern der Website nicht nur den Inhalt verarbeitet, sondern auch alle Regeln auf jedes Element anwendet. Dies sollte jedoch keine Probleme verursachen, wenn der Server leistungsstark genug ist.

Kann eine globale Regel durch eine lokale Regel überschrieben werden?

Ja. Lokale Regeln haben immer Vorrang vor globalen Regeln, wenn Aktion, Selektor und Attribut übereinstimmen.

Was bedeutet „die letzte Regel ist die wichtigste“?

Die Anwendungsreihenfolge ist von oben nach unten. Wenn mehrere Regeln ein Attribut beeinflussen, wird das Ergebnis durch die unterste Regel in der Liste bestimmt.

Was geschieht mit lokalen Regeln, wenn ich das Fenster schließe, ohne den Beitrag zu speichern?

Lokale Regeln gehen verloren, da sie nur zusammen mit dem Beitrag gespeichert werden.

Was geschieht mit globalen Regeln, wenn ich das Fenster schließe, ohne den Beitrag zu speichern?

Globale Regeln werden sofort in den Website-Optionen gespeichert und treten ohne Speichern des Beitrags in Kraft.

Kann ich Regeln auf eine andere Website oder einen anderen Beitrag übertragen?

Ja. Kopiere den Code des Beitrags im Modus „Code-Editor“ und füge ihn in einen anderen Beitrag ein. Alle lokalen Regeln werden automatisch übertragen.

Wie funktioniert die Vorschau in übergeordneten Blöcken?

Der übergeordnete Block zeigt untergeordnete Elemente bereits mit den auf sie angewendeten lokalen Regeln an. Im übergeordneten Block kannst Du diese Änderungen überschreiben – und sie haben dann Vorrang.

Wie arbeite ich mit der Auswahl und den Tastenkombinationen?

Du kannst mehrere Regeln auswählen, kopieren (Strg+C), einfügen (Strg+V) oder löschen (Entf). Mehrfachauswahl (über Shift oder Strg/Cmd) wird unterstützt.

Was passiert nach dem Speichern der Regeln?

Die Live Preview wird neu aufgebaut und zeigt die Änderungen im Verhältnis zum neuen Zustand des Blocks an. Das kann wie eine „schrittweise“ Aktualisierung aussehen – das ist normal.

Gibt es eine mobile Version des Editors?

Noch nicht, aber sie ist in der Entwicklungsplanung.

Kann man Regeln über einen ChatGPT generieren?

Ja. Beschreibe die Regeln im JSON-Format, und der Chat kann einen fertigen Block vorbereiten. Später wird diese Funktion in das Plugin selbst integriert.