Como criar formulários de registro compatíveis com a ADA

O que você vai aprender

Saiba como usar o recurso assistente de acessibilidade na aba Alertas de formulários do editor de formulários de registro para evitar alguns dos problemas de conformidade mais comuns com as diretrizes de acessibilidade de conteúdo da web (WCAG). As empresas que buscam tornar seus sites compatíveis com a ADA devem consultar e seguir os padrões WCAG. O assistente de acessibilidade orienta você na criação de formulário de registro que sejam acessíveis para todos os visitantes do seu site.

Antes de começar

Abaixo está uma lista de problemas que o assistente de acessibilidade vai verificar. Observe que os tipos de erro listados abaixo são como o assistente de acessibilidade da Klaviyo os identifica, não nomes específicos de campo de dados no criador de formulários. Se um erro for detectado, um alerta com uma descrição e um aviso de correção aparecerá na guia Alertas de formulário.

Crie um formulário de registro compatível com a ADA

Seja para criar seu primeiro formulário de registro ou atualizar um formulário, o assistente de acessibilidade ajuda você a identificar e corrigir problemas de acessibilidade.

Para criar um formulário em conformidade com os padrões WCAG listados acima:

1. Crie um novo formulário de registro ou abra o editor de formulários para um dos seus formulários de registro existentes.
2. Use o editor para adicionar blocos de conteúdo e estilizar o formulário para que ele se ajuste à sua marca.
   

1. Clique em Alertas do formulário no canto inferior esquerdo para ver os problemas de acessibilidade identificados.
   
   Em Alertas com atividade, você verá vários cards descrevendo os elementos que não atendem aos padrões da WCAG que o assistente de acessibilidade identificou no seu formulário, além de outros problemas de conteúdo ou design identificados. Cada card incluirá uma descrição do problema e um aviso para corrigir ou dispensá-lo. Por exemplo, se você adicionar uma imagem ao seu formulário de registro, o assistente de acessibilidade vai avisar você para adicionar um texto alternativo à imagem. O texto alternativo fornece uma descrição da imagem para que os clientes que navegam no seu site com um leitor de tela possam acessar o conteúdo digital.
   
   

2. Para corrigir um problema, siga as sugestões no card e resolva ou adicione os elementos ausentes. Quando estiver satisfeito com suas alterações, clique em Corrigir.
   

1. Se você quiser ignorar uma ou mais sugestões de acessibilidade, clique em Dispensar. Dispensar um problema fará com que um modal apareça, solicitando que você cancele ou confirme sua escolha.
   
   Depois que você corrigir ou dispensar com sucesso todos os problemas identificados, você verá a mensagem "Nenhum alerta com atividade" exibida na guia Alertas do formulário.
   

1. Clique em Publicar para ativar seu formulário de registro no seu site com as atualizações de acessibilidade.
   

Relatórios de acessibilidade do JAWS

Vale observar que o JAWS, um programa leitor de tela para computador do Microsoft Windows, pode não estar detectando formulários de registro no seu site que foram criados no Klaviyo. Para garantir que visitantes do site que usam o JAWS ainda possam interagir com formulários de registro no seu site, sugerimos adicionar um snippet extra de código ao seu site, que o torna mais acessível ao JAWS.

Copie o snippet de código a seguir e cole-o no arquivo de tema principal do seu site para que o JAWS detecte e leia seus formulário de registro da 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");
      }
    });
  }; 

Próximas etapas

É importante manter os padrões WCAG em todos os seus formulários de registro do Klaviyo. Os formulários de registro publicados anteriormente ainda podem conter problemas de acessibilidade para você corrigir, mas saiba que o Klaviyo não corrigirá automaticamente nenhum problema que não esteja em conformidade com a WCAG.

Acesse a aba Alertas de formulário no editor de cada um dos seus formulários existentes para resolver quaisquer problemas de acessibilidade e ajudar a garantir a conformidade com as WCAG no seu site.

Recursos adicionais