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 funzioni: configurare i plug-in dell’editor Rich Text per il componente. Ad esempio, il paraformat
Il plug-in consente di aggiungere ulteriori elementi semantici a livello di blocco, inclusa l’estensione del numero di livelli di intestazione supportati oltre il H1
, H2
, e H3
fornite 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 è Testo componente 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 utente touch.
Figura: Il componente Testo nell’interfaccia utente classica.
Per informazioni sulle differenze tra le funzioni RTE disponibili nelle varie interfacce, vedere Plug-in e relative funzioni.
Configurare le funzioni del plug-in configure-the-plugin-features
Per istruzioni complete sulla configurazione dell’editor Rich Text, consulta configurare l’editor Rich Text pagina. In questo documento vengono trattati tutti i problemi, incluse le fasi principali:
Configurando un plug-in all’interno del rtePlugins
sub-branch in CRXDE Liti, puoi attivare tutte o 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:
-
A seconda dell’editor Rich Text, determina e accedi al percorso di configurazione.
-
Abilita il campo di selezione Paragrafi; per attivazione del plug-in.
-
Specificare i formati da rendere disponibili nel campo di selezione Paragrafi.
-
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 di 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 modifica origine dell'editor Rich Text. È possibile specificare sourceedit
funzionalità in misctools
plugin.
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à dell’AEM, è possibile estendere i componenti esistenti in base all’editor Rich Text (come Testo e Tabella componenti) con elementi e attributi aggiuntivi.
La procedura seguente illustra come estendere Tabella componente con Didascalia elemento 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 del TablePropertiesDialog
, aggiungi un campo di immissione testo aggiuntivo utilizzato per modificare la didascalia. Tieni presente che itemId
deve essere impostato su caption
(ovvero il nome dell’attributo DOM) per gestirne automaticamente il contenuto.
In entrata Tabella, imposta o rimuove esplicitamente l'attributo dall'elemento DOM o viceversa. Il valore viene passato dalla finestra di dialogo nella sezione config
oggetto. Gli attributi DOM devono essere impostati/rimossi utilizzando il CQ.form.rte.Common
metodi ( 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 al posto di b
e i
. Aggiungi il seguente nodo come elemento di pari livello al 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
-
Avvia CRXDE Liti. Ad esempio: http://localhost:4502/crx/de/
-
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. -
Copia:
/libs/cq/ui/widgets/source/widgets/form/rte/plugins/TablePropertiesDialog.js
a:
/apps/cq/ui/widgets/source/widgets/form/rte/plugins/TablePropertiesDialog.js
. -
Apri il seguente file per la modifica (apri con doppio clic):
/apps/cq/ui/widgets/source/widgets/form/rte/plugins/TablePropertiesDialog.js
-
In
constructor
metodo, 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 : "") });
-
Apri il seguente file:
/apps/cq/ui/widgets/source/widgets/form/rte/commands/Table.js
. -
Aggiungi il seguente codice alla fine del
transferConfigToTable
metodo: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); }
-
Salva le modifiche tramite Salva tutto…
getValue()
metodo.- Il
itemId
per ogni campo corrispondente viene impostata sul nome dell'attributo DOM appropriato (TablePropertiesDialog
). - L'attributo viene impostato e/o rimosso esplicitamente dall'elemento DOM (
Table
).