Editore di newsletter: Eseguire il test di accessibilità

Tempo di lettura: 2 min
Le e-mail accessibili sono la chiave dell'inclusione. Assicurano che ogni destinatario, indipendentemente dalle sue capacità o limitazioni, possa comprendere facilmente i vostri contenuti. Il vostro mailing offre una migliore esperienza agli utenti, rafforza il vostro marchio e può persino portare a tassi di conversione più elevati.

Nel nostro articolo Criteri per i test di accessibilità per le vostre e-mail abbiamo riassunto ulteriori informazioni e mostrato quanto siano importanti i test di accessibilità.

Come funziona il test di accessibilità nel nostro editor di newsletter:

  1. Aprire l'invio di posta elettronica per il quale si desidera effettuare il test tramite la voce di menu Email.


  2. In alto a destra, alla voce Anteprima, si trova la voce Test di accessibilità.

  3. Si apre una finestra pop-up su tutta la pagina. Qui è possibile visualizzare la quota di test esistente, effettuare test, acquistare altri test e recuperare quelli precedenti.

  4. Fare clic su Avvia test di accessibilità. Il vostro mailing verrà scansionato e riceverete la seguente panoramica:


    Sotto la scheda Miglioramenti si trovano i criteri da regolare. Fate clic sulla freccia in basso a destra per ottenere maggiori informazioni e per vedere quale snippet HTML è interessato. Nella tabella Spiegazioni degli ID delle regole (suggerimenti di miglioramento) alla fine di questo articolo troverete ulteriori spiegazioni.
  5. Fare clic sulla x nell'angolo in alto a destra per tornare all'editor e modificare i suggerimenti di miglioramento.
  6. Fare nuovamente clic su Anteprima una volta effettuate le regolazioni > Test di accessibilità. È possibile fare clic su Recupera test precedente (vedere schermata fase 3) per visualizzare nuovamente i suggerimenti o fare clic su Avvia test di accessibilità per eseguire nuovamente il test per un controllo. per eseguire nuovamente il test.

Spiegazioni degli ID delle regole (suggerimenti per il miglioramento dopo il test)

Il vostro mailing viene controllato per queste regole con il test di accessibilità (vedi schermata passo 4):

ID regola Descrizione
tasti di accesso Assicura che ogni valore dell'attributo accesskey sia unico.
area-alt Assicura che gli elementi dell'area <> delle mappe di immagini abbiano un testo alternativo.
aria-allowed-attr Assicura che gli attributi ARIA siano consentiti per il ruolo di un elemento.
aria-ruolo consentito Assicura che l'attributo role abbia un valore appropriato per l'elemento.
aria-corpo nascosto Assicura che aria-hidden='true' non sia presente nel corpo del documento.
nome della barra di avanzamento Assicura che ogni nodo della barra di avanzamento ARIA abbia un nome accessibile.
aria-richiesta-attr Assicura che gli elementi con ruoli ARIA abbiano tutti gli attributi ARIA richiesti.
aria-richiesta-figli Assicura che gli elementi con un ruolo ARIA che richiedono ruoli figlio li contengano.
aria-richiesta-genitore Assicura che gli elementi con un ruolo ARIA che richiedono ruoli genitoriali siano contenuti da questi ultimi.
aria-roledescrizione Assicurarsi che aria-roledescription sia usato solo su elementi con un ruolo implicito o esplicito.
aria-roles Assicura che tutti gli elementi con un attributo role utilizzino un valore valido.
aria-toggle-field-name Assicura che ogni campo ARIA abbia un nome accessibile.
nome dell'aria-tooltip Assicura che ogni nodo tooltip ARIA abbia un nome accessibile.
aria-valido-attr-valore Assicura che tutti gli attributi ARIA abbiano valori validi.
aria-valida-attr Assicura che gli attributi che iniziano con aria- siano attributi ARIA validi.
colore-contrasto Assicura che il contrasto tra i colori in primo piano e quelli di sfondo soddisfi le soglie minime del rapporto di contrasto delle WCAG 2 AA.
tipo di contenuto Assicura che il "meta content-type" e il set di caratteri siano definiti
elenco di definizioni
Assicura che gli elementi di <dl> siano strutturati correttamente.
dlitem
Assicura che gli elementi <dt> e <dd> siano contenuti da un elemento <dl>
titolo del documento

Assicura che ogni documento HTML contenga un elemento <title> non vuoto.

duplicato-id Assicura che ogni valore dell'attributo id sia unico
intestazione vuota Assicura che le intestazioni abbiano un testo distinguibile
titolo-ordine Assicura che l'ordine delle voci sia semanticamente corretto.
html-has-lang Assicura che ogni documento HTML abbia un attributo lang.
html-lang-valido Assicura che l'attributo lang dell'elemento <html> abbia un valore valido.
html-xml-lang-mismatch Assicurarsi che gli elementi HTML con attributi lang e xml:lang validi concordino sulla lingua di base della pagina.
immagine-alt Assicura che gli elementi <img> abbiano un testo alternativo o un ruolo di nessuno o di presentazione.
immagine-ridondante-alt Assicurarsi che l'alternativa dell'immagine non venga ripetuta come testo
giustificazione Assicura che il contenuto del corpo non sia allineato al centro
landmark-no-duplicate-main Assicura che il documento abbia al massimo un punto di riferimento principale.
punto di riferimento-unico I punti di riferimento devono avere un ruolo unico o una combinazione ruolo/etichetta/titolo (cioè un nome accessibile).
nome del collegamento Assicura che i link abbiano un testo distinguibile
elenco Assicura che gli elenchi siano strutturati correttamente
listitem

Assicura che gli elementi <li> siano utilizzati in modo semantico.

meta-porto grande Assicura che <meta name="viewport"> possa scalare in modo significativo.
meta-viewport Assicura che <meta name="viewport"> non disabiliti il ridimensionamento e lo zoom del testo.
oggetto-alt Assicura che gli elementi dell'oggetto <> abbiano un testo alternativo.
pagina-ha-intestazione-uno Assicurarsi che la pagina, o almeno una delle sue cornici, contenga un'intestazione di primo livello.
presentazione-ruolo-conflitto Contrassegna gli elementi il cui ruolo è nessuno o presentazione e che causano l'attivazione della risoluzione dei conflitti di ruolo.
ruolo-img-alt Assicura che gli elementi [role='img'] abbiano un testo alternativo.
tabindex Assicura che i valori dell'attributo tabindex non siano maggiori di 0.
tabella-ruoli Assicura la definizione dei ruoli delle tabelle
svg-img-alt Assicura che gli elementi <svg> con ruolo img, graphics-document o graphics-symbol abbiano un testo accessibile.
lingua valida Assicura che gli attributi lang abbiano valori validi

Aiuto & Supporto

Se avete domande o bisogno di aiuto, potete sempre contattare il nostro team di assistenza.