Cómo crear formularios de registro compatibles con la ADA

Objetivos del artículo

Descubre 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 más comunes de las pautas de accesibilidad del contenido web (WCAG). Las empresas que buscan 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 muestra una lista de problemas que el asistente de accesibilidad revisará. 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, y no nombres específicos de campos en el creador de formularios. Si se detecta un error, aparecerá una alerta con una descripción y una indicación para solucionarlo en la pestaña Alertas de formularios.

Crear un formulario de registro compatible con la ADA

Ya sea que estés creando tu primer formulario de registro o actualizando un formulario, el asistente de accesibilidad te ayuda a identificar y corregir problemas de accesibilidad.

Para crear un formulario en línea con las normas WCAG que se enumeran 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 agregar bloques de contenido y darle estilo al formulario para que se ajuste a tu marca.
   

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

2. Para corregir un problema, sigue las sugerencias de la tarjeta y resuelve o agrega los elementos faltantes. Cuando estés satisfecho con los cambios, haz clic en Corregir.
   

1. Si quieres ignorar una o más sugerencias de accesibilidad, haz clic en Descartar. Al descartar un problema, aparecerá una ventana modal en la que se te pedirá cancelar o confirmar tu elección.
   
   Una vez que corrijas o descartes correctamente todos los problemas identificados, verás un mensaje de "No hay alertas con actividad" en la pestaña Alertas de formularios.
   

1. Haz clic en Publicar para activar el formulario de registro en el 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 computadoras con Microsoft Windows, no esté detectando los formularios de registro de tu sitio web que se crearon en Klaviyo. Para garantizar que los visitantes del sitio que usan JAWS puedan seguir interactuando con los formularios de registro en tu sitio web, sugerimos agregar un fragmento adicional de código al sitio que lo haga más accesible para JAWS.

Copia el siguiente fragmento de código y pégalo en el archivo del tema principal 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");
      }
    });
  }; 

Siguientes pasos

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

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

Recursos adicionales