Hoe je ADA-vriendelijke aanmeldingsformulier maakt

Wat je leert

Leer hoe je de functies voor de toegankelijkheidsassistent gebruikt op het tabblad Form Alerts in de editor voor aanmeldingsformulier om een aantal van de meest voorkomende problemen met compliance met de richtlijnen voor toegankelijkheid van webcontent (WCAG) te voorkomen. Bedrijven die hun websites ADA-vriendelijk willen maken, moeten de WCAG-standaarden raadplegen en volgen. De toegankelijkheidsassistent begeleidt je bij het maken van aanmeldingsformulier die toegankelijk zijn voor al je sitebezoekers.

Voordat je van start gaat

Hieronder vind je een lijst met problemen die de toegankelijkheidsassistent controleert. Houd er rekening mee dat de hieronder vermelde fouttypen aangeven hoe de toegankelijkheidsassistent van Klaviyo ze identificeert, en niet de specifieke namen van invoervelden in de form builder. Als er een fout wordt gedetecteerd, verschijnt er een melding met een beschrijving en een prompt om het op te lossen op het tabblad Form alerts.

Maak een ADA-vriendelijk aanmeldingsformulier

Of je nu je eerste aanmeldingsformulier maakt of een formulier bijwerkt, de toegankelijkheidsassistent helpt je om toegankelijkheidsproblemen te identificeren en op te lossen.

Om een formulier te maken dat in lijn is met de WCAG-standaarden die hierboven staan:

1. Maak een nieuw aanmeldingsformulier of open de formuliereditor voor een van je bestaande aanmeldingsformulieren.
2. Gebruik de editor om contentblokken toe te voegen en het formulier op te maken zodat het bij je merk past.
   

1. Klik linksonder op de Form alerts om de geïdentificeerde toegankelijkheidsproblemen te bekijken.
   
   Onder Actief alerts zie je verschillende kaarten die de elementen beschrijven die niet voldoen aan WCAG-normen en die de toegankelijkheidsassistent in je formulier heeft geïdentificeerd, naast andere geïdentificeerde content- of ontwerpproblemen. Elke kaart bevat een beschrijving van het probleem en een aanwijzing om het te herstellen of te negeren. Als je bijvoorbeeld een afbeelding aan je aanmeldingsformulier toevoegt, waarschuwt de toegankelijkheidsassistent je om alt-tekst aan de afbeelding toe te voegen. Alt-tekst geeft een beschrijving van de afbeelding, zodat shoppers die je site met een schermlezer bekijken toegang hebben tot de digitale content.
   
   

2. Volg de suggesties op de kaart om een probleem op te lossen en los het probleem op of voeg de ontbrekende elementen toe. Als je tevreden bent met je wijzigingen, klik je op Oplossen.
   

1. Als je een of meer toegankelijkheidssuggesties wilt negeren, klik je op Negeren. Als je een probleem negeert, verschijnt er een modaal venster waarin je wordt gevraagd om je keuze te annuleren of te bevestigen.
   
   Zodra je alle geïdentificeerde problemen succesvol hebt opgelost of genegeerd, zie je het bericht "Geen actieve waarschuwingen" in het tabblad Formulierwaarschuwingen.
   

1. Klik op Publiceren om je aanmeldingsformulier live te zetten op je site met je toegankelijkheidsupdates.
   

JAWS-toegankelijkheidsrapporten

Let op: JAWS, een computerschermlezerprogramma voor Microsoft Windows, detecteert mogelijk geen aanmeldingsformulieren op je website die in Klaviyo zijn gemaakt. Om ervoor te zorgen dat websitebezoekers die JAWS gebruiken nog steeds met aanmeldingsformulieren op je website kunnen communiceren, raden we aan om een extra stukje code aan je site toe te voegen dat die toegankelijker maakt voor JAWS.

Kopieer het volgende codefragment en plak het in het hoofdthema-bestand van je site, zodat JAWS je Klaviyo-aanmeldingsformulieren kan detecteren en voorlezen:

  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");
      }
    });
  }; 

Volgende stappen

Het is belangrijk om in al je Klaviyo-aanmeldingsformulieren aan de WCAG-standaarden te voldoen. Eerder gepubliceerde aanmeldingsformulieren kunnen nog toegankelijkheidsproblemen bevatten die je moet oplossen, maar let op: Klaviyo lost WCAG-niet-conforme problemen niet automatisch op.

Navigeer naar het tabblad Formuliermeldingen in de editor voor elk van je bestaande formulieren om toegankelijkheidsproblemen op te lossen en te helpen met WCAG-compliance op je website.