Como criar formulários de inscrição compatíveis com a ADA
O que você vai aprender
Saiba como usar o recurso de assistente de acessibilidade na guia Form Alerts (Alertas de formulário ) do editor de formulários de inscrição para evitar alguns dos problemas mais comuns de conformidade com as WCAG (Diretrizes de acessibilidade de conteúdo da Web). As empresas que se esforçam para tornar seus sites compatíveis com a ADA devem fazer referência e seguir os padrões WCAG. O assistente de acessibilidade orienta o senhor na criação de formulários de inscrição que sejam acessíveis a todos os visitantes do seu site.
Os padrões WCAG têm como objetivo tornar o conteúdo da Web mais acessível para todos, inclusive para pessoas com deficiências. A acessibilidade do site é um requisito legal em muitos países, e a implementação dos padrões WCAG pode ajudar a satisfazer muitas dessas necessidades de acessibilidade. Observe que, embora o assistente de acessibilidade tenha o objetivo de ajudar a identificar problemas de acessibilidade de acordo com os padrões WCAG 2.0 AA, conforme eles se aplicam aos formulários de inscrição, ele pode não ser capaz de identificar todos os requisitos de acessibilidade devido a limitações conhecidas da tecnologia existente ou a outros fatores independentes da tecnologia. O uso do assistente de acessibilidade pode ajudar com os requisitos de acessibilidade da Web, mas não garante a conformidade com as leis aplicáveis. Para confirmar as implicações e os requisitos legais de acessibilidade da Web, recomenda-se que o senhor procure a orientação de um advogado qualificado.
Antes de começar
Abaixo está uma lista de problemas que o assistente de acessibilidade verificará. Observe que os tipos de erro listados abaixo são a forma como o assistente de acessibilidade do Klaviyo os identifica, e não os nomes específicos do campo de dados no construtor de formulários. Se um erro for detectado, um alerta com uma descrição e um prompt de correção será exibido na guia Form alerts (Alertas de formulário ).
Tipo de erro | Descrição |
Nome do botão | Garante que os botões tenham texto discernível. |
Imagem-alt | Garante que os elementos de imagem tenham texto alternativo (texto alternativo) ou uma função html de "nenhum" ou apresentação. |
Contraste de cores | Garante que o contraste entre as cores do primeiro plano e do plano de fundo atenda aos limites da relação de contraste WCAG 2 AA. |
Link-in-text-block | Certifique-se de que os links sejam distinguíveis do texto ao redor de uma forma que não dependa da cor. |
Nome do link | Garante que os links tenham texto discernível. |
Rótulo | Garante que cada elemento do formulário tenha um rótulo. |
Criar um formulário de inscrição compatível com a ADA
Quer esteja criando seu primeiro formulário de inscrição ou atualizando um formulário, o assistente de acessibilidade o ajuda a identificar e corrigir problemas de acessibilidade.
Para criar um formulário alinhado com os padrões WCAG listados acima:
- Crie um novo formulário de inscrição ou abra o editor de formulários de um de seus formulários de inscrição existentes.
- Use o editor para adicionar blocos de conteúdo e estilizar o formulário de acordo com sua marca.
O assistente de acessibilidade monitorará os elementos do formulário que não atendem aos padrões WCAG à medida que o senhor cria o formulário e os registrará como alertas ativos. Um formulário existente registrará todos os problemas na seçãoActive alerts (Alertas ativos).
- Clique nos alertas de formulário no canto inferior esquerdo para ver os problemas de acessibilidade identificados.
Em Active alerts (Alertas ativos), o senhor verá vários cartões que descrevem os elementos que não atendem aos padrões WCAG que o assistente de acessibilidade identificou no seu formulário, além de outros problemas de conteúdo ou design identificados. Cada cartão incluirá uma descrição do problema e uma solicitação para corrigi-lo ou descartá-lo. Por exemplo, se o senhor adicionar uma imagem ao seu formulário de inscrição, o assistente de acessibilidade o alertará para adicionar um texto alternativo à imagem. O texto alternativo fornece uma descrição da imagem para que os compradores que navegam no seu site com um leitor de tela possam acessar o conteúdo digital.
- Para corrigir um problema, siga as sugestões do cartão e resolva ou adicione os elementos ausentes. Quando o senhor estiver satisfeito com as alterações, clique em Fix.
Alguns problemas o levarão a corrigi-los nas configurações do respectivo bloco (por exemplo, um bloco de botões) ou na seção de estilos, em vez de diretamente na guia Form alerts (Alertas de formulário ). Para resolver esses problemas, anote a descrição do problema no cartão de alerta e clique em Edit block (ou Edit Styles) para fazer as alterações sugeridas. Navegue novamente para a guia Form alerts (Alertas de formulário ) depois de corrigir o problema.
- Se o senhor quiser ignorar uma ou mais sugestões de acessibilidade, clique em Dismiss. A rejeição de um problema fará com que apareça uma mensagem modal, solicitando que o senhor cancele ou confirme sua escolha.
Depois de corrigir ou descartar com êxito todos os problemas identificados, o senhor verá a mensagem "No active alerts" (Nenhum alerta ativo) exibida na guia Form alerts (Alertas de formulário ).
O senhor pode retornar aos problemas ignorados mais tarde, abrindo o assistente e visualizando os alertas descartados anteriormente. Recomenda-se que o senhor corrija todos os problemas destacados no assistente de acessibilidade. A não conformidade com os padrões WCAG pode expor sua empresa a riscos legais.
- Clique em Publish (Publicar ) para ativar o formulário de inscrição em seu site com as atualizações de acessibilidade.
Observe que, ao clicar em publicar, o senhor será solicitado a corrigir todos os alertas de formulário ativos. O senhor pode optar por resolver os erros na guia Alertas de formulário ou publicar de qualquer forma.
Relatórios de acessibilidade do JAWS
Observe que o JAWS, um programa de leitura de tela do computador para Microsoft Windows, pode não estar detectando formulários de inscrição no seu site que foram criados no Klaviyo. Para garantir que os visitantes do site que usam o JAWS ainda possam interagir com os formulários de inscrição em seu site, sugerimos adicionar um trecho extra de código ao seu site que o torne mais acessível ao JAWS.
Copie o seguinte trecho de código e cole-o no arquivo de tema principal do seu site para que o JAWS detecte e leia os formulários de inscrição do 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 inscrição do Klaviyo. Os formulários de inscrição publicados anteriormente ainda podem conter problemas de acessibilidade que devem ser corrigidos pelo senhor, mas observe que o Klaviyo não corrigirá automaticamente nenhum problema não compatível com as WCAG.
Navegue até a guia Form alerts (Alertas de formulário ) no editor de cada um dos formulários existentes para resolver quaisquer problemas de acessibilidade e ajudar na conformidade com as WCAG em seu site.
Recursos adicionais
- Referência de práticas recomendadas de acessibilidade em e-mails e formulários
Saiba como tornar seu e-mail e formulário de registro mais acessíveis. Ao projetar seu e-mail e formulário de registro, o senhor deve certificar-se de que seus designs sejam acessíveis a todos os seus Destinatários.
- Introdução aos formulários de registro
Saiba como criar e personalizar formulários de registro na Klaviyo para interagir com compradores, coletar e-mails e números de telefone e criar relacionamentos duradouros.
- Lista de regras do Axe HTML 4.5