Configurazione dell'editor Rich Text per la produzione di siti accessibili

AEM supporta entrambi:

  • funzioni di accessibilità standard, compreso il testo alternativo per le immagini
  • nonché funzioni aggiuntive a cui è possibile accedere durante la creazione di contenuti con componenti che utilizzano l’editor Rich Text (Rich Text Editor)

Gli autori dei contenuti possono utilizzare le funzioni dell’editor Rich Text per fornire informazioni di accessibilità durante l’aggiunta di contenuti a una pagina. Ciò può includere l'aggiunta di informazioni strutturali tramite titoli ed elementi paragrafo.

È possibile configurare e personalizzare queste funzioni configurando i plug-in RTE per il componente. Ad esempio, il plug-in paraformat consente di aggiungere elementi semantici a livello di blocco aggiuntivi, inclusa l'estensione del numero di livelli di intestazione supportati oltre i livelli di base H1, H2 e H3 forniti per impostazione predefinita.

L’editor Rich Text è disponibile in diversi componenti sia dall’interfaccia touch che dall’interfaccia classica. Tuttavia, il componente principale per l’utilizzo dell’editor Rich Text è il componente Text.

Il componente Testo in AEM è disponibile sia per le interfacce touch che per quelle classiche. Le immagini seguenti mostrano l'editor Rich Text con una serie di plug-in abilitati, tra cui paraformat:

  • Il componente Testo nell'interfaccia touch:

    Componente testo (RTE) in modalità a schermo intero nell’interfaccia touch.

  • Il componente Testo nell'interfaccia classica:

    Finestra di dialogo di modifica (RTE) del componente di testo nell’interfaccia classica.

NOTA

Esistono differenze tra le funzioni dell’editor Rich Text disponibili nell’interfaccia classica e quella touch. Per maggiori dettagli vedi

Configurazione delle funzioni plug-in

Le istruzioni complete sulla configurazione dell'editor Rich Text sono disponibili nella pagina Configuring the Rich Text Editor. Vengono trattati tutti i problemi, compresi i passi chiave:

Configurando un plug-in all'interno del sottoramo rtePlugins appropriato nel CRXDE Lite (vedere l'immagine seguente), potete attivare tutte le funzioni o specifiche per quel plug-in.

CRXDE Lite che mostra un esempio rtePlugin.

Esempio - Specifica dei formati di paragrafo disponibili nel campo di selezione dell'editor Rich Text

Nuovi formati di blocco semantico possono essere resi disponibili per la selezione tramite:

  1. A seconda dell'editor Rich Text, determinare e passare alla posizione di configurazione.

  2. Attiva il campo di selezione Paragrafi; attivando il plug-in.

  3. Specificare i formati che si desidera rendere disponibili nel campo di selezione Paragrafi.

  4. I formati di paragrafo sono quindi disponibili per l’autore del contenuto dai campi di selezione nell’editor Rich Text. È possibile accedervi:

    • Utilizzo dell'icona paragrafo (pilcrow) nell'interfaccia touch:

    Icona Paragrafo (cuscino).

    • Utilizzo del campo Formato (selettore a discesa) nell'interfaccia classica.

Con gli elementi strutturali disponibili nell’editor Rich Text tramite le opzioni di formato del paragrafo, AEM fornisce una buona base per lo sviluppo di contenuto accessibile. Gli autori dei contenuti non possono utilizzare l’editor Rich Text per formattare la dimensione del font o i colori o altri attributi correlati, impedendo la creazione di formattazione in linea. Devono invece selezionare gli elementi strutturali appropriati, ad esempio le intestazioni, e utilizzare gli stili globali scelti dall'opzione Stili. In questo modo, gli utenti che sfogliano con i propri fogli di stile e con contenuti strutturati correttamente possono usufruire di una marcatura pulita e di opzioni maggiori.

Utilizzo della funzione di modifica sorgente

In alcuni casi, gli autori dei contenuti dovranno esaminare e regolare il codice sorgente HTML creato mediante l’editor Rich Text. Ad esempio, un contenuto creato all’interno dell’editor Rich Text potrebbe richiedere una marcatura aggiuntiva per garantire la conformità a WCAG 2.0. Questo può essere fatto con l'opzione modifica sorgente dell'editor Rich Text. È possibile specificare la funzione sourceedit sul plug-in misctools.

ATTENZIONE

Utilizzate attentamente la funzione sourceedit. Gli errori di digitazione e/o le funzioni non supportate possono causare altri problemi.

Aggiunta del supporto per elementi e attributi HTML aggiuntivi

Per ampliare ulteriormente le funzioni di accessibilità di AEM, è possibile estendere i componenti esistenti in base all'editor Rich Text (come i componenti Text e Table) con elementi e attributi aggiuntivi.

La procedura seguente illustra come estendere il componente Table con un elemento Caption che fornisce informazioni su una tabella di dati per aiutare gli utenti della tecnologia:

Esempio: aggiunta della didascalia alla finestra di dialogo Proprietà tabella

Nella funzione di costruzione della TablePropertiesDialog, aggiungere un campo di testo aggiuntivo utilizzato per modificare la didascalia. Tenere presente che itemId deve essere impostato su caption (ovvero il nome dell'attributo DOM) per gestire automaticamente il contenuto.

In Table è necessario impostare o rimuovere esplicitamente l'attributo dall'elemento DOM. Il valore viene passato dalla finestra di dialogo nell'oggetto config. Gli attributi DOM devono essere impostati/rimossi utilizzando i metodi CQ.form.rte.Common corrispondenti ( com è una scelta rapida per CQ.form.rte.Common) per evitare le comuni insidie con le implementazioni del browser.

NOTA

Questa procedura è adatta solo all’interfaccia classica.

Istruzioni passo-passo

  1. Inizia CRXDE Lite. Ad esempio: http://localhost:4502/crx/de/

  2. Copia:

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

    a:

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

    NOTA

    Se non esistono già, potrebbe essere necessario creare delle cartelle intermedie.

  3. Copia:

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

    a:

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

  4. Aprite il file seguente per la modifica (aprite con un doppio clic):

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

  5. Nel metodo constructor, prima della lettura della riga:

    var dialogRef = this;
    

    Aggiungete il seguente codice:

    editItems.push({
        "itemId": "caption",
        "name": "caption",
        "xtype": "textfield",
        "fieldLabel": CQ.I18n.getMessage("Caption"),
        "value": (this.table && this.table.caption ? this.table.caption.textContent : "")
    });
    
  6. Aprite il file seguente:

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

  7. Aggiungete il seguente codice alla fine del metodo transferConfigToTable:

    /**
     * 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. Salvare le modifiche utilizzando Salva tutto

NOTA

Un campo di testo normale non è l'unico tipo di input consentito per il valore dell'elemento caption. È possibile utilizzare qualsiasi widget ExtJS che fornisce il valore della didascalia tramite il metodo getValue().

Per aggiungere funzionalità di modifica per altri elementi e attributi, accertatevi che:

  • La proprietà itemId di ciascun campo corrispondente viene impostata sul nome dell'attributo DOM appropriato (TablePropertiesDialog).
  • L'attributo viene impostato e/o rimosso in modo esplicito sull'elemento DOM (Table).

In questa pagina

Adobe Summit Banner

A virtual event April 27-28.

Expand your skills and get inspired.

Register for free
Adobe Summit Banner

A virtual event April 27-28.

Expand your skills and get inspired.

Register for free