Come creare moduli di iscrizione adatti all'ADA
Imparerai
Impari a utilizzare la funzione di assistente all'accessibilità nella scheda Avvisi modulo dell'editor di moduli di iscrizione per evitare alcuni dei più comuni problemi di conformità alle linee guida sull'accessibilità dei contenuti web (WCAG). Le aziende che cercano di rendere i loro siti web ADA-friendly dovrebbero fare riferimento e seguire gli standard WCAG. L'assistente all'accessibilità la guida nella creazione di moduli di iscrizione accessibili a tutti i visitatori del suo sito.
Gli standard WCAG mirano a rendere i contenuti web più accessibili a tutti, comprese le persone con disabilità. L'accessibilità dei siti web è un requisito legale in molti Paesi e l'implementazione degli standard WCAG può aiutare a soddisfare molte di queste esigenze di accessibilità. Tenga presente che, sebbene l'assistente all'accessibilità abbia lo scopo di aiutare a identificare i problemi di accessibilità secondo gli standard WCAG 2.0 AA, come si applicano ai moduli di iscrizione, potrebbe non essere in grado di identificare tutti i requisiti di accessibilità a causa delle limitazioni note della tecnologia esistente o di altri fattori indipendenti dalla tecnologia. L'uso dell'assistente all'accessibilità può aiutare a soddisfare i requisiti di accessibilità del web, ma non garantisce la conformità alle leggi vigenti. Per confermare le implicazioni legali e i requisiti dell'accessibilità del web, si consiglia di rivolgersi a un avvocato qualificato.
Prima di iniziare
Di seguito è riportato un elenco di problemi che l'assistente all'accessibilità verificherà. Tenga presente che i tipi di errore elencati di seguito sono il modo in cui l'assistente all'accessibilità di Klaviyo li identifica, non i nomi specifici di campo di inserimento nel costruttore di moduli. Se viene rilevato un errore, nella scheda Avvisi del modulo apparirà un avviso con una descrizione e una richiesta di correzione.
Tipo di errore | Descrizione |
Nome del pulsante | Assicura che i pulsanti abbiano un testo distinguibile. |
Immagine-alt | Assicura che gli elementi immagine abbiano un testo alternativo (alt text) o un ruolo html di "none" o di presentazione. |
Colore-contrasto | Assicura che il contrasto tra i colori in primo piano e quelli di sfondo soddisfi le soglie del rapporto di contrasto WCAG 2 AA. |
Link-in-blocco di testo | Si assicuri che i link siano distinguibili dal testo circostante in un modo che non si basi sul colore. |
Nome del collegamento | Assicura che i link abbiano un testo distinguibile. |
Etichetta | Assicura che ogni elemento del modulo abbia un'etichetta. |
Creare un modulo di iscrizione adatto all'ADA
Sia che stia costruendo il suo primo modulo di iscrizione o che stia aggiornando un modulo, l'assistente all'accessibilità la aiuta a identificare e risolvere i problemi di accessibilità.
Per creare un modulo in linea con gli standard WCAG sopra elencati:
- Crei un nuovo modulo di iscrizione o apra l'editor di moduli per uno dei suoi moduli di iscrizione esistenti.
- Utilizzi l'editor per aggiungere blocchi di contenuto e stilizzare il modulo in base al suo marchio.
L'assistente all'accessibilità monitorerà gli elementi del modulo che non soddisfano gli standard WCAG mentre costruisce il suo modulo e li registrerà come Avvisi attivi. Un modulo esistente registrerà tutti i problemi nella sezioneAvvisi attivi .
- Clicchi sugli avvisi del modulo in basso a sinistra per vedere i problemi di accessibilità identificati.
Sotto Avvisi attivi, vedrà varie schede che descrivono gli elementi che non soddisfano gli standard WCAG che l'assistente all'accessibilità ha identificato nel suo modulo, oltre ad altri problemi di contenuto o di design identificati. Ogni scheda includerà una descrizione del problema e un invito a risolverlo o ad eliminarlo. Ad esempio, se aggiunge un'immagine al suo modulo di iscrizione, l'assistente all'accessibilità la avviserà di aggiungere un testo alt all'immagine. Il testo alt fornisce una descrizione dell'immagine in modo che gli acquirenti che navigano sul suo sito con uno screen reader possano accedere al contenuto digitale.
- Per risolvere un problema, segua i suggerimenti della scheda e risolva o aggiunga gli elementi mancanti. Una volta soddisfatti delle modifiche, clicchi su Correggi.
Alcuni problemi le chiederanno di risolverli nelle impostazioni del rispettivo blocco (ad esempio, un blocco pulsante) o nella sezione Stili, piuttosto che direttamente nella scheda Avvisi del modulo. Per risolvere questi problemi, prenda nota della descrizione del problema sulla scheda di avviso, quindi faccia clic su Modifica blocco (o Modifica stili) per apportare le modifiche suggerite. Ritorni alla scheda Avvisi modulo una volta risolto il problema.
- Se desidera ignorare uno o più suggerimenti sull'accessibilità, clicchi su Rifiuta. L'eliminazione di un problema farà apparire un modale che le chiederà di annullare o confermare la sua scelta.
Quando avrà risolto o eliminato tutti i problemi identificati, vedrà un messaggio "Nessun avviso attivo" nella scheda Avvisi del modulo.
Può tornare sui problemi ignorati in un secondo momento, aprendo l'assistente e visualizzando gli avvisi precedentemente eliminati. Si raccomanda di risolvere tutti i problemi evidenziati nell'assistente all'accessibilità. La mancata conformità agli standard WCAG può esporre la sua azienda a rischi legali.
- Clicchi su Pubblica per rendere attivo il modulo di iscrizione sul suo sito con gli aggiornamenti sull'accessibilità.
Tenga presente che quando clicca su Pubblica, le verrà richiesto di correggere eventuali avvisi di modulo attivi. Può scegliere di risolvere gli errori nella scheda Avvisi del modulo o di pubblicare comunque.
Rapporti sull'accessibilità JAWS
La preghiamo di notare che JAWS, un programma di lettura dello schermo per Microsoft Windows, potrebbe non rilevare i moduli di iscrizione sul suo sito web creati in Klaviyo. Per garantire che i visitatori del sito che utilizzano JAWS possano comunque interagire con i moduli di iscrizione sul suo sito web, suggeriamo di aggiungere al suo sito uno snippet di codice supplementare che lo renda più accessibile a JAWS.
Copi il seguente frammento di codice e lo incolli nel file del tema principale del suo sito, in modo che JAWS rilevi e legga i suoi moduli di 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 moduli di iscrizione di Klaviyo. I moduli di iscrizione pubblicati in precedenza possono ancora contenere problemi di accessibilità da correggere, ma tenga presente che Klaviyo non correggerà automaticamente i problemi non conformi alle WCAG.
Si rechi nella scheda Avvisi modulo all'interno dell'editor per ciascuno dei suoi moduli esistenti, per risolvere eventuali problemi di accessibilità e contribuire alla conformità WCAG del suo sito web.
Risorse aggiuntive
- Accessibilità nelle e-mail e nei moduli riferimento alle migliori pratiche
Scopri come rendere più accessibile la tua e-mail e il tuo modulo d'iscrizione. Nel progettare la tua e-mail e il tuo modulo d'iscrizione, dovrai assicurarti che i tuoi progetti siano accessibili a tutti i tuoi destinatari.
- Primi passi con i moduli d'iscrizione
Scopri come creare e personalizzare i moduli d'iscrizione in Klaviyo da pubblicare sul tuo sito web per coinvolgere gli acquirenti, raccogliere e-mail e numeri di telefono e creare connessioni durature con i clienti.
- Elenco delle regole di Axe HTML 4.5