Cómo crear un formulario de registro compatible con la ADA
Objetivos de aprendizaje
Aprende a utilizar las funciones/características del asistente de accesibilidad en la pestaña Alertas de formulario del editor de formularios de registro para evitar algunos de los problemas más comunes de cumplimiento de las pautas de accesibilidad al contenido en la Web (WCAG). Las empresas que se esfuerzan por hacer que sus sitios web sean aptos para la ADA deben hacer referencia a las normas WCAG y seguirlas. El asistente de accesibilidad te guía en la creación de formularios de registro accesibles para todos los visitantes de tu sitio web.
Las normas WCAG pretenden que los contenidos web sean más accesibles para todos, incluidas las personas con discapacidad. La accesibilidad de los sitios web es un requisito legal en muchos países, y aplicar las normas WCAG puede ayudar a satisfacer muchas de estas necesidades de accesibilidad. Ten en cuenta que, aunque el asistente de accesibilidad pretende ayudar a identificar problemas de accesibilidad según las normas WCAG 2.0 Advanced Analytics aplicables al formulario de registro, es posible que no pueda identificar todos los requisitos de accesibilidad debido a las limitaciones conocidas de la tecnología existente o a otros factores independientes de la tecnología. El uso del asistente de accesibilidad puede ayudar con los requisitos de accesibilidad web, pero no garantiza el cumplimiento de las leyes aplicables. Para confirmar las implicaciones y requisitos legales de la accesibilidad web, se recomienda solicitar el asesoramiento de un abogado cualificado.
Antes de empezar
A continuación encontrarás una lista de problemas que comprobará el asistente de accesibilidad. Ten en cuenta que los tipos de error que se indican a continuación son cómo los identifica el asistente de accesibilidad de Klaviyo, no nombres de campo específicos del constructor de formularios. Si se detecta un error, aparecerá una alerta con una descripción y un aviso de solución en la pestaña Alertas de formulario.
Tipo de error | Descripción |
Nombre del botón | Asegúrate de que los botones tengan un texto discernible. |
Imagen-alt | Asegura que el elemento imagen tiene texto alternativo (alt text) o un rol html de "ninguno" o presentación. |
Contraste de color | Garantiza que el contraste entre los colores de primer plano y de fondo cumple los umbrales de relación de contraste de las WCAG 2 Advanced Analytics. |
Enlace en bloque de texto | Asegúrate de que los enlaces se distinguen del texto circundante de un modo que no dependa del color. |
Nombre del enlace | Garantiza que los enlaces tengan un texto discernible. |
Etiqueta | Asegura que cada elemento del formulario tenga una etiqueta. |
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 solucionar los problemas de accesibilidad.
Para crear un formulario conforme a las normas WCAG indicadas anteriormente:
- Crea un nuevo formulario de registro o abre el editor de formularios de uno de tus formularios de registro existentes.
- Utiliza el editor para añadir bloques de contenido y dar estilo al formulario para adaptarlo a tu marca.
El asistente de accesibilidad supervisará los elementos del formulario que no cumplan las normas WCAG a medida que construyas tu formulario y los registrará como alertas con actividad. Un formulario existente registrará todos los problemas en la secciónde alertas con actividad.
- Haz clic en las alertas de formulario de la parte inferior izquierda para ver los problemas de accesibilidad identificados.
En las alertas con actividad, verás varias tarjetas que describen los elementos que no cumplen las normas WCAG que el asistente de accesibilidad ha identificado en tu formulario, además de otros problemas de contenido o de diseño identificados. Cada tarjeta incluirá una descripción del problema y una indicación para solucionarlo 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 naveguen por tu sitio con un lector de pantalla puedan acceder al contenido de digital.
- Para solucionar un problema, sigue las sugerencias de la ficha y resuelve o añade el elemento que falta. Cuando estés satisfecho con los cambios, pulsa Fijar.
Algunos problemas te pedirán que los arregles en la configuración del bloque correspondiente (por ejemplo, un bloque de botones) o en la sección de estilos, en lugar de hacerlo directamente en la pestaña Alertas del formulario. Para resolver estos problemas, toma nota de la descripción del problema en la tarjeta de alerta y, a continuación, haz clic en Editar bloque (o Editar estilos) para realizar los cambios sugeridos. Navega de nuevo a la pestaña Alertas de formulario una vez que hayas solucionado el problema.
- Si deseas ignorar una o varias de las sugerencias de accesibilidad, haz clic en Descartar. Al descartar una incidencia, aparecerá un modal pidiéndote que canceles o confirmes tu elección.
Una vez que hayas solucionado o descartado con éxito todos los problemas identificados, verás un mensaje de "No con actividad alerts" en la pestaña Alertas de formulario.
Puedes volver a los asuntos ignorados en otro momento abriendo el asistente y viendo tus alertas previamente descartadas. Se recomienda que arregles todos los problemas resaltados en el asistente de accesibilidad. El incumplimiento de las normas WCAG puede exponer a tu empresa a riesgos legales.
- Haz clic en Publicar para poner tu formulario de registro en directo en tu sitio con tu accesibilidad actualizada.
Ten en cuenta que cuando hagas clic en publicar, se te pedirá que arregles cualquier alerta del formulario con actividad. Puedes elegir resolver los errores en la pestaña Alertas de formulario o publicar de todas formas.
Informes de accesibilidad de JAWS
Ten en cuenta que es posible que JAWS, un programa lector de pantalla de ordenador para Microsoft Windows, no detecte los formularios de registro de tu sitio web creados en Klaviyo. Para garantizar que los visitantes que utilicen JAWS puedan seguir interactuando con el formulario de registro de tu sitio web, te sugerimos que añadas a tu sitio un fragmento de código adicional que lo haga más accesible a 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 tu Klaviyo formulario de registro:
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 las normas WCAG en todo tu Klaviyo formulario de registro. El formulario de registro publicado anteriormente aún puede contener problemas de accesibilidad que debas solucionar, pero ten en cuenta que Klaviyo no solucionará automáticamente los problemas que no cumplan las 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 así al cumplimiento de las WCAG en tu sitio web.
Recursos adicionales
- Prácticas recomendadas para la accesibilidad en correos electrónicos y formularios
Aprende a hacer más accesibles tu correo electrónico y tu formulario de registro. Al diseñar tu correo electrónico y formulario de registro, querrás asegurarte de que tus diseños sean accesibles para todos tus destinatarios.
- Primeros pasos con los formularios de registro
Aprende a crear y personalizar formularios de registro en Klaviyo para publicarlos en tu sitio web y lograr interactuar con los compradores, recopilar correos electrónicos y números de teléfono, y establecer relaciones duraderas con tus clientes.
- lista de reglas Axe HTML 4.5