Cómo crear formularios de registro compatibles con la ADA

Qué aprenderás

Obtén información sobre cómo usar la función del asistente de accesibilidad en la pestaña Alertas del formulario del editor de formularios de registro para evitar algunos de los problemas de cumplimiento de las pautas de accesibilidad del contenido web (WCAG) más habituales. Las empresas que se esfuerzan por hacer que sus sitios web cumplan con la ADA deben consultar y seguir los estándares WCAG. El asistente de accesibilidad te guía para crear formularios de registro accesibles para todos los visitantes de tu sitio.

Antes de empezar

A continuación se incluye una lista de problemas que el asistente de accesibilidad comprobará. Ten en cuenta que los tipos de errores que se enumeran a continuación son la forma en que el asistente de accesibilidad de Klaviyo los identifica, no nombres de campos específicos en el creador de formularios. Si se detecta un error, aparecerá una alerta con una descripción y una indicación de corrección en la pestaña Alertas de formularios.

Crear un formulario de registro compatible con la ADA

Tanto si estás creando tu primer formulario de registro como si estás actualizando un formulario, el asistente de accesibilidad te ayuda a identificar y corregir problemas de accesibilidad.

Para crear un formulario en línea con los estándares WCAG mencionados arriba:

1. Crea un nuevo formulario de registro o abre el editor de formularios para uno de tus formularios de registro existentes.
2. Usa el editor para añadir bloques de contenido y dar estilo al formulario para que se adapte a tu marca.
   

1. Haz clic en Alertas de formularios en la parte inferior izquierda para ver los problemas de accesibilidad identificados.
   
   En Alertas activas, verás varias tarjetas que describen los elementos que no cumplen las normas WCAG que el asistente de accesibilidad identificó en tu formulario, además de otros problemas de contenido o diseño identificados. Cada tarjeta incluirá una descripción del problema y una indicación para corregirlo o descartarlo. Por ejemplo, si añades una imagen a tu formulario de registro, el asistente de accesibilidad te avisará para que añadas texto alternativo a la imagen. El texto alternativo proporciona una descripción de la imagen para que los compradores que navegan por tu sitio con un lector de pantalla puedan acceder al contenido digital.
   
   

2. Para corregir un problema, sigue las sugerencias de la tarjeta y resuelve el problema o añade los elementos que faltan. Cuando estés satisfecho/a con los cambios, haz clic en Corregir.
   

1. Si deseas ignorar una o varias de las sugerencias de accesibilidad, haz clic en Descartar. Al descartar un problema, aparecerá una ventana modal para que canceles o confirmes tu elección.
   
   Una vez que corrijas o descartes correctamente todos los problemas identificados, verás el mensaje «No hay alertas activas» en la pestaña Alertas del formulario.
   

1. Haz clic en Publicar para activar tu formulario de registro en tu sitio con las actualizaciones de accesibilidad.
   

Informes de accesibilidad de JAWS

Ten en cuenta que es posible que JAWS, un programa lector de pantalla para Microsoft Windows, no detecte los formularios de registro de tu sitio web que se hayan creado en Klaviyo. Para asegurarte de que los visitantes del sitio que usan JAWS puedan seguir interactuando con los formularios de registro en tu sitio web, te sugerimos añadir un fragmento de código adicional a tu sitio que lo haga más accesible para JAWS.

Copia el siguiente fragmento de código y pégalo en el archivo principal del tema de tu sitio para que JAWS detecte y lea tus formularios de registro de 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óximos pasos

Es importante mantener los estándares WCAG en todos tus formularios de registro de Klaviyo. Es posible que los formularios de registro publicados anteriormente todavía contengan problemas de accesibilidad que debas corregir, pero ten en cuenta que Klaviyo no corregirá automáticamente ningún problema de incumplimiento de WCAG.

Ve a la pestaña Alertas de formularios dentro del editor de cada uno de tus formularios existentes para resolver cualquier problema de accesibilidad y ayudar con el cumplimiento de las WCAG en tu sitio web.

Recursos adicionales