DocumentazioneJourney OptimizerGuida di Journey Optimizer

Progettare contenuti accessibili accessible-content

Last update: Tue Sep 02 2025 00:00:00 GMT+0000 (Coordinated Universal Time)

Creato per:

  • Principiante
  • Intermedio
  • Utente

L'atto europeo sull'accessibilità è una direttiva intesa a migliorare il mercato interno dei prodotti e dei servizi accessibili eliminando gli ostacoli causati da norme nazionali divergenti tra gli Stati membri.

Tale regolamento stabilisce che tutte le comunicazioni digitali, compresi e-mail, newsletter, PDF e contenuti scaricabili, dovrebbero essere accessibili. Durante la creazione di contenuti per i destinatari, è quindi necessario seguire linee guida specifiche, ad esempio l’utilizzo di font accessibili e formati leggibili, e fornire testo alternativo per le immagini.

La Journey Optimizer E-mail Designer, che consente agli addetti al marketing di creare contenuti sia per e-mail che per pagine di destinazione, ti consente di conformarsi facilmente a questa direttiva, in base alle linee guida per l'accessibilità dei contenuti web (WCAG) 2.1, livello AA.

Di seguito sono elencate le procedure consigliate per la progettazione di contenuto accessibile con Journey Optimizer.

NOTE
Questa pagina consente di rendere il contenuto accessibile a tutti i destinatari per garantire che le persone con disabilità possano leggere, comprendere e interagire con le e-mail e le pagine di destinazione progettate con Journey Optimizer.
L'accessibilità dell'interfaccia Journey Optimizer è invece descritta in questa sezione.

Assicurare la leggibilità del testo text-readability

Utilizza la scheda Stili del componente Testo per garantire che il testo sia leggibile, ad esempio utilizzando un contrasto di colore appropriato e font semplici. Ulteriori informazioni

{width="80%"}

Per i font e il testo, attenetevi alle seguenti linee guida:

Selezione carattere

  • Utilizza font sans-serif come Arial, Verdana, Tahoma, Helvetica o Open Sans.
  • Evita font serif, corsivi o decorativi nel contenuto del corpo.
  • Attenersi a un set di caratteri limitato per coerenza e fallback (ad esempio: font-family: Arial, Helvetica, sans-serif;).

Dimensione font

  • Assicurati che la dimensione minima del font per il corpo del testo sia 16 px.
  • Utilizza la gerarchia corretta per le intestazioni.

Contrasto colore

  • Mantenere un rapporto di contrasto di almeno 4,5:1 tra testo e sfondo.
  • Per il testo di grandi dimensioni (≥24 px o 18 px in grassetto), assicurati di ottenere un contrasto di almeno 3:1.
  • Evitare il testo grigio chiaro o pastello su sfondi bianchi.
  • Non fare affidamento solo sul colore per trasmettere il significato, ma utilizzare invece sottolineature, icone, ecc.

Accessibilità testo

  • Evitare il testo nelle immagini.
  • Non utilizzare tutte le maiuscole nel corpo del testo.
  • Assicurati che il testo possa essere ingrandito fino al 200% senza interrompere il layout.

Garantire l’accessibilità visiva visual-accessibility

Per assicurarti che il contenuto sia accessibile visivamente, segui le best practice riportate di seguito:

  • Evitare di utilizzare indicatori di solo colore per informazioni importanti.
  • Utilizza etichette di testo o icone per assicurarne la chiarezza.
  • Ottimizza la progettazione per layout mobili e reattivi, garantendo pulsanti grandi e spaziati correttamente.
  • Esegui regolarmente test tra dispositivi e dimensioni dello schermo per mantenere l’accessibilità.

In Journey Optimizer, le dimensioni e la spaziatura dei diversi elementi del contenuto possono essere ulteriormente migliorate utilizzando i parametri e gli attributi di stile del riquadro Stili di E-mail Designer. Ulteriori informazioni

È ad esempio possibile aggiornare lo sfondo o modificare i margini, la spaziatura interna e l'allineamento per migliorare l'accessibilità visiva del contenuto. Ulteriori informazioni

{width="80%"}

Inoltre, il Designer e-mail di Journey Optimizer consente di visualizzare in anteprima e ottimizzare la progettazione per diversi dispositivi e dimensioni dello schermo. In qualsiasi momento puoi Passare alla visualizzazione live per verificare come il contenuto potrebbe essere riprodotto su dispositivi di varie dimensioni.

{width="80%"}

CAUTION
La visualizzazione live è un’anteprima generica progettata per confrontare l’aspetto del rendering tra le varie dimensioni dei dispositivi. Il rendering finale può variare a seconda del client e-mail del destinatario.

Usa testo alternativo per le immagini alt-text

Utilizza il componente Immagine per fornire testo alternativo per le immagini. Ulteriori informazioni

{width="90%"}

Per un testo alternativo efficace nei prodotti digitali, attieniti alle linee guida seguenti:

  • Descrivi lo scopo dell’immagine in modo conciso e contestuale.
  • Evita frasi ridondanti come "Immagine di …" e utilizza testo alternativo vuoto per le immagini decorative.
  • Per le icone con significato, fornisci etichette significative e per le immagini complesse, utilizza un breve testo alternativo più una descrizione più lunga altrove.

Usa formato leggibile readable-format

Utilizza la struttura rilevante di E-mail Designer e i componenti di contenuto, nonché le opzioni nel riquadro Stili, per organizzare il contenuto in modo chiaro, logico e conciso, accessibile a tutti.

{width="1000%"}

  • Utilizza HTML semantico e strutturato con intestazioni, paragrafi, elenchi e tabelle corretti.
  • Assicurati che il contenuto segua un flusso logico da sinistra a destra e dall’alto al basso.
  • Utilizza un linguaggio chiaro e conciso.
  • Fornire formati alternativi per PDF e infografiche.
  • Consenti il ridimensionamento e il riversamento del testo e assicurati che la composizione tipografica sia leggibile con un contrasto del colore adeguato in tutti i formati.

Garantire la leggibilità dei contenuti readability

Per essere leggibile, il contenuto deve essere chiaro, ben strutturato e utilizzabile da tutti, comprese le persone con difficoltà visive, cognitive o di lettura e quelle che utilizzano tecnologie per l’accessibilità. Alcuni punti da considerare durante la creazione di contenuto accessibile includono:

  • Mantenere le frasi a un massimo di 20 parole.
  • Modifica la copia in modo che sia diretta e diretta.
  • Utilizza la voce attiva per semplificare la struttura della frase.
  • Evita di usare parole gergali, gergali o regionali che alcuni potrebbero non conoscere.

Per valutare la leggibilità delle e-mail, puoi utilizzare il popolare test di facilità di lettura Flesch, disponibile in Microsoft Word, che calcola la facilità di lettura dei contenuti su una scala da 0 a 100.

Verifica il contenuto test

Per verificare l'accessibilità del contenuto, è possibile utilizzare le funzionalità di test fornite da Journey Optimizer. Non sono progettate specificamente per verificare se il contenuto è completamente accessibile, ma possono fornire un primo livello di verifica.

  • Visualizza l’anteprima del contenuto utilizzando i profili di test. Scopri come

  • Utilizza l'opzione Rendering di e-mail che sfrutta Litmus per simulare le progettazioni tra i principali client e-mail (Apple Mail, Gmail, Outlook) e vedere se testo, colori e immagini rendono accessibili i contenuti.

  • Invia bozze per testare il rendering del contenuto prima di inviarlo al pubblico reale. Scopri come

{width="90%"}

Per eseguire il check-in in modo più coerente se il contenuto è accessibile in modo affidabile, cerca strumenti esterni specifici come:

  • Il Verifica contrasto WebAim e lo strumento di valutazione dell'accessibilità Web WAVE per valutare il contrasto e la conformità;

  • Tecnologie per l'accessibilità, come gli assistenti vocali (ad esempio: NVDA o VoiceOver su iPhone), per visualizzare le e-mail dal punto di vista degli utenti ipovedenti.

Usa modalità scura dark-mode

La modalità scura migliora l'accessibilità visiva per gli utenti con sensibilità alla luce o disturbi visivi, offrendo un'esperienza di visualizzazione migliore.

{width="90%"}

Tra le best practice per la progettazione di contenuti in modalità scura, puoi utilizzare PNG o SVG trasparenti, impostare metatag e CSS appropriati e fornire uno stile di fallback accessibile se la modalità scura non è supportata. Infine, assicurati che le e-mail vengano riprodotte correttamente in modalità scura, testando tutti i contenuti e gli elementi dell’interfaccia utente sia in modalità chiara che in modalità scura.

Le best practice dettagliate specifiche della modalità scura, incluse le linee guida per garantire l'accessibilità, sono elencate in questa sezione.

Utilizzare attributi specifici per l'accessibilità attributes

Attributi della lingua language

Durante la creazione delle progettazioni, includere gli attributi lang (lingua) e dir (direzione del testo) nel corpo del contenuto. Questi attributi consentono alle tecnologie per l’accessibilità, come gli assistenti vocali, di interpretare e presentare il contenuto in modo appropriato.

  • L'attributo lang indica la lingua dell'e-mail per le tecnologie per l'accessibilità, garantendo che le parole vengano pronunciate correttamente.

    accordion
    Esempi

    Esempio di inglese:

    code language-none 
    <body lang="en">

    Esempio di francese:

    code language-none 
    <body lang="fr">

  • L'attributo dir specifica la direzione del testo. La maggior parte delle lingue, tra cui l'inglese e il francese, sono lette da sinistra a destra (ltr), mentre le lingue come l'arabo e l'ebraico sono lette da destra a sinistra (rtl).

    accordion
    Esempi

    Esempio di inglese (da sinistra a destra):

    code language-none 
    <body lang="en" dir="ltr">

    Esempio di arabo (da destra a sinistra):

    code language-none 
    <body lang="ar" dir="rtl">

Gli assistenti vocali si basano sull'attributo lang per applicare le regole di pronuncia corrette, mentre la direzione del testo garantisce un flusso di contenuto naturale per le lingue da sinistra a destra o da destra a sinistra. Senza questi attributi, gli utenti potrebbero riscontrare un ordine di lettura confuso o una pronuncia errata. Di conseguenza, racchiudi sempre il corpo dell'e-mail con gli attributi lang e dir appropriati.

TIP
Se l'e-mail contiene più lingue, assegnare gli attributi della lingua appropriati a sezioni specifiche (ad esempio <table> o <td> blocchi) per garantire la corretta lettura di ogni parte.

Tabelle tables

Nei contenuti di HTML, le tabelle vengono spesso utilizzate per il layout. Per impostazione predefinita, gli assistenti vocali trattano ogni <table> come una tabella dati, annunciando righe, colonne e struttura. Questo può creare confusione se la tabella viene utilizzata solo per la formattazione.

Aggiungi role="presentation" (o role="none") alle tabelle layout per garantire che le tecnologie per l'accessibilità saltino la struttura e si concentrino solo sul contenuto effettivo.

Esempio: tabella layout (con role="presentation")
code language-none 
<table role="presentation" border="0" cellpadding="0" cellspacing="0" width="100%">

  <tr>

    <td align="center">

      <h1>Hello World</h1>

      <p>Welcome to our newsletter</p>

    </td>

  </tr>

</table>

Gli assistenti vocali leggono:
"Hello World. Benvenuto nella nostra newsletter." (Nessuna menzione di righe, colonne o tabelle)

Esempio - Tabella dati (senza role="presentation")
code language-none 
<table border="1" cellpadding="5" cellspacing="0">

  <tr>

    <th scope="col">Name</th>

    <th scope="col">Score</th>

  </tr>

  <tr>

    <td>Alice</td>

    <td>95</td>

  </tr>

  <tr>

    <td>Bob</td>

    <td>88</td>

  </tr>

</table>

Gli assistenti vocali leggono:
"Tabella con 2 colonne e 3 righe."

"Nome, Alice. Punteggio, 95."

"Nome, Bob. Punteggio, 88."

TIP
Utilizza role="presentation" esclusivamente per le tabelle layout. Per le tabelle dati, mantenere la struttura semantica <table> in modo che gli assistenti vocali possano annunciare correttamente le intestazioni e le relazioni.

Gli assistenti vocali leggono i collegamenti utilizzando il testo. Se un collegamento è etichettato solo come "Fai clic qui" o "Ulteriori informazioni", gli utenti delle tecnologie per l’accessibilità non conosceranno la destinazione. Per garantire l’accessibilità, è necessario un testo descrittivo che indichi chiaramente la destinazione o l’azione.

Utilizza E-mail Designer per aggiungere un collegamento al contenuto e modificare l'etichetta in modo che sia distinguibile (visibile) e descrittiva (non crittografata). Evita etichette vaghe come "qui" o "altro".

{width="70%"}

Esempio - Collegamento valido (descrittivo):
code language-none 
<p>Learn more in the

<a href="https://adobe.com/release-notes">August release notes</a>.

</p>

Gli assistenti vocali leggono:
"Link, note sulla versione di agosto".

Esempio: collegamento non valido (non descrittivo)
code language-none 
<p>Learn more about our new features.

  <a href="https://adobe.com/release-notes">Click here</a>.

</p>

Gli assistenti vocali leggono:
"Link, fai clic qui." (nessun contesto fuori ordine di lettura)

Supporto per la navigazione da tastiera e la messa a fuoco keyboard

Il supporto per la navigazione da tastiera e l'attivazione della tastiera consente agli utenti che non possono utilizzare il mouse di accedere e interagire completamente con il contenuto. Inoltre, migliora l’usabilità complessiva offrendo a tutti gli utenti un modo chiaro e coerente di passare alle informazioni.

  • Messa a fuoco tramite tastiera

    • Assicurarsi che tutti gli elementi interattivi (ad esempio pulsanti, caselle di controllo e collegamenti) abbiano tabindex="0", in modo che vengano inclusi nell'ordine di tabulazione naturale.

    • Consenti la navigazione utilizzando i tasti TAB e freccia (↑ ↓ ← →), che dovrebbero evidenziare visibilmente l’elemento attivo.

  • Stile di messa a fuoco personalizzato

    • Applica stili chiari e distinguibili per concentrarti sugli elementi utilizzabili:

      accordion
      Esempio (CSS)
      code language-none 
      [tabindex="0"] : focus {

outline: 2px solid #00AEEF;  /* Cyan border */

background-color: #20CEFF;   /* Optional background */

}

    • Assicurati che gli indicatori di focus soddisfino gli standard WCAG 2.2 per l’aspetto del focus, tra cui:

      • Area minima: 2 linee di spessore pixel CSS.

      • Rapporto di contrasto: ≥ 3:1 tra stato attivo e non attivo.

  • Supporto per l'attivazione della tastiera

    • Assicurarsi che le caselle di controllo e i pulsanti rispondano ai tasti Invio e Spazio.

    • Convalidare l’interazione utilizzando solo la tastiera:

      • Immettere o Spazio per attivare/disattivare le caselle di controllo.

      • I pulsanti Invio o Spazio devono essere attivati.

recommendation-more-help
b22c9c5d-9208-48f4-b874-1cefb8df4d76