Artículos

Soluciones centradas en usuarios: accesibilidad web y Smalls Jazz Club

El diseño y desarrollo web centrados en el usuario se enfocan en sus necesidades y consideran las decisiones sobre el producto desde su perspectiva. Esto incluye crear sitios que las personas con discapacidad puedan recorrer fácilmente para lograr su objetivo. Cuando uno de nuestros clientes actuales, Smalls Jazz Club, nos pidió ayuda para hacer su sitio más accesible para usuarios con discapacidad, nos entusiasmó empezar a trabajar.

Sobre el cliente

Smalls Jazz Club, ubicado en Greenwich Village, Nueva York, presenta conciertos de jazz en vivo todas las noches. Debido a COVID-19, actualmente los realizan sin público y los transmiten en directo; puedes leer más en el New York Times. Además de transmitir conciertos, su sitio incluye información sobre próximas presentaciones, una tienda de artículos de Smalls y música de los artistas, y un archivo de grabaciones de audio y video de conciertos anteriores disponible para suscriptores. Nuestro desafío fue garantizar que todas estas funciones fueran accesibles para usuarios con discapacidad y compatibles con tecnologías de asistencia como lectores de pantalla.

Nuestro enfoque

Para no pasar por alto ningún tipo de usuario ni sus necesidades particulares, acudimos a las Pautas de Accesibilidad para el Contenido Web (WCAG) 2.1, publicadas por la Iniciativa de Accesibilidad Web en junio de 2018. Buscan ayudar a crear sitios accesibles para personas con discapacidad, incluidas «ceguera y baja visión, sordera y pérdida auditiva, movilidad limitada, discapacidades del habla, fotosensibilidad y combinaciones de estas». 1 WCAG 2.1 organiza la accesibilidad en cuatro principios generales: el contenido debe ser perceptible, operable, comprensible y robusto. Los usamos para organizar la actualización de las adaptaciones del sitio de Smalls.

Perceptible

Según WCAG 2.1, el contenido debe presentarse de forma que los usuarios puedan percibirlo: «no puede ser invisible para todos sus sentidos». 2 Por ejemplo, la información no debe comunicarse únicamente mediante una imagen, ya que no es accesible para personas ciegas. También debe transmitirse como texto para que un lector de pantalla la detecte.

La página de inicio de SmallsLIVE
La página de inicio de SmallsLIVE

Un foco principal de la actualización fue hacer perceptible el contenido para usuarios ciegos o con visión parcial. Una medida importante fue incluir sistemáticamente textos alternativos de calidad en las imágenes. Los navegadores de texto usan estos textos, que normalmente no se muestran en la página salvo que la imagen no cargue. Los lectores de pantalla sí los detectan, por lo que son una excelente herramienta para ofrecer descripciones breves y específicas de las imágenes a usuarios ciegos. Además de facilitar la accesibilidad, permiten incluir palabras clave y mejorar el SEO. 3

También comprobamos que los lectores de pantalla detectaran el orden de lectura correcto para que los usuarios ciegos entendieran la organización de la página. Evitamos la reproducción automática de audio o video porque puede interferir con el lector.

Además, buscamos que el contenido fuera distinguible para usuarios con baja visión o daltonismo. Nos aseguramos de que todo el texto conservara su calidad al ampliarse hasta un 200% y destacara del fondo con la relación de contraste recomendada.

Operable

Un sitio accesible incluye adaptaciones que permiten a los usuarios con discapacidad operar la interfaz y navegar. Es esencial que no «exija una interacción que el usuario no pueda realizar». 4 Trabajamos para que todas las funciones de Smalls pudieran usarse con teclado.

Otra medida importante es ofrecer encabezados y etiquetas de botones y enlaces claros y descriptivos, para que quienes usan lectores de pantalla sepan siempre su propósito. Revisamos el sitio y comprobamos que proporcionaran la información adecuada para orientar a los usuarios. Ahora les resulta más fácil encontrar y reproducir videos de conciertos del archivo.

Comprensible

Los visitantes también deben entender la información y cómo usar la interfaz para alcanzar su objetivo. Las páginas deben organizarse de manera lógica y consistente, para que sepan qué esperar al navegar. Deben poder prever cómo responderá el sitio a sus acciones. También debe «ayudar a evitar y corregir errores» con instrucciones, sugerencias y mensajes de error claros. 5

Al evaluar este principio, detectamos que el formulario de pago necesitaba mejoras. Lo renovamos para que los lectores de pantalla pudieran leer etiquetas y leyendas. También garantizamos que aparecieran mensajes de error de forma consistente cuando se introdujera un valor no válido y que el lector siempre los anunciara para que el usuario supiera corregirlo. Así, una persona ciega o con baja visión puede usar todas las funciones, incluido patrocinar a un artista o suscribirse al archivo de conciertos grabados.

Robusto

El último principio establece que los sitios deben «maximizar la compatibilidad» con las tecnologías de asistencia para que el contenido siga siendo accesible cuando se actualicen. 6 Para garantizarlo, probamos sistemáticamente cómo estas tecnologías, en especial los lectores de pantalla, procesaban el contenido de cada página. Queríamos que el sitio siguiera siendo compatible a medida que evolucionaran.

La accesibilidad importa

Los sitios accesibles benefician tanto a las organizaciones como a los usuarios. Nos alegró ayudar a Smalls Jazz Club a llegar mejor a su público y seguir cumpliendo su visión de ser un lugar donde prosperen la música jazz, la cultura y la comunidad. El centro de donaciones del sitio ya tuvo gran éxito: incluso recibió una donación de $25,000 del cantautor Billy Joel.

Disfrutamos el desafío técnico de abordar el sitio desde la perspectiva de usuarios con discapacidad y planeamos seguir trabajando en accesibilidad web en futuros proyectos.


  1. Resumen, Pautas de Accesibilidad para el Contenido Web 2.1, Iniciativa de Accesibilidad Web, 5 de junio de 2018. ↩

  2. «Comprender los cuatro principios de accesibilidad», Comprender WCAG 2.1, Iniciativa de Accesibilidad Web, 21 de junio de 2019. ↩

  3. «Cómo escribir buenos textos alternativos para imágenes web», de Jennifer Kyrnin, Lifewire, 16 de junio de 2019. ↩

  4. «Comprender los cuatro principios de accesibilidad», citado arriba. ↩

  5. «Pauta 3.3: asistencia para la entrada de datos», Cómo cumplir con WCAG (referencia rápida), Iniciativa de Accesibilidad Web, 12 de junio de 2019. ↩

  6. «WCAG 2.1 de un vistazo», Iniciativa de Accesibilidad Web, 5 de junio de 2018. ↩

“Soluciones centradas en usuarios: accesibilidad web y Smalls Jazz Club” de Adriana Campoy está bajo la licencia CC BY SA. Los ejemplos de código fuente están bajo la licencia MIT.

Foto de Aarón Blanco Tejedor.

Clasificado en Casos de estudio.

Lecturas relacionadas