Show Menu
ARGOMENTI×

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.
Potete configurare e personalizzare queste funzioni configurando i plug-in RTE per il componente. Ad esempio, il paraformat plug-in consente di aggiungere altri elementi semantici a livello di blocco, inclusa l'estensione del numero di livelli di intestazione supportati oltre il livello 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 Testo .
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:
  • Il componente Testo nell’interfaccia classica:
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 Configurazione dell’editor Rich Text. Vengono trattati tutti i problemi, compresi i passi chiave:
Configurando un plug-in all'interno del rtePlugins sottoramo appropriato in CRXDE Lite (vedere l'immagine seguente), è possibile attivare tutte le funzioni o specifiche per quel plug-in.

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, determina e passa al percorso di configurazione.
  2. Attiva il campo di selezione Paragrafi; attivando il plug-in .
  3. 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 ( cuscino ) nell’interfaccia touch:
    • Utilizzo del campo Formato (selettore a discesa) nell’interfaccia classica.
Con gli elementi strutturali disponibili nell’editor Rich Text tramite le opzioni del formato di paragrafo, AEM offre una buona base per lo sviluppo di contenuti accessibili. 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. Questa operazione può essere eseguita con l’opzione di modifica Informazioni sui plug-in RTE e le relative funzioni sorgente dell’editor Rich Text. Potete specificare la sourceedit .
Utilizzate la sourceedit funzione con attenzione. Gli errori di digitazione e/o le funzioni non supportate possono causare altri problemi.

Aggiunta di 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 Testo e Tabella ) con elementi e attributi aggiuntivi.
La procedura seguente illustra come estendere il componente Tabella con un elemento Didascalia 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 didascalia, TablePropertiesDialog aggiungere un campo di testo aggiuntivo da utilizzare per la modifica della didascalia. Per gestire automaticamente il contenuto, itemId è necessario impostare caption (ovvero il nome dell’attributo DOM).
Nella tabella è necessario impostare o rimuovere esplicitamente l'attributo dall'elemento DOM. Il valore viene passato dalla finestra di dialogo nell' config oggetto. Tenete presente che gli attributi DOM devono essere impostati/rimossi utilizzando i CQ.form.rte.Common metodi corrispondenti ( com è un collegamento per CQ.form.rte.Common ) per evitare i comuni errori con le implementazioni del browser.
Questa procedura è adatta solo all’interfaccia classica.

Istruzioni dettagliate

  1. Avviare 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
    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 constructor metodo, 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 codice seguente alla fine del transferConfigToTable metodo:
    /**
     * 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. Salva le modifiche con Salva tutto
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 suo getValue() metodo.
Per aggiungere funzionalità di modifica per altri elementi e attributi, accertatevi che:
  • La itemId proprietà per 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 ).