Så skapar du ADA-vänliga registreringsformulär

Du kommer att lära dig

Lär dig hur du använder funktionen tillgänglighetsassistent på fliken Formuläraviseringar i redigeraren för registreringsformulär för att undvika några av de vanligaste problemen med efterlevnad av riktlinjerna för tillgängligt webbinnehåll (WCAG). Företag som strävar efter att göra sina webbplatser ADA-vänliga bör utgå från och följa WCAG-standarder. Tillgänglighetsassistenten vägleder dig när du skapar registreringsformulär som är tillgängliga för alla dina webbplatsbesökare.

Innan du börjar

Nedan finns en lista över problem som tillgänglighetsassistenten kommer att kontrollera. Observera att feltyperna som listas nedan är hur Klaviyos tillgänglighetsassistent identifierar dem, inte specifika indatafältnamn i formulärbyggaren. Om ett fel upptäcks visas en avisering med en beskrivning och en uppmaning om åtgärd på fliken Formuläraviseringar.

Skapa ett ADA-vänligt registreringsformulär

Oavsett om du skapar ditt första registreringsformulär eller uppdaterar ett formulär hjälper tillgänglighetsassistenten dig att identifiera och åtgärda tillgänglighetsproblem.

För att skapa ett formulär i linje med WCAG-standarderna som listas ovan:

1. Skapa ett nytt registreringsformulär eller öppna formulärredigeraren för ett av dina befintliga registreringsformulär.
2. Använd redigeraren för att lägga till innehållsblock och formge formuläret så att det passar ditt varumärke.
   

1. Klicka på Formuläraviseringar längst ned till vänster för att se de identifierade tillgänglighetsproblemen.
   
   Under Aktiva aviseringar ser du olika kort som beskriver de element som inte uppfyller WCAG-standarderna och som tillgänglighetsassistenten har identifierat i ditt formulär, samt annat innehåll eller designproblem som har identifierats. Varje kort innehåller en beskrivning av problemet och en uppmaning att antingen åtgärda eller avfärda det. Om du till exempel lägger till en bild i ditt registreringsformulär meddelar tillgänglighetsassistenten dig att lägga till alt-text till bilden. Alt-text ger en beskrivning av bilden så att kunder som surfar på din webbplats med en skärmläsare kan ta del av det digitala innehållet.
   
   

2. För att åtgärda ett problem följer du förslagen på kortet och antingen löser problemet eller lägger till de element som saknas. När du är nöjd med dina ändringar klickar du på Åtgärda.
   

1. Om du vill ignorera ett eller flera av tillgänglighetsförslagen klickar du på Avfärda. Om du avfärdar ett problem visas en modal som ber dig avbryta eller bekräfta ditt val.
   
   När du har åtgärdat eller avfärdat alla identifierade problem visas meddelandet ”Inga aktiva varningar” på fliken Formulärvarningar.
   

1. Klicka på Publicera för att publicera ditt registreringsformulär på din webbplats med dina tillgänglighetsuppdateringar.
   

JAWS-tillgänglighetsrapporter

Observera att JAWS, ett skärmläsarprogram för Microsoft Windows, kanske inte upptäcker registreringsformulär på din webbplats som skapats i Klaviyo. För att säkerställa att webbplatsbesökare som använder JAWS fortfarande kan interagera med registreringsformulär på din webbplats föreslår vi att du lägger till en extra kodsnutt på webbplatsen som gör den mer tillgänglig för JAWS.

Kopiera följande kodsnippet och klistra in den i webbplatsens huvudtemafil så att JAWS upptäcker och läser dina Klaviyo-registreringsformulär:

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

Kommande steg

Det är viktigt att upprätthålla WCAG-standarder i alla dina Klaviyo-registreringsformulär. Tidigare publicerade registreringsformulär kan fortfarande innehålla tillgänglighetsproblem som du behöver åtgärda, men observera att Klaviyo inte automatiskt kommer att åtgärda några WCAG-icke-kompatibla problem.

Gå till fliken Formuläraviseringar i redigeraren för vart och ett av dina befintliga formulär för att lösa eventuella tillgänglighetsproblem och förbättra WCAG-efterlevnaden på din webbplats.

Ytterligare resurser