Rediseño accesible: analizador financiero

Publicado el:

Revisando mi proyecto personal más grande, me di cuenta que su accesibilidad deja mucho que desear. Aprovecharé este proceso de rediseño y documentaré el proceso para poder enseñar sobre qué podemos hacer para hacer nuestros sitios más accesibles.

Introducción (Link permanente)

No tengo tantos proyectos en mi repositorio de GitHub, pero uno de los que me siento más orgulloso de hacer es este analizador financiero⁠ (Abre en una nueva pestaña) . Con este logré poner en práctica todo lo que recién había aprendido sobre manipulación del DOM y mejoré mis habilidades con JavaScript (es el proyecto que a la fecha más JavaScript he usado). Eso sin mencionar que pude aplicar lo que sé de contabilidad, lo cual fue extrañamente satisfactorio, considerando mi relación pasivo-agresiva con la contaduría (Historia para otro día).

Ahora he aprendido más sobre varios temas de diseño web, y uno de los temas en los que decidí enfocarme es en la accesibilidad web. El otro día revisando mi diseño me di cuenta de que en serio cometí varios errores en ese aspecto. Eso sumado a mis ganas de empezar a hablar más sobre el tema me dio esta idea de matar dos pájaros de un solo tiro: rediseñar mi analizador financiero mientras documento mi proceso.

Probablemente no sepas qué es un analizador financiero, así que antes de hablar de las fallas de accesibilidad que cometí en la elaboración de este, permíteme darte una guía rápida de cómo funciona.

Guía por el proyecto (Link permanente)

Un analizador financiero lo que hace es usar la información financiera de una empresa (o a nivel personal) para realizar una serie de cálculos que indican su estado financiero en rubros como liquidez (su capacidad de pago de deudas), endeudamiento, rentabilidad y eficiencia. Pueden verlo en funcionamiento aquí, pero voy a hablar un poco de cómo funciona:

  • El proyecto está dividido en cinco secciones en total: 3 de diligenciamiento de datos (activos, pasivos y patrimonios y estado de resultados) una sección que genera un resumen de los datos ingresados y, por último, una sección con el reporte ya generado.
  • En la parte superior se puede ver una barra que va marcando el progreso y en qué sección está el usuario.
  • En caso de no saber qué tipo de valor se agrega en cada recuadro, el usuario puede hacer clic en el botón de ayuda que abrirá un modal con la información necesaria.
  • Así mismo, si necesita corregirse información en secciones anteriores después de generar el resumen, al hacer clic en "Corregir información" se abrirá otro modal que permite regresarse a alguna de las partes.

Este analizador financiero funciona bien en teoría, pero cuando lo examinas desde los lentes de la accesibilidad web vas a ver que hay muchos fallos importantes. Creé este proyecto en un momento donde no conocía mucho del tema, así que es medianamente entendible que cometiera esos fallos. Veamos un poco más en detalle dichos fallos.

Fallos de accesibilidad (Link permanente)

Dicho todo esto ¿qué fallos tiene este sitio en términos de accesibilidad? Hay bastantes, desde fallos en navegación de teclado, errores de semántica en el HTML, elementos que al pasar por un lector de pantallas no dan el suficiente contexto al usuario y componentes que no funcionan como deberían. Enlistemos algunos de los problemas de este proyecto:

  • A pesar de que en la parte superior hay un indicador del paso en el que el usuario va, en un lector de pantalla esto no le va a informar al usuario en qué sección se encuentra.
  • Algunos elementos a pesar de poder ser navegables con teclado no se pueden activar con este (por ejemplo, el botón de cerrar el modal se puede seleccionar con teclado, pero al usar la tecla Enter no funcionará)
  • A pesar de que la tabla de resumen es semánticamente correcta en el sentido de que, si es correcto mostrarla como tabla, la navegación a través de un lector de pantallas no es la ideal.
  • El reporte final no es navegable por teclado.
  • Las opciones del modal en la sección de resumen no se pueden navegar por teclado.
  • En general, un modal tal vez no sea la mejor alternativa en este proyecto para mostrar la información relacionada a la información sobre los ítems del analizador financiero, mucho menos como yo decidí generar la información del modal (pero descuiden, igual los modales tienen espacio en este proyecto)
  • Los botones de información no dan el suficiente contexto a usuarios de lectores de pantalla, además de ser muy pequeños, lo que puede generar inconvenientes a usuarios de dispositivos touch.

Eso solo por mencionar lo que he podido notar hasta ahora, puede que note muchos más errores por el camino. Mi objetivo es rediseñar este proyecto enfocándome principalmente en hacerlo más accesible. Para esto voy a ir pasando por cada uno de los lenguajes que usamos para el desarrollo web.

HTML Link permanente

HTML es la capa más robusta de nuestro sitio, y en temas de accesibilidad es muy importante, tanto que me creería que podría llevar más de una entrada de blog cubriendo el marcado de cada componente para hacerlo accesible.

Quiero revisar cada componente de este sitio y crear una estructura accesible usando HTML semántico y los roles y estados que WAI-ARIA nos ofrece Web Accesible Iniciative - Accesible Rich Internet Applications por sus siglas en inglés. Una vez con esto hecho tenemos una buena parte del trabajo hecha para hacer nuestro contenido accesible.

CSS Link permanente

Después de crear una estructura sólida en el sitio, usaré CSS para agregar varios detalles de un contenido accesible: estado de focus de elementos, ocultar elementos de forma visual (pero no para tecnología asistida) manejo de contraste, tamaño de elementos interactivos y demás.

CSS es importante también en temas de accesibilidad porque varias de sus medias queries están relacionadas con respetar las preferencias de usuarios, y eso es algo que tendremos muy en mente con dos situaciones en concreto: animaciones, esquema de colores (también conocido como el modo claro y oscuro) al momento del rediseño. Adicionalmente, adaptaré este proyecto para hacerlo amigable con algo que no muchos desarrolladores tienen en mente: temas de alto contraste. Siendo concretos, tener en cuenta un conjunto de prácticas para hacer que este sitio se vea bien si el usuario ve este sitio con estos temas.

JavaScript Link permanente

Ya entre HTML y CSS tenemos adelantada la mayor parte del trabajo para hacer el contenido accesible, pero aparte de lo obvio (agregarla la funcionalidad al diseño) usaremos JavaScript para terminar de pulir ciertos detalles. Principalmente para cambiar el estado de aria de ciertos elementos, pero también tendrá otros usos (como permitirle controlar al usuario que tema ver) lo que termina de añadir los detalles finales para hacer a este proyecto más accesible.

Lista de artículos (Link permanente)

A medida que trabaje en estas entradas de blog, añadiré aquí el link de cada parte junto con una lista de los temas que toco. Espero que todos estos temas que voy a tocar te sean útiles y te den una idea de como implementar acciones en tu sitio que lo hagan más accesibles.

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