¿Por qué estamos tan mal en accesibilidad web? - Parte 1: Educación

Publicado el:

El primero de tres artículos donde exploro el estado de la accesibilidad web actual, enfocándome en educación sobre el tema.

Introducción (Link permanente)

¿Alguna vez han pensado que algo no puede estar tan mal pero notan que en efecto es incluso peor de lo que creían? Ese fui yo hace unos días cuando pensaba que a lo mejor el estado de la accesibilidad web no está tan mal pero… Lo está, y es peor de lo que pensé.

Hace unos días salió el informe de WebAIM llamado "The WebAIM Million⁠ (Abre en una nueva pestaña) " donde se publican los resultados de análisis automáticos de accesibilidad de un millón de páginas web, y los resultados son… Decepcionantes. Ya entraré en detalle sobre dicho estudio, y si bien podría dedicarme a hablar de los principales problemas de accesibilidad y cómo arreglarlos (que hey, no me molestaría escribir en absoluto sobre esto si la gente así lo quiere) sé que esto no va a arreglar nada porque esto sería seguir apagando incendios en lugar de ir a la raíz del problema.

Quiero analizar el problema de fondo y dar mi respuesta a una pregunta que seguramente debe estar surgiendo ¿Por qué el estado de la accesibilidad web está tan mal? y más importante ¿cómo podemos mejorar esta situación?

Esta definitivamente no va a ser una respuesta fácil, por lo que he decidido dividir este artículo en 3 partes, cada una dirigida a un aspecto de este problema.

Estado de la accesibilidad web (Link permanente)

Empecemos esto abriendo la caja de Pandora que es el informe de WebAIM: de un millón de sitios web analizados, se encontraron fallas de accesibilidad en el 96.3% de estos, y lo peor de todo es que ni siquiera son fallos particularmente difíciles de corregir. Esta es la lista de errores más comunes encontrados en dichos tests, y sus porcentajes de frecuencia en el 2023 y 2022:

Tipo de error en la WCAG Porcentaje de sitios en el 2023 Porcentaje de sitios en el 2022
Texto con bajo contraste 83,6% 83,9%
No hay texto alternativo para las imágenes 58,2% 55,4%
Links vacíos 50,1% 49,7%
Campos de formulario sin etiqueta 45,9% 46,1%
Botones vacíos 27,5% 27,2%
Sitio sin etiqueta de lenguaje 18,6% 22,3%

Estos datos son más notorios en las páginas web en español. De acuerdo con este mismo informe, los sitios en nuestro idioma tienen en promedio 59.8 errores por página, lo cual es un preocupante cuando te das cuenta que eso es un 19.6% más del promedio citado en el análisis.

Es evidente que hay un problema serio, y si bien hay una tendencia a la mejora, es una tendencia que va demasiado lenta: en 5 años desde que se empezó a hacer dicho estudio, apenas haya una reducción de un 1.5% en sitios que presentan errores (en el 2018 ese porcentaje era de 97.8%) lo que muestra que no se le está dando la importancia que este problema merece.

Pero, si la accesibilidad web es algo esencial en un sitio web ¿Por qué que no se le trata como tal? Tal como lo veo, esto no tiene una única respuesta, y después de casi dos años trabajando en el sector, creo que puedo identificar tres causas: una a nivel educativo, una a nivel corporativo y (probablemente el más importante) una a nivel social.

No se enseña lo suficiente sobre accesibilidad (Link permanente)

Cuando noto los errores que muestra el estudio de WebAIM, noto que son errores bastante básicos, como no ponerle un alt a una imagen, o que un input no esté relacionado con un label. Si son errores básicos que se presentan tan comúnmente, solo puedo llegar a la conclusión de que falta educación sobre el tema, lo cual coincide con mi experiencia profesional cuando he visto a desarrolladores con meses (e incluso años) de experiencia que me han preguntado qué es la accesibilidad.

Si bien puedo entenderlo de alguien que aprendió de forma autodidacta debido a que no hay una ruta clara (he estado ahí) he notado que en rutas de educación estructuradas como cursos en línea o bootcamps ocurre uno de dos escenarios: o le hacen muy poca mención a puntos relevantes sobre accesibilidad como HTML o ARIA a comparación de lo que le dedican a otros temas, o directamente no hay mención en absoluto.

Esto genera que cada tanto haya un grupo de desarrolladores que seguramente están bien capacitados para crear un aplicaciones web que tengan buena funcionalidad, pero que no son accesibles, y eso es problemático porque la accesibilidad es esencial. No darle la importancia que se merece desde el momento de enseñarse está generando un enorme problema que afecta a las personas con discapacidad.

Y algunos deben estar pensando cosas como: “no es necesario saberlo todo para ser un desarrollador, el resto se aprende con la experiencia” o “hay gente que lleva años en la industria y no sabe todo” y es algo que en esencia estoy completamente de acuerdo. Yo personalmente no soy un experto en JavaScript, pero eso no me hace menos desarrollador que nadie, pero es que ese no es el punto.

Hay una diferencia entre conocer lo básico de un tema y entender que vas a tener que aprender de este poco a poco y el hecho de que ni siquiera sabes que debes aprenderlo porque nunca te enseñaron que esto sea parte esencial de tu trabajo. Eso último es el panorama general sobre la accesibilidad web, y no es exageración porque de nuevo, se detectaron errores de accesibilidad en el 96,3% de los sitios analizados.

Caso de estudio Link permanente

La falta de educación sobre accesibilidad es tan notoria que he llegado a ver tutoriales donde la accesibilidad no se tiene en cuenta o directamente crean algo que afecta la accesibilidad es relativamente común. Por dar un ejemplo que vi el año pasado, por parte de un reto que hubo en Platzi, crearon un tutorial llamado "7 pasos para crear un menú responsivo con CSS⁠ (Abre en una nueva pestaña) ” donde crean un menú hamburguesa responsivo solo con HTML y CSS.

Este tutorial usa la pseudo-clase de CSS :checked junto con un checkbox para manejar el menú. Este reto es bueno para aprender de algunos selectores y pseudo-clases de CSS, pero en cuestión de accesibilidad es terrible por unas cuantas razones:

  • Un lector de pantalla va a reconocer esto como un input sin etiquetar (porque el label tiene dos SVG internos que no tienen ningún tipo de nombre)
  • No va a dar el contexto necesario de cuando el menú está expandido o contraído ya que eso solo se puede lograr con JavaScript cambiando el atributo de aria-expanded.
  • De hecho, este menú no se podrá acceder ni con lector de pantalla ni con teclado, ya que el input que usan para el menú está escondido con display: none.

Puedo entender el por qué el reto, y podría justificar este tutorial si hubiera algún tipo de advertencia sobre porqué no debería usarse en producción por cuestiones de accesibilidad, pero no es el caso. A eso sumémosle que este tutorial sigue recibiendo visitas (al momento de escribir el blog, vi que el video adjunto tiene un comentario de hace 5 días), y el modo en el que hablan de este en la entrada de blog diciendo cosas como “usar JavaScript para esto es cosa del pasado” o que este menú “será de utilidad para seguramente más de uno de tus proyectos” no me quitan de la cabeza que esto tiene un impacto en las personas que lo ven, creyendo que está bien replicar este menú, dándole continuidad a este problema de accesibilidad que tenemos.

Y quiero dejar algo muy en claro: no tengo absolutamente nada en contra de Platzi, yo de hecho lo uso para aprender. He visto los esfuerzos que ha hecho Platzi para educar sobre accesibilidad: su curso de Accesibilidad Web⁠ (Abre en una nueva pestaña) impartido por Juliana Gomez fue el que despertó mi curiosidad por el tema, y tiene cursos interesantes sobre el tema como el audiocurso de Accesibilidad Web: Casos de estudio⁠ (Abre en una nueva pestaña) o el Curso de auditoría de accesibilidad⁠ (Abre en una nueva pestaña) , pero el esfuerzo de enseñar sobre accesibilidad debe ser integral y debe estar en todas las áreas, incluyendo la creación de contenido, de otro modo solo creas un mensaje confuso que alimenta el problema de accesibilidad que enfrentamos.

Y esto no solamente pasa con Platzi, he visto que Google cae en este error: ellos crearon Learn Accessibility⁠ (Abre en una nueva pestaña) , a través de web.dev⁠ (Abre en una nueva pestaña) e impartido por Carie Fisher. Es un curso que en serio recomiendo ver, el contenido es excelente y Carie sabe muchísimo del tema. El detalle es que luego en esa misma página, está un artículo de cómo crear un tooltip⁠ (Abre en una nueva pestaña) , que si bien está bastante bien, como Adrian Rosselli apuntó en el issue que él creó sobre el artículo⁠ (Abre en una nueva pestaña) , tiene algunos problemas en temas de accesibilidad que hasta la fecha no han sido solucionados.

Educación en redes sociales Link permanente

A esto se suma otro problema tangencial que he notado ocasionalmente en redes sociales: he visto a creadores de contenido que han cometido errores educando sobre el tema, que van desde compartir recursos que no son accesibles, pasando por mitificar la accesibilidad generando una percepción errónea de esta o directamente compartiendo tips o recursos que hacen las cosas incluso peor en este apartado.

Por nombrar el ejemplo más reciente que se me ocurre: este año vi que un desarrollador que respeto bastante compartió en Twitter este generador de acordeones⁠ (Abre en una nueva pestaña) que funcionan solamente con HTML y CSS. El detalle es que este generador usa un elemento input como elemento clickeable para mostrar y ocultar el contenido, de una manera bastante similar al tutorial de Platzi que mencioné, lo que trae los mismos problemas de accesibilidad.

Son descuidos que pasan, puedo entenderlo, en el fondo solo quieren ayudar a personas que están empezando en el mundo de la programación, ven estos recursos y piensan que puede ser útil. Yo no juzgo a nadie por esto, solo quiero apuntar a que este es un síntoma de lo que menciono sobre la falta de educación en accesibilidad.

A pesar de que como dije al inicio esto es un problema tangencial, sigue siendo un problema porque mucha gente usa el contenido que estas personas comparten como recursos de aprendizajes, si una persona que está recién aprendiendo y tiene como referente a este creador de contenido ve que comparte un recurso que genera resultados que no son accesibles, van a pensar que está bien usarlo, lo que aumenta un poco más el problema.

¿Cómo solucionamos esto? (Link permanente)

Sería muy facilista para mi decir “la solución es enseñar sobre accesibilidad” y dejar una lista de recursos sobre el tema (que descuiden, esa lista estará) pero esto requiere algo de matices, así que voy a dar una lista de consejos enfocados a grupos en específicos.

  • Para quienes crean o comparten contenido sobre desarrollo, empiecen a integrar la accesibilidad web en lo que comparten: ¿creas un tutorial de como hacer un componente? Asegúrate de usar la semántica correcta ¿quieres compartir una lista de generadores para crear algo en un sitio? Revisa si no tiene algún tipo de implicaciones de accesibilidad primero. Revisa si esos tips que quieres compartir no perjudican la experiencia de usuario de alguna manera, y por sobre todas las cosas, si vas a compartir pantallazos de código en una red social colócale texto alternativo a las imágenes, si no sabes como hacerlo, aquí puedes ver como añadir texto alternativo a imágenes en Twitter⁠ (Abre en una nueva pestaña) y en LinkedIn⁠ (Abre en una nueva pestaña) .

  • Para quienes directamente se dedican de lleno a enseñar sobre desarrollo web, denle a la accesibilidad web la importancia que el tema amerita. Trátenla como lo que es: un fundamento de la web. Hay mucho para enseñar sobre el tema como el HTML semántico, la WCAG, ARIA, crear componentes accesibles, pruebas con tecnologías asistivas, tests automáticos, accesibilidad desde el diseño, pero por sobre todas las cosas, enseñen el por qué es importante aprender sobre accesibilidad. Es un tema tan complejo como los fundamentos de la web y que de toda una ruta que crees sobre el tema, dedicarle solo uno o dos cursos (que es lo que he visto que le dedican cuando se enseña, si es que se enseña en primer lugar) no le hará justicia.

    Si acompañas la creación de material educativo con crear contenido, asegúrate de que dicho contenido también tenga la accesibilidad en mente (vuelvo a los ejemplos de Google y Platzi que mencioné anteriormente) porque es realmente importante que el aprendizaje sobre el tema sea íntegro.

  • Si has trabajado en el desarrollo web por un tiempo y no tienes mucho conocimiento sobre accesibilidad: está bien, se ha estado invisibilizando el tema desde tantos frentes que realmente no puedo culpar a nadie. Dicho esto, se puede remediar ahora empezando a aprender sobre el tema, y si es posible, trae el tema a tu lugar de trabajo para ayudar a crear una web más amigable para todos.

Así que si, aprender sobre el tema importa, pero también importa que haya un acercamiento más holístico: el material educativo que se cree debería tener la accesibilidad en mente, así no se hable de accesibilidad estrictamente hablando, y además, el contenido debe ser accesible en sí. Y hablando de material educativo…

Recursos (Link permanente)

Esta es una serie de recursos que yo personalmente he usado para aprender sobre accesibilidad, algunos son gratis, algunos de pago, pero de todos he aprendido algo importante. Solo un detalle: a no ser que aclare lo contrario, estos recursos están en inglés. Cabe aclarar que incluyo acá netamente recursos que crean una ruta de aprendizaje clara sobre accesibilidad, pero también mencionaré blogs de personas que sigo que hablan del tema.

Recursos gratis Link permanente

Hablando de recursos gratuitos, es buen momento de anunciar que espero poder contribuir más al tema con accesibilidadweb.today⁠ (Abre en una nueva pestaña) , una guía en proceso para aprender sobre accesibilidad web enfocada tanto al desarrollo como al diseño de interfaces. Ha sido un avance lento por varias razones, pero cuando esté listo estaré anunciando a través de redes sociales y el newsletter de este proyecto.

Recursos de pago Link permanente

  • Platzi tiene 3 cursos en particular dedicados a accesibilidad web que ya he mencionado antes, pero más interesante aun, tienen toda una ruta⁠ (Abre en una nueva pestaña) dedicada al tema donde enseñan temas de usabilidad, fundamentos de UI/UX, y varias habilidades blandas que son importantes si quieres ser un especialista en el tema. Aun si no es el caso y solo quieres entenderla a un nivel básico, recomiendo enormemente el Curso de Accesibilidad Web de Juliana Gómez⁠ (Abre en una nueva pestaña) para empezar a estudiar del tema. Todo esto por supuesto en español.
  • practical-accessibility.today⁠ (Abre en una nueva pestaña) en este momento está en early access pero se prevé que saldrá para mayo del 2023, está impartido por Sara Soueidan, una desarrolladora Front-End de Líbano dedicada al diseño inclusivo. Tengo acceso al early access y puedo decir con seguridad que el contenido es buenísimo. Adicionalmente apoya el Purchase Parity Program, lo que quiere decir que por poder adquisitivo, será más barato en esta parte del mundo y si por alguna razón no puedes adquirirlo. De momento está en inglés pero ella está trabajando en agregar subtítulos y transcripción al español.

Blogs Link permanente

Para terminar (Link permanente)

Si digo que tenemos una crisis de accesibilidad web no sería demasiado exagerar, solo hay que ver los resultados del estudio de WebAIM. La falta de educación de accesibilidad juega un papel importante en el tema, y creo que tanto quienes se dedican de lleno a la enseñanza del desarrollo web como quienes simplemente compartimos contenido deberíamos crear un mayor esfuerzo para generar una educación integral sobre el tema.

Dicho esto, mentiría si digo si eso soluciona todo: si, si más desarrolladores saben del tema, vamos a tener sitios más accesibles pero ¿qué tan compatible es la accesibilidad con la velocidad a la que se mueve la creación de productos digitales? Esto también genera un roce que termina afectando la accesibilidad de sitios web… Pero eso es algo que tocaré en un próximo artículo.

Recuerda que puedes seguirme en mis redes sociales, espero este artículo te haya gustado y nos veremos en una próxima oportunidad.

Eda de la serie The Owl House saliendo de su casa mientras dice de forma muy alegre 'byeeee'