Hace unos meses, nuestro equipo de estudio de marca descubrió que muchas de nuestras páginas de marketing no eran muy accesibles.
Nuestros compañeros especializados en accesibilidad nos explicaron los diversos problemas de nuestras páginas, como una navegación por teclado poco clara, exceso de movimiento y malas experiencias con lectores de pantalla.
Habíamos estado usando una lista de verificación de accesibilidad ligera para revisar nuestras páginas, pero este enfoque tenía dos problemas. Primero, la lista solo arañaba la superficie de las consideraciones de accesibilidad. Segundo, como la usábamos principalmente en la etapa de control de calidad (QA), no estábamos considerando la accesibilidad al principio de nuestro proceso de diseño, donde es más importante.
A medida que aprendíamos más, empezamos a consultar otras listas de verificación y pautas de accesibilidad web, incluido el estándar de la industria para contenido web, WCAG 2.1. Aunque muchas de estas nos ayudaron a implementar mejores prácticas de accesibilidad tanto en nuestro proceso de diseño como en las construcciones en Webflow, a menudo eran demasiado técnicas para entenderlas fácilmente y aún requerían que ideáramos implementaciones específicas para Webflow.
Fue entonces cuando decidimos crear nuestro propio conjunto de pautas de accesibilidad: un único conjunto integral de directrices, en lenguaje sencillo, que incluía la implementación específica de Webflow para nuestros usuarios.
Esta iniciativa era originalmente solo para uso interno, para que pudiéramos trabajar en acercar las páginas que diseñamos y construimos al cumplimiento de WCAG AA. Pero a medida que empezamos a hablar sobre el Día Mundial de Concienciación sobre la Accesibilidad (GAAD), decidimos compartir la lista de verificación con nuestra comunidad para ayudar a hacer de la web un lugar más accesible, un sitio #MadeInWebflow a la vez.
Así es como lo hicimos.
Creación de las pautas
El primer paso en la construcción fue buscar y decidir nuestra versión de las pautas de accesibilidad. La accesibilidad web es un área amplia, con consideraciones matizadas en varios elementos de diseño y desarrollo. Estas consideraciones pueden ir desde el contraste de color hasta el código semántico, el uso de movimiento y mucho más.
Comenzamos consolidando las diversas listas de verificación internas que ya teníamos para tener una idea más clara de qué áreas ya teníamos cubiertas y qué nos faltaba. Para la investigación, nos resultaron útiles los siguientes recursos:
- WCAG 2.1
- La lista de verificación de The A11y Project
- Los cursos de accesibilidad digital de Deque University
- Los recursos de accesibilidad de MDN
También tuvimos la suerte de contar con la orientación de expertos en accesibilidad de nuestro equipo de ingeniería. Proporcionaron documentación sobre tipografía responsiva y cómo probar nuestros sitios para lectores de pantalla.
Utilizando estas diversas fuentes, elaboramos una lista completa de pautas que priorizamos por impacto y esfuerzo. Para nuestro primer lanzamiento, redujimos la lista a elementos que tenían un impacto relativamente grande en la accesibilidad general de una página web y que eran alcanzables en Webflow.
Voz y tono
Desde el principio, supimos que queríamos que nuestras pautas fueran más fáciles de entender que gran parte de la documentación de accesibilidad existente. Trabajamos con nuestra redactora de UX, Shannon, para iterar sobre el texto de nuestras pautas, y aquí hay algunas de las consideraciones que usamos al escribir:
- Comenzar cada pauta con un verbo, p. ej., “Se proporciona un mecanismo para pausar el video de fondo” → “Proporcionar un método para pausar el video de fondo”
- Tener una sola acción por paso para las instrucciones
- Manteniéndonos fieles a nuestro tono más informal y cercano, en lugar de algo más formal o técnico
Formato
Originalmente usamos Coda para alojar la lista de verificación. Eso nos permitió incorporar un seguimiento a nivel de página para ver qué pautas habíamos implementado en cada una. Aprovechamos las fórmulas y las funcionalidades de vista de Coda para filtrar, ordenar, calcular y realizar un seguimiento del progreso, además de mostrar los datos de nuestra lista de diversas maneras.
Para el lanzamiento público de la lista, decidimos crearla en Webflow para tener control total sobre su funcionalidad, presentarla en HTML —uno de los formatos más accesibles— y optimizar el SEO para facilitar su descubrimiento.
Crea sitios web que dan resultados.
Diseña visualmente, publica al instante y escala de forma segura y rápida. Todo con la plataforma de marketing web con IA de Webflow.
Cómo construimos el sitio
Construir el sitio de la lista en Webflow nos permitió divertirnos con su funcionalidad. Como usuarios de Webflow, pensamos en las distintas formas en que usaríamos la lista para nuestras propias creaciones de páginas.
Comenzamos centrándonos en una visualización estratégica y dinámica, así como en cómo organizar las tareas de una manera que se alineara con el proceso preferido de cada persona.
Luego, decidimos agrupar las pautas por categoría de forma predeterminada y ofrecer opciones secundarias basadas en dónde se implementaba una tarea en Webflow y en qué momento del proceso de diseño debía considerarse.
Para la funcionalidad de las casillas de verificación, pensamos en cómo esta lista podría ser más útil para quienes trabajan en equipo. Nos preguntamos:
- ¿Cómo podríamos hacer que las casillas de verificación se mantuvieran entre distintas páginas?
- ¿Qué pasaría si pudieras compartir el progreso de la lista con un compañero para que pueda continuar donde tú lo dejaste?
Tras algunas iteraciones con nuestro equipo de ingeniería, logramos crear algo que nos permite guardar, compartir y borrar el progreso de la lista entre páginas y pestañas del navegador usando Javascript personalizado.
Para asegurarnos de que el sitio de la lista fuera accesible, revisamos periódicamente los componentes interactivos y la estructura de la página durante todo el desarrollo, usando nuestras propias pautas como punto de partida.
Una vez que importamos el contenido de las pautas al CMS, trabajamos en los detalles finales, como la vista previa del código personalizado y los toques de estilo dentro de los campos de texto enriquecido, directamente en Webflow.
Finalmente, enviamos el sitio de la lista a nuestros compañeros para obtener comentarios sobre su funcionalidad y nuestra documentación de pautas.
Esto es solo el comienzo: nuestros próximos pasos
Internamente, estamos trabajando en un proceso de auditoría para implementar estas pautas en nuestras páginas antiguas y acercarlas al cumplimiento de WCAG AA. También estamos desarrollando un mejor proceso de control de calidad para asegurar que todas las páginas que diseñamos y construimos actualmente, y en el futuro, cumplan con estas pautas.
Con este lanzamiento en particular, esperábamos publicar tanto como fuera posible, en cuanto a pautas y funcionalidad del sitio, lo antes posible. Seguiremos añadiendo pautas al sitio basándonos en lo que aprendamos y en sus comentarios. Hemos incluido un formulario de comentarios en el sitio de la lista para saber qué pautas les gustaría ver en el futuro y conocer cualquier otra opinión o sugerencia que tengan sobre el sitio.
Por último, animamos a todos los usuarios de Webflow a participar en la conversación en el foro de Webflow. Estamos emocionados por seguir mejorando este recurso durante años y mantenernos responsables en el proceso.
