Come creare moduli d'iscrizione compatibili con l'ADA

Cosa imparerai

Scopri come utilizzare la funzionalità dell'assistente per l'accessibilità nella scheda Avvisi del modulo dell'editor del modulo d'iscrizione per evitare alcuni dei problemi di conformità alle linee guida per l'accessibilità dei contenuti web (WCAG) più comuni. Le aziende che puntano a rendere i propri siti web conformi all'ADA dovrebbero fare riferimento agli standard WCAG e seguirli. L'assistente per l'accessibilità ti guida nella creazione di moduli d'iscrizione accessibili per tutti i visitatori del tuo sito.

Prima di iniziare

Di seguito è riportato un elenco di problemi che l’assistente per l’accessibilità verificherà. Tieni presente che i tipi di errore elencati di seguito sono il modo in cui l’assistente per l’accessibilità di Klaviyo li identifica, non nomi specifici di campi di inserimento nel generatore di moduli. Se viene rilevato un errore, nella scheda Avvisi del modulo verrà visualizzato un avviso con una descrizione e una richiesta di correzione.

Crea un modulo d'iscrizione compatibile con ADA

Che tu stia creando il tuo primo modulo d'iscrizione o aggiornando un modulo, l'assistente per l'accessibilità ti aiuta a identificare e risolvere i problemi di accessibilità.

Per creare un modulo in linea con gli standard WCAG elencati sopra:

1. Crea un nuovo modulo d'iscrizione oppure apri l'editor del modulo per uno dei tuoi moduli d'iscrizione esistenti.
2. Usa l’editor per aggiungere blocchi di contenuto e definire lo stile del modulo in base al tuo brand.
   

1. Fai clic su Avvisi del modulo in basso a sinistra per vedere i problemi di accessibilità identificati.
   
   In Avvisi attivi, vedrai diverse schede che descrivono gli elementi che non soddisfano gli standard WCAG che l’assistente per l’accessibilità ha identificato nel tuo modulo, oltre ad altri problemi di contenuto o di design identificati. Ogni scheda includerà una descrizione del problema e un invito a correggerlo o ignorarlo. Ad esempio, se aggiungi un’immagine al tuo modulo d'iscrizione, l’assistente per l’accessibilità ti avviserà di aggiungere il testo alternativo all’immagine. Il testo alternativo fornisce una descrizione dell’immagine, in modo che chi naviga sul tuo sito con uno screen reader possa accedere al contenuto digitale.
   
   

2. Per risolvere un problema, segui i suggerimenti sulla scheda e risolvi oppure aggiungi gli elementi mancanti. Quando sei soddisfatto delle modifiche, fai clic su Correggi.
   

1. Se vuoi ignorare uno o più suggerimenti di accessibilità, fai clic su Ignora. Quando ignori un problema, verrà visualizzata una finestra modale che ti chiede di annullare o confermare la scelta.
   
   Dopo aver corretto o ignorato correttamente tutti i problemi identificati, vedrai un messaggio “Nessun avviso attivo” visualizzato nella scheda Avvisi del modulo.
   

1. Fai clic su Pubblica per pubblicare il tuo modulo d'iscrizione sul tuo sito con gli aggiornamenti di accessibilità.
   

Report di accessibilità di JAWS

Tieni presente che JAWS, un programma di lettura dello schermo per computer Microsoft Windows, potrebbe non rilevare i moduli d'iscrizione sul tuo sito web creati in Klaviyo. Per garantire che chi visita il sito usando JAWS possa comunque interagire con i moduli d'iscrizione sul tuo sito web, ti consigliamo di aggiungere al sito uno snippet di codice aggiuntivo che lo renda più accessibile a JAWS.

Copia il seguente snippet di codice e incollalo nel file del tema principale del tuo sito in modo che JAWS rilevi e legga il tuo modulo d'iscrizione Klaviyo:

  const isAriaHiddenTrue = ($el) => {
    const ariaHiddenValue = $el ? $el.getAttribute("aria-hidden") : null;
    return ariaHiddenValue === "true";
  };

  const isHTMLElement = (node) => {
    return node.nodeType === Node.ELEMENT_NODE;
  };

  const isModal = (node) => {
    if (node.children.length !== 1) return false;
    const modalContainer = Array.from(node.children[0].classList).some((cls) =>
      cls.startsWith("kl-private-reset")
    );

    return modalContainer;
  };

  const getTopLevelDomElements = () => {
    const body = document.body;

    // Use the children property to get all top-level elements
    const topLevelNodes = Array.from(body.children).filter((node) => {
      if (isHTMLElement(node)) {
        const tagName = node.tagName.toLowerCase();

        console.log("isModal: ", isModal);

        // Filter out specific tags
        return (
          tagName !== "script" &&
          tagName !== "link" &&
          tagName !== "iframe" &&
          tagName !== "style" &&
          !isModal(node)
        );
      }
      return false;
    });

    return topLevelNodes;
  };

  const a11yHideTopLevelElements = () => {
    const $elements = getTopLevelDomElements();

    $elements.forEach(($el) => {
      if (!isAriaHiddenTrue($el)) {
        $el.setAttribute("kl-aria-hidden", "true");
        $el.setAttribute("aria-hidden", "true");
      }
    });
  };

  const a11yShowTopLevelElements = () => {
    const $elements = getTopLevelDomElements();

    $elements.forEach(($el) => {
      if ($el.hasAttribute("kl-aria-hidden")) {
        $el.removeAttribute("kl-aria-hidden");
        $el.removeAttribute("aria-hidden");
      }
    });
  }; 

I prossimi passaggi

È importante mantenere gli standard WCAG in tutti i tuoi moduli d'iscrizione Klaviyo. I moduli d'iscrizione pubblicati in precedenza potrebbero ancora contenere problemi di accessibilità da correggere, ma tieni presente che Klaviyo non correggerà automaticamente eventuali problemi non conformi alle WCAG.

Vai alla scheda Avvisi modulo nell’editor per ciascuno dei tuoi moduli esistenti per risolvere eventuali problemi di accessibilità e favorire la conformità alle WCAG sul tuo sito web.

Risorse aggiuntive