Sie sehen sich Hilfeinhalte der folgenden Version an:

AEM unterstützt beides:

  • Standardmäßige Funktionen zur Barrierefreiheit, einschließlich Alternativtext für Bilder
  • sowie zusätzliche Funktionen, auf die bei der Erstellung von Inhalt mit Komponenten zugegriffen werden kann, die den Rich-Text-Editor (RTE) verwenden.

Hinweis:

Siehe auch

Inhaltsautoren können Funktionen von RTE verwenden, um beim Hinzufügen von Inhalten zu einer Seite Informationen zur Barrierefreiheit bereitzustellen. Dies kann das Hinzufügen struktureller Informationen durch Überschriften und Absatzelemente umfassen.

Sie können diese Funktionen durch die Konfiguration von RTE-Plug-ins zur Komponente konfigurieren und anpassen. Zum Beispiel ermöglicht Ihnen das Plug-in paraformat das Hinzufügen von semantischen Blockebenenelementen, einschließlich der Erweiterung der Zahl von Überschriftenebenen, die über die standardmäßigen Ebenen H1, H2 und H3 hinausgeht.

RTE ist in einer Vielzahl von Komponenten sowohl über die Touch-optimierte als auch die klassische Benutzeroberfläche verfügbar. Die primäre Komponente zur Verwendung von RTE ist die Textkomponente.

Die Textkomponente in AEM ist sowohl für die Touch-optimierte als auch für die klassische Benutzeroberfläche verfügbar. Auf den folgenden Bildern wird der Rich-Text-Editor mit einer Reihe von Plug-ins aktiviert, einschließlich paraformat:

  • Die Textkomponente in der Touch-optimierten Benutzeroberfläche:

    Textkomponente (RTE) im Vollbildmodus in der Touch-optimierten Benutzeroberfläche
  • Die Textkomponente in der klassischen Benutzeroberfläche:

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

Hinweis:

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

Konfigurieren der Plug-in-Funktionen

Die vollständigen Anweisungen zum Konfigurieren des RTE sind auf der Seite Konfigurieren des Rich-Text-Editors verfügbar. Dies deckt alles ab, einschließlich der wichtigen Schritte:

Durch das Konfigurieren eines Plug-ins innerhalb des entsprechenden rtePlugins-Unterzweigs in CRXDE Lite (siehe folgendes Bild) können Sie entweder alle oder spezifische Funktionen für das Plug-in aktivieren.  

Beispiel für ein rtePlugin in CRXDE Lite

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

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

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

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

    • Mithilfe des Absatzsymbols (Pilcrow-Zeichen) in der Touch-optimierten Benutzeroberfläche:
    Absatzsymbol (Pilcrow-Zeichen)
    • Mithilfe des Formatfelds (Dropdown-Auswahl) in der klassischen Benutzeroberfläche.

Mit Strukturelementen, die im RTE über die Absatzformatoptionen verfügbar sind, stellt AEM eine gute Grundlage für die Entwicklung barrierefreier Inhalte bereit. 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 entsprechende Strukturelemente wie Überschriften auswählen und über die Option „Arten“ ausgewählte globale Formatarten verwenden. Dies sorgt für ein sauberes Markup, mehr Optionen für Benutzer, die die Suche mit ihren eigenen Formatvorlagen durchführen, sowie korrekt strukturierte Inhalte.

Verwenden der Funktion „Quellenbearbeitung“

In einigen Fällen halten Inhaltsautoren es für erforderlich, den mithilfe des RTE erstellten HTML-Quellcode zu untersuchen und anzupassen. So kann beispielsweise ein innerhalb des RTE erstellter Inhalt ein zusätzliches Markup erfordern, um Compliance mit WCAG 2.0 sicherzustellen. Dies lässt sich mit der Option Quellenbearbeitung des RTE umsetzen. Sie können die Funktion sourceedit im Plug-in misctools angeben.

Vorsicht:

Die Funktion sourceedit:

  • Ist nur in der klassischen Benutzeroberfläche verfügbar und wird in der Touch-optimierten Benutzeroberfläche nicht unterstützt.
  • Muss sehr sorgfältig gehandhabt werden; Tippfehler und/oder Versuche, nicht vom RTE unterstützte Funktionen einzuführen, können zusätzliche Probleme hervorrufen.

Hinzufügen von Unterstützung für zusätzliche 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 eingestellt sein muss (d. h. den Namen des DOM-Attributs), damit sein Inhalt automatisch verarbeitet wird.

Unter Tabelle müssen Sie das Attribut explizit zum/vom DOM-Element festlegen/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 Browserimplementierungen zu vermeiden.

Hinweis:

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

Schritt-für-Schritt-Anweisungen

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

  2. Kopieren Sie:
        /libs/cq/ui/widgets/source/widgets/form/rte/commands/Table.js
    nach:
        /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
    nach:
        /apps/cq/ui/widgets/source/widgets/form/rte/plugins/TablePropertiesDialog.js.

  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.

  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 beliebige ExtJS-Widget, das den Wert der Beschriftung durch seine getValue()-Methode bereitstellt, könnte 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).

Dieses Werk unterliegt den Bedingungen der Creative Commons Attribution-Noncommercial-Share Alike 3.0 Unported License.  Twitter™- und Facebook-Beiträge fallen nicht unter die Bedingungen der Creative Commons-Lizenz.

Rechtliche Hinweise   |   Online-Datenschutzrichtlinie