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:

Figura: il componente Testo nell'interfaccia utente touch.

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.

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:

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.

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.

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