Show Menu
ARGOMENTI×

Configurare l’editor Rich Text per creare pagine Web e siti con accesso facilitato

Adobe Experience Manager supporta molte funzioni di accessibilità standard in conformità ai vari standard di accessibilità. Inoltre, gli sviluppatori possono personalizzare o estendere le funzionalità per la creazione di contenuti accessibili tramite componenti Experience Manager che utilizzano l’editor Rich Text (RTE).
Durante la progettazione di pagine Web e l’aggiunta di contenuti alle pagine, gli sviluppatori di contenuti e gli autori possono utilizzare le funzioni dell’editor Rich Text per fornire informazioni relative all’accessibilità. Ad esempio, aggiungere informazioni strutturali attraverso titoli ed elementi di paragrafo.
Per configurare e personalizzare queste funzioni, configurate 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 per l’interfaccia Touch e per l’interfaccia utente Classic. Tuttavia, il componente principale da usare nell’editor Rich Text è il componente Testo disponibile per entrambe le interfacce. Le immagini seguenti mostrano l’editor Rich Text con una serie di plug-in abilitati, tra cui paraformat :
Figura: Il componente Testo nell’interfaccia Touch.
Figura: Il componente Testo nell’interfaccia utente classica.
Per le differenze tra le funzioni RTE disponibili nelle varie interfacce, vedere Plugins e le relative funzioni .

Configurare le funzioni del plug-in

Per istruzioni complete sulla configurazione dell’editor Rich Text, consultate Configurare la pagina 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, è possibile attivare tutte le funzioni o specifiche per quel plug-in.

Esempio: specificare i 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 a forma di cuscino di paragrafo nell’interfaccia touch.
    • Utilizzo del campo Formato (selettore a comparsa) 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.

Supporto per più elementi e attributi HTML

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: aggiungere la 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 , impostate esplicitamente o rimuovete 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 utente classica.

Esempio: creazione di HTML con accesso facilitato quando si utilizza l'enfasi nel testo

L’editor Rich Text può utilizzare strong e em i tag al posto di b e i . Aggiungete il seguente nodo come nodo di pari livello ai uiSettings nodi e rtePlugins ai nodi della finestra di dialogo.
<htmlRules jcr:primaryType="nt:unstructured">
    <docType jcr:primaryType="nt:unstructured">
        <typeConfig jcr:primaryType="nt:unstructured"
                useSemanticMarkup="{Boolean}true">
            <semanticMarkupMap
                    b="strong"
                    i="em"/>
        </typeConfig>
    </docType>
</htmlRules>

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 relativo 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 ).