Konfigurieren von RTE für die Erstellung zugriffsbereiter Sites

Letzte Aktualisierung: 2023-05-04
  • Erstellt für:
  • Admin
VORSICHT

AEM 6.4 hat das Ende der erweiterten Unterstützung erreicht und diese Dokumentation wird nicht mehr aktualisiert. Weitere Informationen finden Sie in unserer technische Unterstützung. Unterstützte Versionen suchen here.

AEM unterstützt beide:

  • Standardmäßige Barrierefreiheitsfunktionen, einschließlich Alternativtext für Bilder
  • sowie zusätzliche Funktionen, auf die beim Erstellen von Inhalten mit Komponenten zugegriffen werden kann, die den Rich-Text-Editor (RTE) verwenden

Inhaltsautoren können Funktionen des RTE verwenden, um beim Hinzufügen von Inhalten zu einer Seite barrierefreie Informationen bereitzustellen. Dazu kann das Hinzufügen von Strukturinformationen über Überschriften und Absatzelemente gehören.

Sie können Konfigurieren und Anpassen dieser Funktionen durch Konfigurieren von RTE-Plug-ins für die Komponente. Beispiel: die paraformat -Plug-in ermöglicht es Ihnen, zusätzliche semantische Blockebenenelemente hinzuzufügen, einschließlich der Erweiterung der Anzahl der unterstützten Überschriftenebenen über die einfache H1, H2 und H3 standardmäßig bereitgestellt.

Der RTE ist in verschiedenen Komponenten sowohl der Touch-optimierten als auch der klassischen Benutzeroberfläche verfügbar. Die primäre Komponente für die Verwendung des RTE ist jedoch die Text -Komponente.

Die Text -Komponente in AEM ist sowohl für die Touch-optimierte als auch für die klassische Benutzeroberfläche verfügbar. Die folgenden Abbildungen zeigen den Rich-Text-Editor mit einer Reihe von aktivierten Plug-ins, darunter paraformat:

  • Die Text Komponente in der Touch-optimierten Benutzeroberfläche:

    Textkomponente (RTE) im Vollbildmodus in der Touch-optimierten Benutzeroberfläche.

  • Die Text -Komponente in der klassischen Benutzeroberfläche:

    Bearbeitungsdialogfeld (RTE) der Textkomponente in der klassischen Benutzeroberfläche.

HINWEIS

Es gibt Unterschiede zwischen den in der klassischen und der Touch-optimierten Benutzeroberfläche verfügbaren RTE-Funktionen. Weitere Informationen finden Sie unter

Konfigurieren der Plugin-Funktionen

Vollständige Anweisungen zur Konfiguration des RTE finden Sie im Abschnitt Konfigurieren des Rich-Text-Editors Seite. Dies deckt alles ab, einschließlich der wichtigen Schritte:

Durch Konfiguration eines Plug-ins in der entsprechenden rtePlugins in der CRXDE Lite (siehe folgende Abbildung), können Sie entweder alle oder bestimmte Funktionen für dieses Plug-in aktivieren.

Beispiel für ein rtePlugin in CRXDE Lite

Beispiel - Angeben von im RTE-Auswahlfeld verfügbaren Absatzformaten

Neue semantische Blockformate können wie folgt zur Auswahl bereitgestellt werden:

  1. Legen Sie den Konfigurationsspeicherort abhängig von Ihrem RTE fest und navigieren Sie dorthin.

  2. Absatzauswahlfeld aktivieren; von Aktivieren des Plug-ins.

  3. Geben Sie die Formate an, die im Absatzauswahlfeld verfügbar sein sollen.

  4. Die Absatzformate sind dann für den Autor der Inhalte aus den Auswahlfeldern im RTE verfügbar. Auf sie kann wie folgt zugegriffen werden:

    • Verwenden des Absatzes (Pilcrow) in der Touch-optimierten Benutzeroberfläche:

    Symbol "Absatz"(Pilcrow).

    • Verwenden der Format -Feld (Dropdown-Auswahl) in der klassischen Benutzeroberfläche.

Mit Strukturelementen, die im RTE über die Absatzformatoptionen verfügbar sind, bietet AEM eine gute Grundlage für die Entwicklung barrierefreier Inhalte. Inhaltsautoren können den RTE für die Formatierung der Schriftgröße, der Farben oder anderer verwandter Attribute verwenden und dadurch die Erstellung einer Inline-Formatierung verhindern. Stattdessen müssen sie die entsprechenden Strukturelemente wie Überschriften auswählen und globale Stile verwenden, die über die Option Stile ausgewählt wurden. Dadurch wird das Markup bereinigt, Benutzer, die mit ihren eigenen Stylesheets navigieren, erhalten bessere Optionen und korrekt strukturierte Inhalte.

Verwenden der Funktion „Quellenbearbeitung“

In einigen Fällen halten Inhaltsautoren es für erforderlich, den mithilfe des RTE erstellten HTML-Quell-Code zu untersuchen und anzupassen. Beispielsweise kann ein innerhalb des RTE erstellter Inhalt zusätzliches Markup erfordern, um die Einhaltung von WCAG 2.0 sicherzustellen. Dies kann mit dem Quellbearbeitung -Option des RTE. Sie können die Funktion sourceedit im Plug-in misctools angeben.

VORSICHT

Gehen Sie beim Verwenden der Funktion sourceedit sorgfältig vor. Tippfehler und/oder nicht unterstützte Funktionen können zusätzliche Probleme hervorrufen.

Hinzufügen der Unterstützung für weitere HTML-Elemente und -Attribute

Um die Barrierefreiheitsfunktionen von AEM weiter auszubauen, ist es möglich, die vorhandenen Komponenten basierend auf dem RTE (wie die Komponenten Text und Tabelle) um zusätzliche Elemente und Attribute zu erweitern.

Die folgende Vorgehensweise stellt dar, wie die Komponente Tabelle mit einem Element Beschriftung erweitert werden kann, das Informationen zu einer Datentabelle für Benutzer von Hilfstechnologie bereitstellt:

Beispiel: Hinzufügen der Beschriftung zum Dialogfeld "Tabelleneigenschaften"

Fügen Sie im Konstruktor von TablePropertiesDialog ein zusätzliches Texteingabefeld hinzu, dass für die Bearbeitung der Beschriftung verwendet wird. Beachten Sie, dass itemId auf caption festgelegt sein muss (d. h. den Namen des DOM-Attributs), damit sein Inhalt automatisch verarbeitet wird.

In Verzeichnis Sie müssen das Attribut explizit auf/aus dem DOM-Element setzen oder entfernen. Der Wert wird vom Dialogfeld im config-Objekt weitergegeben. Beachten Sie, dass DOM-Attribute mithilfe der entsprechenden CQ.form.rte.Common-Methoden (com ist kurz für CQ.form.rte.Common) festgelegt/entfernt werden sollten, um die üblichen Fallstricke bei Browser-Implementierungen zu vermeiden.

HINWEIS

Dieses Verfahren eignet sich nur für die klassische Benutzeroberfläche.

Schrittweise Anleitungen

  1. Starten Sie die CRXDE Lite. Beispiel: http://localhost:4502/crx/de/

  2. Kopieren Sie:

    /libs/cq/ui/widgets/source/widgets/form/rte/commands/Table.js

    in:

    /apps/cq/ui/widgets/source/widgets/form/rte/commands/Table.js

    HINWEIS

    Sie müssen Zwischenordner erstellen, falls diese nicht bereits vorhanden sind.

  3. Kopieren Sie:

    /libs/cq/ui/widgets/source/widgets/form/rte/plugins/TablePropertiesDialog.js

    in:

    /apps/cq/ui/widgets/source/widgets/form/rte/plugins/TablePropertiesDialog.js möglich.

  4. Öffnen Sie die folgende Datei zur Bearbeitung (durch Doppelklicken öffnen):

    /apps/cq/ui/widgets/source/widgets/form/rte/plugins/TablePropertiesDialog.js

  5. In der constructor-Methode, vor dem Lesen der Zeilen:

    var dialogRef = this;
    

    Fügen Sie den folgenden Code hinzu:

    editItems.push({
        "itemId": "caption",
        "name": "caption",
        "xtype": "textfield",
        "fieldLabel": CQ.I18n.getMessage("Caption"),
        "value": (this.table && this.table.caption ? this.table.caption.textContent : "")
    });
    
  6. Öffnen Sie die folgende Datei:

    /apps/cq/ui/widgets/source/widgets/form/rte/commands/Table.js möglich.

  7. Fügen Sie den folgenden Code am Ende der transferConfigToTable-Methode hinzu:

    /**
     * Adds Caption Element
    */
    var captionElement;
    if (dom.firstChild && dom.firstChild.tagName.toLowerCase() == "caption")
    {
       captionElement = dom.firstChild;
    }
    if (config.caption)
    {
        var captionTextNode = document.createTextNode(config.caption)
        if (captionElement)
        {
           dom.replaceNode(captionElement.firstChild,captionTextNode);
        } else
        {
            captionElement = document.createElement("caption");
            captionElement.appendChild(captionTextNode);
            if (dom.childNodes.length>0)
            {
               dom.insertBefore(captionElement, dom.firstChild);
            } else
            {
               dom.appendChild(captionElement);
            }
        }
    } else if (captionElement)
    {
      dom.removeChild(captionElement);
    }
    
  8. Speichern Sie Ihre Änderungen mithilfe von Alle speichern

HINWEIS

Ein „Nur Text“-Feld ist die einzige zulässige Eingabeart für den Wert des „caption“-Elements. Jedes ExtJS-Widget, das den Wert der Beschriftung durch seine getValue() -Methode verwendet werden.

Um Bearbeitungsfunktionen für weitere Elemente und Attribute hinzuzufügen, stellen Sie sicher, dass sowohl:

  • Die itemId-Eigenschaft zu jedem entsprechenden Feld auf den Namen des entsprechenden DOM-Attributs (TablePropertiesDialog) eingestellt ist.
  • Das Attribut explizit für das DOM-Element festgelegt und/oder entfernt wird (Table).

Auf dieser Seite