Cómo crear formularios de inscripción adaptados a la ADA
Qué aprenderás
Aprenda a utilizar la función de asistente de accesibilidad de la pestaña Alertas de formulario del editor de formularios de inscripción 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 y seguir las normas WCAG. El asistente de accesibilidad le guiará en la creación de formularios de inscripción accesibles para todos los visitantes de su 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 la aplicación de las normas WCAG puede ayudar a satisfacer muchas de estas necesidades de accesibilidad. Tenga en cuenta que, aunque el asistente de accesibilidad pretende ayudar a identificar los problemas de accesibilidad según las normas WCAG 2.0 AA en su aplicación a los formularios de inscripción, 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 de la web, pero no garantiza el cumplimiento de las leyes aplicables. Para confirmar las implicaciones legales y los requisitos de la accesibilidad web, se recomienda buscar el asesoramiento de un abogado cualificado.
Antes de empezar
A continuación encontrará una lista de los problemas que comprobará el asistente de accesibilidad. Tenga en cuenta que los tipos de error enumerados a continuación son la forma en que los identifica el asistente de accesibilidad de Klaviyo, no los nombres específicos de campo en el 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 | Garantiza que los botones tengan un texto discernible. |
Imagen-alt | Asegura que los elementos de imagen tienen 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 WCAG 2 AA. |
Enlace en bloque de texto | Asegúrese de que los enlaces se distinguen del texto circundante de una forma 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. |
Cree un formulario de inscripción adaptado a la ADA
Tanto si está creando su primer formulario de inscripción como si está actualizando un formulario, el asistente de accesibilidad le ayudará a identificar y solucionar los problemas de accesibilidad.
Para crear un formulario en línea con las normas WCAG enumeradas anteriormente:
- Cree un nuevo formulario de inscripción o abra el editor de formularios para uno de sus formularios de inscripción existentes.
- Utilice el editor para añadir bloques de contenido y dar estilo al formulario para adaptarlo a su marca.
El asistente de accesibilidad supervisará los elementos delformulario que no cumplan las normas WCAG a medida que construya su formulario y los registrará como Alertas activas. Un formulario existente registrará todos los problemas en la sección Alertas activas.
- Haga clic en las alertas de formulario de la parte inferior izquierda para ver los problemas de accesibilidad identificados.
En Alertas activas, verá varias tarjetas que describen los elementos que no cumplen las normas WCAG que el asistente de accesibilidad ha identificado en su 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 solucionarlo o descartarlo. Por ejemplo, si añade una imagen a su formulario de inscripción, el asistente de accesibilidad le avisará para que añada texto alternativo a la imagen. El texto alternativo proporciona una descripción de la imagen para que los compradores que naveguen por su sitio con un lector de pantalla puedan acceder al contenido digital.
- Para solucionar un problema, siga las sugerencias de la ficha y resuelva o añada los elementos que faltan. Cuando esté satisfecho con los cambios, haga clic en Fijar.
Algunos problemas le pedirán que los solucione 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 de alertas del formulario. Para resolver estos problemas, tome nota de la descripción del problema en la tarjeta de alerta y, a continuación, haga clic en Editar bloque (o Editar estilos) para realizar los cambios sugeridos. Vuelva a la pestaña Alertas de formulario una vez solucionado el problema.
- Si desea ignorar una o varias de las sugerencias de accesibilidad, haga clic en Descartar. Al descartar un asunto, aparecerá un modal pidiéndole que cancele o confirme su elección.
Una vez que haya solucionado o descartado con éxito todos los problemas identificados, verá que aparece el mensaje "No hay alertas activas" en la pestaña Alertas de formulario.
Puede volver a los asuntos ignorados en otro momento abriendo el asistente y consultando sus alertas previamente descartadas. Se recomienda que solucione todos los problemas resaltados en el asistente de accesibilidad. El incumplimiento de las normas WCAG puede exponer a su empresa a riesgos legales.
- Haga clic en Publicar para poner en marcha su formulario de inscripción en su sitio con las actualizaciones de accesibilidad.
Tenga en cuenta que cuando haga clic en publicar, se le pedirá que corrija cualquier alerta de formulario activa. Puede optar por resolver los errores en la pestaña Alertas de formulario o publicarlos de todos modos.
Informes de accesibilidad de JAWS
Tenga en cuenta que es posible que JAWS, un programa lector de pantalla de ordenador para Microsoft Windows, no detecte los formularios de inscripción de su sitio web creados en Klaviyo. Para garantizar que los visitantes que utilicen JAWS puedan seguir interactuando con los formularios de registro de su sitio web, le sugerimos que añada un fragmento de código adicional a su sitio que lo haga más accesible para JAWS.
Copie el siguiente fragmento de código y péguelo en el archivo del tema principal de su sitio para que JAWS detecte y lea sus formularios de inscripción 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 sus formularios de registro de Klaviyo. Los formularios de inscripción publicados anteriormente aún pueden contener problemas de accesibilidad para que usted los corrija, pero tenga en cuenta que Klaviyo no corregirá automáticamente ningún problema que no cumpla con las WCAG.
Navegue hasta la pestaña de alertas de formularios dentro del editor de cada uno de sus formularios existentes para resolver cualquier problema de accesibilidad y ayudar así al cumplimiento de las normas WCAG en su sitio web.
Recursos adicionales
- Accesibilidad en correos electrónicos y formularios referencia de buenas prácticas
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.
- Introducción a los formularios de registro
Descubre cómo crear y personalizar formularios de registro en Klaviyo para publicarlos en tu sitio web y así poder interactuar con compradores, recopilar correos y teléfonos, y construir relaciones duraderas con los clientes.
- Lista de reglas Axe HTML 4.5