Desde nuestra fundación oficial en 2013, Webflow se ha centrado intensamente en un único objetivo: hacer que el diseño web sea más accesible para los creadores.
Ese enfoque nos ha dado muy buenos resultados.
Y lo hemos logrado todo —y esperamos hacer mucho más— sobre la base de los estándares web. Nuestro Designer se basa en estándares CSS como grid y flexbox. Puedes aplicar etiquetas semánticas de HTML5 a tus elementos de diseño con un clic (bueno, dos). Utilizamos tecnología de imágenes adaptables para garantizar que los sitios carguen rápido y hacemos que la optimización para buscadores (SEO) sea una parte central de nuestra oferta. Además, nuestro motor de interacciones permite a nuestros clientes añadir animaciones de JavaScript y Lottie, todo de forma visual.
En nuestro afán por hacer que el desarrollo web sea visual, no siempre hemos cumplido con una parte clave de las especificaciones del World Wide Web Consortium (W3C): las Pautas de Accesibilidad para el Contenido Web, o WCAG.
¿Qué es la accesibilidad, te preguntarás?
Es la práctica de crear diseños y contenidos que cualquiera pueda utilizar, independientemente de sus capacidades. Esto significa —aunque no se limita solo a ello— texto que las personas ciegas puedan "leer", audio que las personas sordas puedan "escuchar", evitar interacciones y animaciones que puedan provocar convulsiones, etcétera.
Los esfuerzos de accesibilidad se guían por la definición moderna de "discapacidad": un desajuste entre una persona y su entorno.
Esta definición es elegante no solo porque transforma nuestra perspectiva, pasando de asumir que la discapacidad es intrínseca y permanente, a entender que en realidad es relativa y puede ser no solo permanente, sino también temporal y situacional. La accesibilidad, por tanto, es la práctica de reducir el número y la intensidad de los desajustes entre los entornos que creamos y las personas que viven y trabajan en ellos.
La idea de que la web se construyó para todos está tejida en su propio ADN. Está literalmente en la primera frase que albergó la web:
La WorldWideWeb (W3) es una iniciativa de recuperación de información hipermedia de área amplia que pretende dar acceso universal a un gran universo de documentos.
Hoy en día, es igual de fácil crear un sitio web inaccesible en un editor de texto que en Webflow. Tenemos la oportunidad de ayudarte a garantizar que tus sitios web sean lo más accesibles posible.
¿Quieres aprender más sobre diseño accesible? Echa un vistazo a nuestra lista de recursos al final de esta publicación.
Las pautas para herramientas de creación web
Las pautas del W3C para herramientas de creación web establecen:
Las herramientas de creación son un elemento esencial para lograr una web universal y accesible. Las herramientas de creación ideales producen contenido web accesible y robusto, independientemente de los conocimientos técnicos de los autores del contenido. Además, son accesibles por sí mismas.
Hay dos afirmaciones clave en ese pasaje que pueden pasar desapercibidas fácilmente. A saber, que las herramientas de creación web deben:
- “producir contenido web accesible…”
- “[ser] accesibles por sí mismas”
Ahora bien, Webflow siempre ha hecho posible producir contenido web accesible. Nuestras herramientas de desarrollo visual permiten a los creadores elaborar contenido que cualquiera puede experimentar. Hacemos que sea (relativamente) sencillo publicar texto compatible con lectores de pantalla, añadir texto alternativo a las imágenes, proporcionar un contraste de color suficiente y crear páginas web fáciles de navegar con el teclado.
Sin embargo, puede que hayamos facilitado demasiado la publicación de contenido web inaccesible. Hay muchas áreas que mejorar, pero a grandes rasgos:
- No siempre hemos ofrecido componentes y ajustes predeterminados totalmente accesibles desde el principio; por ejemplo, el botón predeterminado tiene un contraste bajo.
- Algunos de estos valores predeterminados inaccesibles requieren escribir código personalizado para corregirlos, como añadir navegación por teclado para componentes complejos.
- No te hemos permitido analizar tu sitio en busca de problemas de accesibilidad y te obligamos a publicarlo antes de poder ejecutar herramientas de terceros como WAVE de WebAIM.
Cada una de estas áreas es una gran oportunidad para servirte mejor a ti y a las personas que visitan tu sitio web. La accesibilidad es mucho más que una lista de requisitos técnicos que marcar. Es un imperativo moral, que nos incumbe a todos los que creamos experiencias para otros, ya sean físicas o digitales, garantizar que todo el mundo pueda disfrutarlas.
Nuestra responsabilidad hacia las personas con discapacidad
La responsabilidad de facilitar la accesibilidad recae aún más sobre nosotros que en la mayoría de herramientas similares.
¿Por qué? Porque nuestro propósito es permitir que personas sin conocimientos de programación creen los sitios web que siempre han deseado.
Esto significa que muchos de nuestros clientes son nuevos, total o relativamente, en el mundo del diseño y desarrollo web. Puede que ni siquiera sepan qué es un atributo alt, y mucho menos por qué es importante. Quizás no tengan idea de que un contraste bajo no solo hará que su contenido sea inaccesible para muchos, sino que incluso afectará negativamente a métricas clave como el tiempo de permanencia en la página y la conversión (ya que una mala legibilidad puede afectar a cualquiera). Y puede que nunca se hayan planteado que el desplazamiento con efecto paralaje o las animaciones basadas en el ratón podrían desorientar a algunas personas mientras impresionan a otras.
Para nosotros, esto es tanto un reto como una oportunidad: no solo para facilitar la creación de sitios web accesibles con mejores herramientas, sino también para educarnos a nosotros mismos y a nuestros clientes sobre los principios y técnicas del diseño accesible.
Lo que hemos hecho hasta ahora en materia de accesibilidad
Hasta la fecha, hemos dado algunos pequeños pasos para fomentar prácticas de desarrollo web más accesibles. Recientemente hemos actualizado varios elementos y/o funciones para mejorar su accesibilidad, entre ellos:
Descripciones en la interfaz de etiquetado HTML5
Añadir descripciones a nuestra interfaz de etiquetado HTML5, para que sea más fácil saber qué etiqueta describe mejor tu elemento o sección.
Campos de atributo alt más visibles para las imágenes
Hacer que el campo de atributo alt sea más visible en los ajustes de imagen, añadirlo al gestor de recursos y configurarlo por defecto para generar atributos alt vacíos, la mejor solución para imágenes meramente decorativas
Una alternativa más accesible a las imágenes de fondo
Añadimos object-fit y object-position a nuestra (extensa) lista de propiedades CSS compatibles, ofreciendo a los usuarios una alternativa más accesible a las imágenes de fondo, que no admiten atributos alt.
Diseños preestablecidos accesibles
Y una de nuestras funciones más recientes, los diseños preestablecidos, se creó para ser accesible desde el primer momento y cumplir con las mejores prácticas de accesibilidad, como la jerarquía de encabezados, la estructura de página y la navegabilidad mediante teclado.
Son pasos pequeños, pero nos acercan a cumplir la misión de nuestra nueva iniciativa de accesibilidad: permitir que Webflow genere contenido accesible.
Por qué tu equipo de diseño debería usar Webflow
Descubre cómo los equipos de diseño están optimizando sus flujos de trabajo —y creando mejores experiencias— con Webflow.
Qué haremos mañana respecto a la accesibilidad
Todo lo anterior es precisamente la razón por la que ahora nos dedicamos a mejorar nuestra labor en materia de accesibilidad.
Pero queremos dejar algo muy claro: será un camino largo. Hay muchos pasos entre el Webflow de hoy y un futuro Webflow diseñado para la accesibilidad.
Con esto en mente, así es como se ve nuestra (muy preliminar) hoja de ruta hacia la accesibilidad:
- Convertir la accesibilidad en un OKR (objetivo y resultado clave) de la empresa. ¿Por qué? Porque no hay forma de comprometerse y tener éxito en una tarea empresarial sin establecer puntos de referencia, plazos, hitos y métricas medibles.
- Desarrollar nuestra experiencia interna en accesibilidad. Hemos incorporado a 2 expertos en la materia al equipo y, junto con un grupo de colaboradores, nos están ayudando a integrar las mejores prácticas de accesibilidad en todos nuestros procesos de desarrollo. Además, 70 de nosotros —poco más de un tercio de la empresa— de diversas disciplinas, nos hemos inscrito en formación sobre accesibilidad.
- Incorporar la accesibilidad en nuestras prácticas de diseño, desarrollo y control de calidad. Como ocurre con la mayoría de las disciplinas de desarrollo web (ya sea SEO, contenido o UX), la accesibilidad funciona mejor cuando se integra en cada paso del proceso. Es mucho más fácil crear algo pensando en la accesibilidad que intentar añadirla a última hora durante el desarrollo.
Estos pasos son lo suficientemente generales como para comunicarlos aquí. Más allá de esto, será tarea de nuestros ingenieros de accesibilidad, diseñadores de producto y sus gestores de producto definir la hoja de ruta de accesibilidad.
Dicho esto, nuestra hoja de ruta de accesibilidad para el producto incluirá:
- Garantizar que nuestros elementos y componentes estándar sean accesibles
- Añadir herramientas y formación en contexto para mejorar la accesibilidad de los sitios
- Incorporar auditorías de accesibilidad en la plataforma, ya sea de forma nativa o mediante integración
Pero, como mencionamos anteriormente, la accesibilidad no trata solo de requisitos técnicos.
Por eso, también estamos actualizando nuestro enfoque de contenido para enfatizar mejor la accesibilidad. Esto significa que no solo produciremos más contenido centrado en la accesibilidad, sino que también la tendremos presente en todo lo que escribamos, grabemos y lancemos, desde nuestras publicaciones de escaparate hasta los análisis de mejores prácticas y tendencias que publicamos con menos frecuencia.
También exploraremos cómo hacer que los diseños sean más accesibles en nuestros vídeos de la Universidad y señalaremos cuándo ciertas opciones de diseño pueden contribuir a la falta de accesibilidad (como hicimos con la opción autoflow dense de CSS grid).
Igualmente importante, vamos a empezar a integrarlo en nuestras prácticas de diseño de marca. Lo tendremos en cuenta en nuestras sesiones de revisión semanales y en cada evaluación previa al lanzamiento. Lo convertiremos en un tema recurrente en nuestras retrospectivas de proyectos.
Y, probablemente lo más importante, vamos a incorporar las consideraciones de accesibilidad en nuestras prácticas de contratación y en otros esfuerzos de diversidad e inclusión. Porque, como a muchas personas de la comunidad de personas con discapacidad (y otros grupos marginados) les gusta decir con razón:
Nada sobre nosotros sin nosotros.
Para Webflow, esto significa:
- Contratar a personas con experiencia en accesibilidad y a personas con discapacidad
- Incluir a personas con discapacidad en las pruebas de usuario y en los estudios de mercado, tanto en el ámbito del producto como en el de marketing
- Asegurarnos de que nuestras directrices de voz y tono, así como nuestros marcos de comunicación, tengan en cuenta la accesibilidad y a las personas con discapacidad
Nos entusiasma afrontar este desafío enorme e increíblemente importante
Y, como mencionamos antes, la solución no es solo técnica. Así que, mientras nuestros expertos en ingeniería y diseño se ocupan de nuestras herramientas, los que estamos en el equipo de contenido trabajamos en crear guías para que puedas hacer que tus sitios de Webflow sean más accesibles desde hoy mismo.
Mantente al tanto.
Unas palabras de John
Cuando leas este artículo, ya habré dicho un (agridulce) "hasta pronto" a Webflow.
En mis 4 años y medio en el mundo del desarrollo visual, he participado en una gran cantidad de funciones de Webflow, lanzamientos de marketing, rediseños y, por supuesto, artículos aquí en el blog de Webflow. Estoy orgulloso de todos y cada uno de esos proyectos, naturalmente. Pero no podría estar más feliz de que este artículo sea mi última contribución al blog, al menos como empleado.
¿Por qué? Por la importancia abrumadora de la accesibilidad.
Si la web quiere cumplir algún día su misión de ofrecer acceso universal al conocimiento, necesita ser mucho más accesible. Y depende de cada uno de nosotros, los que construimos para la web, ayudar a que eso suceda.
Recursos adicionales para aprender sobre accesibilidad:
- Diseño inclusivo de Microsoft
- Componentes inclusivos de Heydon Pickering
- WebAIM
- Curso de Introducción a la accesibilidad web del World Wide Web Consortium
- Referencia rápida de las Pautas de Accesibilidad para el Contenido Web (WCAG)
