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 accessibili durante la creazione di contenuti con componenti che utilizzano l’editor Rich Text

Gli autori di contenuti possono utilizzare le funzioni dell’editor Rich Text per fornire informazioni di accesso facilitato durante l’aggiunta di contenuti a una pagina. Ciò può includere l’aggiunta di informazioni strutturali tramite intestazioni ed elementi di paragrafo.

È possibile configurare e personalizzare queste funzioni configurando i plug-in RTE per il componente. Ad esempio, il paraformat il plug-in consente di aggiungere ulteriori elementi semantici a livello di blocco, tra cui l’estensione del numero di livelli di intestazione supportati oltre la base H1, H2 e H3 fornito per impostazione predefinita.

L’editor Rich Text è disponibile in diversi componenti sia dall’interfaccia touch che classica. Tuttavia, il componente principale per l’utilizzo dell’editor Rich Text è Testo componente.

La Testo in AEM è disponibile sia per le interfacce touch che per quelle classica. Le immagini seguenti mostrano l’editor Rich Text con una serie di plug-in abilitati, tra cui paraformat:

• La Testo nell’interfaccia touch:

  

• La Testo nell’interfaccia classica:

  

Configurazione delle funzionalità plug-in

Le istruzioni complete sulla configurazione dell’editor Rich Text sono disponibili nella sezione Configurazione dell’editor Rich Text pagina. Vengono trattati tutti i problemi, compresi i passaggi chiave:

• Plug-in e relative funzioni
• Posizioni di configurazione
• Attivare un plug-in e configurare la proprietà feature
• Configurazione di altre funzionalità dell’editor Rich Text

Configurando un plug-in all’interno del rtePlugins in CRXDE Lite (immagine seguente), puoi attivare tutte le funzioni o specifiche del plug-in.

Esempio - Specifica dei formati di paragrafo disponibili nel campo di selezione dell’editor Rich Text

Nuovi formati di blocchi semantici possono essere messi a disposizione per la selezione:

1. A seconda dell’editor Rich Text, determina e naviga fino al percorso di configurazione.

2. Attiva il campo di selezione Paragrafi; da attivazione del plug-in.

3. Specificare i formati che si desidera rendere disponibili nel campo di selezione Paragrafi.

4. I formati di paragrafo sono quindi disponibili per l’autore del contenuto dai campi di selezione nell’editor Rich Text. Sono accessibili:

   • Utilizzando il paragrafo (corvo) nell’interfaccia touch:

   

   • Utilizzo della Formato (selettore a discesa) nell’interfaccia classica.

Con gli elementi strutturali disponibili nell’editor Rich Text tramite le opzioni del formato paragrafo, AEM fornisce una buona base per lo sviluppo di contenuti accessibili. Gli autori di 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 i titoli, e utilizzare gli stili globali selezionati dall’opzione Stili. In questo modo si garantisce un markup pulito, opzioni più ampie per gli utenti che navigano con i propri fogli di stile e contenuti strutturati correttamente.

Utilizzo della funzione di modifica sorgente

In alcuni casi, gli autori di contenuti dovranno esaminare e regolare il codice sorgente HTML creato utilizzando l’editor Rich Text. Ad esempio, per garantire la conformità alle linee guida WCAG 2.0, un contenuto creato all’interno dell’editor Rich Text può richiedere tag aggiuntivi. Questo può essere fatto con modifica sorgente opzione dell’editor Rich Text. Puoi specificare la sourceedit sulla misctools plugin.

Aggiunta di supporto per elementi e attributi di HTML aggiuntivi

Per estendere ulteriormente le funzioni di accessibilità di 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 il Tabella componente con un Didascalia elemento che fornisce informazioni su una tabella di dati agli utenti di tecnologie per l’accessibilità:

Esempio: aggiunta della didascalia alla finestra di dialogo Proprietà tabella

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 gestire automaticamente il contenuto.

In Tabella devi impostare o rimuovere esplicitamente l’attributo a/dall’elemento DOM. Il valore viene passato dalla finestra di dialogo nel config oggetto. Gli attributi DOM devono essere impostati/rimossi utilizzando il corrispondente CQ.form.rte.Common metodi ( com è una scorciatoia per CQ.form.rte.Common) per evitare problematiche comuni con le implementazioni del browser.

Istruzioni dettagliate

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

   NOTA

   Potrebbe essere necessario creare cartelle intermedie se non esistono già.

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 file seguente per la modifica (apri con doppio clic):

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

5. In constructor prima della lettura della riga:

   var dialogRef = this;
   

   Aggiungi il codice seguente:

   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 file seguente:

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

7. Aggiungi il seguente codice 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 utilizzando Salva tutto

Risorse Business.Adobe.com

Automated Onboarding Targeted Content Dynamic Media Dynamic Forms Digital Rights Management Digital Signage