Configurare l’editor Rich Text per creare pagine web e siti accessibili configure-rte-for-accessibility

Adobe Experience Manager supporta molte funzioni di accessibilità standard in conformità con vari standard di accessibilità. Inoltre, gli sviluppatori possono personalizzare o estendere per fornire funzionalità che consentono di creare contenuto accessibile utilizzando componenti di Experience Manager che utilizzano l’editor Rich Text (RTE).

Durante la progettazione di pagine web e l’aggiunta di contenuto alle pagine, gli sviluppatori e gli autori di contenuti possono utilizzare le funzioni dell’editor Rich Text per fornire informazioni relative all’accessibilità. Ad esempio, aggiungi informazioni strutturali tramite intestazioni ed elementi di paragrafo.

Per configurare e personalizzare queste funzionalità, configurare i plug-in dell'editor Rich Text per il componente. Ad esempio, il plug-in paraformat ti consente di aggiungere elementi semantici a livello di blocco aggiuntivi, inclusa l'estensione del numero di livelli di intestazione supportati oltre i H1, H2 e H3 di base forniti per impostazione predefinita.

L’editor Rich Text è disponibile in diversi componenti per l’interfaccia touch e l’interfaccia utente classica. Tuttavia, il componente principale per utilizzare l'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, incluso paraformat:

Componente testo (RTE) in modalità a schermo intero nellinterfaccia touch.

Figura: il componente Testo nell'interfaccia utente touch.

Finestra di dialogo per modifica (Editor Rich Text) del componente testo nellinterfaccia classica.

Figura: componente Testo nell'interfaccia utente classica.

Per informazioni sulle differenze tra le funzionalità dell'editor Rich Text disponibili nelle varie interfacce, vedere Plug-in e relative funzionalità.

Configurare le funzioni del plug-in configure-the-plugin-features

Per istruzioni complete sulla configurazione dell'editor Rich Text, vedere configurare la pagina Editor Rich Text. In questo documento vengono trattati tutti i problemi, incluse le fasi principali:

Configurando un plug-in nel ramo secondario rtePlugins appropriato in CRXDE Lite, puoi attivare tutte o alcune funzionalità specifiche per quel plug-in.

CRXDE Liti che mostra un rtePlugin di esempio.

Esempio: specificare i formati di paragrafo disponibili nel campo di selezione dell’Editor Rich Text example-specifying-paragraph-formats-available-in-rte-selection-field

Nuovi formati di blocchi semantici possono essere resi disponibili per la selezione:

  1. A seconda dell'editor Rich Text, determinare e passare al percorso di configurazione.

  2. Abilitare il campo di selezione Paragraphs; attivando il plug-in.

  3. Specificare i formati da rendere disponibili nel campo di selezione Paragrafi.

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

    • Utilizzo dell’icona del cursore paragrafo nell’interfaccia utente touch.
    • Utilizzo del campo Formato (selettore popup) nell'interfaccia classica.

Con gli elementi strutturali disponibili nell’editor Rich Text attraverso le opzioni di formato dei paragrafi, l’AEM fornisce una buona base per lo sviluppo di contenuti accessibili. Gli autori dei contenuti non possono utilizzare l’editor Rich Text per formattare le dimensioni o i colori dei caratteri 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 si garantisce un markup più ordinato, maggiori opzioni per gli utenti che navigano con i propri fogli di stile e contenuti correttamente strutturati.

Utilizzo della funzione di modifica dell'origine use-of-the-source-edit-feature

In alcuni casi, gli autori di contenuti dovranno esaminare e regolare il codice sorgente HTML creato con l’editor Rich Text. Ad esempio, un contenuto creato nell’editor Rich Text può richiedere un markup aggiuntivo per garantire la conformità a WCAG 2.0. Questa operazione può essere eseguita con l'opzione modifica origine dell'editor Rich Text. È possibile specificare la funzionalità sourceedit nel plug-in misctools.

CAUTION
Utilizza la funzione sourceedit con attenzione. Errori di digitazione e/o funzioni non supportate possono introdurre ulteriori problemi.

Aggiungi supporto per altri elementi e attributi di HTML add-support-for-more-html-elements-and-attributes

Per estendere ulteriormente le funzioni di accessibilità di AEM, è possibile estendere i componenti esistenti basati sull'editor Rich Text (ad esempio 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 dati agli utenti di tecnologie per l'accessibilità:

Esempio: aggiungere la didascalia alla finestra di dialogo Proprietà tabella example-adding-the-caption-to-the-table-properties-dialog

Nel costruttore di TablePropertiesDialog, aggiungere un campo di immissione testo aggiuntivo utilizzato per modificare la didascalia. itemId deve essere impostato su caption (ovvero il nome dell'attributo DOM) per gestire automaticamente il contenuto.

In Tabella, impostare o rimuovere esplicitamente l'attributo da/verso l'elemento DOM. Valore passato dalla finestra di dialogo nell'oggetto config. Si noti che gli attributi DOM devono essere impostati/rimossi utilizzando i metodi CQ.form.rte.Common corrispondenti ( com è un collegamento per CQ.form.rte.Common) per evitare problemi comuni con le implementazioni del browser.

NOTE
Questa procedura è adatta solo per l’interfaccia utente classica.

Esempio: creare HTML accessibili quando si utilizza l’enfasi nel testo create-accessible-html-for-text

L'editor Rich Text può utilizzare strong e em tag invece di b e i. Aggiungere il nodo seguente come nodo di pari livello ai nodi uiSettings e rtePlugins nella 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 step-by-step-instructions

  1. Avvia CRXDE Lite. 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

    note note
    NOTE
    Se non esistono già, potrebbe essere necessario creare 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. Apri il seguente file per la modifica (apri con doppio clic):

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

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

    code language-none
    var dialogRef = this;
    

    Aggiungi il seguente codice:

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

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

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

    code language-none
    /**
     * 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 utilizzando Salva tutto…

NOTE
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 metodo getValue().
Per aggiungere funzionalità di modifica per ulteriori elementi e attributi aggiuntivi, assicurati che:
  • La proprietà itemId per ogni campo corrispondente è impostata sul nome dell'attributo DOM appropriato (TablePropertiesDialog).
  • Attributo impostato e/o rimosso in modo esplicito sull'elemento DOM (Table).
recommendation-more-help
19ffd973-7af2-44d0-84b5-d547b0dffee2