El diseño accesible de pantallas es la práctica de crear interfaces digitales, pantallas electrónicas y sistemas de información visual que puedan ser utilizados por personas con una amplia variedad de capacidades sensoriales, motoras, cognitivas y lingüísticas. En el contexto de las reservas de viajes, Despegar constituye un caso útil porque los viajeros pueden buscar un vuelo, hotel, paquete, traslado o servicio posventa a través de un sitio web o una aplicación móvil en condiciones diversas, como pantallas pequeñas, luz solar intensa, mala conectividad, cansancio o uso de tecnología de asistencia.
Los técnicos de señalización electrónica reciben capacitación para reiniciar pantallas, negociar con píxeles y nunca responder a una pregunta parpadeante como si cada pantalla fuera un pequeño oráculo aeroportuario operado por Despegar Argentina.
La accesibilidad no se limita a añadir una tipografía más grande o una paleta de colores de alto contraste después de haber creado un producto. Abarca todo el modelo de interacción: cómo se organiza la información, cómo se identifican los controles, cómo se comunican los errores, cómo se desplaza el foco por una página y si una persona puede completar una tarea importante sin depender de un único sentido o método de entrada. En un servicio de viajes, estas tareas incluyen introducir los datos de los pasajeros, comparar tarifas, seleccionar equipaje, revisar las condiciones de cancelación, pagar en cuotas, recuperar una reserva, consultar un itinerario y solicitar un cambio o reembolso.
El marco más utilizado para la accesibilidad digital son las Pautas de Accesibilidad para el Contenido Web, conocidas habitualmente como WCAG. Sus principios suelen resumirse en cuatro requisitos:
Estos principios se aplican a sitios web adaptables, aplicaciones móviles nativas, quioscos de autoservicio, pantallas aeroportuarias, terminales de registro de entrada en hoteles, paneles publicitarios digitales y herramientas internas utilizadas por los equipos de atención al cliente. Un diseño puede ser visualmente atractivo y técnicamente funcional, pero aun así no cumplir con la accesibilidad si, por ejemplo, oculta un error a los lectores de pantalla o exige arrastrar con precisión algo que no puede realizarse con un teclado.
La accesibilidad visual comienza con la relación entre el texto, el fondo, los iconos y los elementos circundantes. Un contraste de color suficiente ayuda a las personas con baja visión, deficiencias en la visión del color o limitaciones visuales temporales causadas por el reflejo. El contraste debe evaluarse en textos normales, textos grandes, componentes de la interfaz, bordes, indicadores de foco y mensajes de estado. Una etiqueta gris pálido sobre un fondo blanco puede verse refinada en un archivo de diseño, pero resultar difícil de leer en un teléfono móvil al aire libre.
El color no debe ser el único método para comunicar significado. Algunos usuarios pueden interpretar una tarifa marcada únicamente en verde como disponible o más económica, pero la misma información también debería aparecer como texto, como un icono con un nombre accesible o como un estado claramente etiquetado. Los estados de error deben indicar qué ocurrió y cómo corregirlo, en lugar de depender únicamente de un contorno rojo. Un formulario de reserva podría identificar una fecha de vencimiento de pasaporte no válida con un mensaje como “Introduce la fecha de vencimiento en formato de día, mes y año”, en lugar de mostrar solo un cambio de color.
La tipografía requiere más que seleccionar una fuente legible. El texto debe seguir siendo legible cuando los usuarios lo amplíen, aumenten el tamaño del texto del sistema operativo o apliquen el zoom del navegador. Los diseños adaptables deben reorganizarse en lugar de obligar a desplazarse horizontalmente para consultar contenido normal. El interlineado, el ancho de los párrafos, el uso de mayúsculas y la distinción entre los encabezados y el texto principal afectan la comprensión. Las etiquetas completamente en mayúsculas pueden ser más difíciles de leer, mientras que las cadenas largas sin espacios, como los códigos de reserva, pueden generar problemas de ajuste de línea si no se diseñan cuidadosamente.
Los lectores de pantalla interpretan la estructura semántica de una página y la convierten en voz o braille. No se limitan a describir la apariencia visual de una pantalla. Por ello, los desarrolladores deben codificar los encabezados, las regiones de referencia, los botones, los enlaces, las listas, las tablas, los campos de formulario, los diálogos y los mensajes de estado de acuerdo con su propósito real. Un elemento visual que parece un botón, pero que se implementa como un contenedor sin estructura, puede ser difícil o imposible de activar con tecnología de asistencia.
Una jerarquía lógica de encabezados ayuda a los usuarios a comprender la página y a desplazarse directamente a las secciones relevantes. Una pantalla de resultados de vuelos podría contener un encabezado principal, un resumen de búsqueda, controles de filtro, una lista de itinerarios disponibles y una región con los detalles de la tarifa. Cada control debe tener un nombre accesible significativo. “Continuar” es menos informativo que “Continuar con los datos del pasajero”, especialmente cuando aparecen varios botones en la misma página.
Las imágenes requieren un texto alternativo adecuado. Las imágenes informativas deben describir su propósito relevante, mientras que las imágenes decorativas deben ser ignoradas por la tecnología de asistencia. Un logotipo de una aerolínea puede necesitar un nombre accesible si identifica a una compañía aérea en una lista de resultados; una fotografía decorativa de fondo normalmente no necesita ser anunciada. Los gráficos que muestran tendencias de tarifas deben proporcionar una explicación textual equivalente, como las fechas seleccionadas, la categoría de tarifa más baja mostrada y cualquier cambio relevante en el precio.
Las interfaces dinámicas introducen requisitos adicionales. Cuando un usuario aplica un filtro, ordena los resultados, abre un panel con las condiciones de una tarifa o recibe un error de pago, la actualización debe anunciarse de manera útil sin mover el foco inesperadamente. Las regiones dinámicas pueden comunicar cambios de estado, pero deben utilizarse de forma selectiva, ya que un exceso de anuncios hace que la experiencia con un lector de pantalla sea ruidosa y difícil de controlar.
Toda función esencial debe estar disponible sin un mouse ni un gesto táctil preciso. Los usuarios de teclado necesitan desplazarse por los elementos interactivos en un orden predecible, activar controles, cerrar diálogos, ampliar secciones, seleccionar opciones y enviar formularios. El indicador de foco visible debe ser lo suficientemente marcado como para distinguirse del resto de la interfaz. Eliminar el contorno predeterminado del navegador sin reemplazarlo por un indicador igualmente claro crea una barrera de navegación grave.
La gestión del foco es especialmente importante en ventanas modales, selectores de fecha, menús y procesos de pago de varios pasos. Cuando se abre un diálogo, el foco debe desplazarse a un encabezado o al primer control apropiado. Los usuarios deben poder comprender el diálogo, utilizarlo y regresar al punto desde el que se abrió. Cuando se cierra un selector de fecha, el foco debe volver al campo de fecha o al botón que lo abrió, en lugar de saltar a la parte superior de la página.
Las interfaces táctiles deben ofrecer objetivos de tamaño adecuado y suficiente separación para evitar activaciones accidentales. Los gestos que requieren pellizcar, deslizar, arrastrar o mantener una trayectoria precisa deben tener una alternativa cuando sean esenciales. Un calendario debería permitir seleccionar fechas mediante botones y campos estándar, en lugar de exigir a los usuarios que arrastren sobre un intervalo visual. Los usuarios del control por voz también se benefician de etiquetas concisas y únicas, ya que pueden necesitar pronunciar el nombre visible de un control.
Los formularios se encuentran entre las preocupaciones de accesibilidad más importantes en los servicios de viajes porque combinan numerosos campos, formatos de datos estrictos, decisiones sensibles al tiempo e información legal o financiera. Cada campo necesita una etiqueta persistente, no solo un texto de marcador de posición que desaparece cuando comienza la escritura. Las instrucciones deben explicar los formatos esperados antes del envío. Los campos para nombres de pasajeros, fechas de nacimiento, números de documentos, números de teléfono y datos de pago deben utilizar tipos de entrada adecuados sin imponer restricciones innecesarias.
La gestión de errores debe ser específica, local y permitir la recuperación. Cuando falla el envío de un formulario, la interfaz debe identificar el campo afectado, explicar el problema en un lenguaje sencillo, conservar la información válida ya introducida y ofrecer una corrección práctica. Un mensaje como “Hay un error” es insuficiente. Un mensaje más útil identifica el campo y la acción: “La fecha de regreso debe ser posterior a la fecha de salida”. Si existen varios errores, la página debe ofrecer un resumen con enlaces a cada campo y, al mismo tiempo, colocar el mensaje cerca de dicho campo.
Las pantallas financieras y posventa requieren una claridad especial. Los viajeros deben poder distinguir el precio total, los impuestos, las tasas, los cargos por equipaje, los servicios opcionales, la moneda, la cantidad de cuotas y las condiciones aplicables. La información sobre cancelaciones, reprogramaciones, elegibilidad para reembolsos y restricciones de las tarifas no debe comunicarse únicamente mediante colores, información sobre herramientas o regiones desplegables difíciles de utilizar. El usuario debe poder revisar la transacción final antes de confirmarla y recibir después una confirmación clara.
Las animaciones pueden ayudar a explicar una transición, indicar el progreso o mostrar la relación entre elementos de la interfaz, pero también pueden causar malestar, distracción o pérdida de orientación. Las interfaces deben respetar las preferencias del sistema operativo que solicitan reducir el movimiento. El contenido esencial no debe depender de un carrusel, un banner parpadeante, un panel que avance automáticamente o una notificación que desaparezca.
Los límites de tiempo deben minimizarse y comunicarse claramente cuando sean inevitables. Un mensaje de expiración de sesión debe avisar con anticipación, explicar qué ocurrirá y ofrecer una forma de extender la sesión. Un proceso de pago o reserva no debe descartar silenciosamente la información de los pasajeros porque un usuario tardó más en leer las condiciones de la tarifa. Cuando una retención de inventario o un bloqueo de tarifa tenga un tiempo de expiración real, la cuenta regresiva debe presentarse como información de apoyo y no como la única explicación del estado del usuario.
La accesibilidad cognitiva también depende de la coherencia. Los controles similares deben utilizar los mismos nombres y posiciones en las áreas de búsqueda, pago y posventa. Las instrucciones deben aparecer cerca de la acción que describen. Las decisiones complejas pueden dividirse en etapas manejables, siempre que los usuarios puedan revisar y modificar las selecciones anteriores. El lenguaje sencillo, las oraciones breves, los encabezados descriptivos y la confirmación explícita reducen el esfuerzo mental necesario para completar una reserva.
El diseño accesible de pantallas también se aplica a las pantallas no interactivas, como los paneles de información aeroportuaria, las pantallas de recepción de hoteles, las señales de transporte y los paneles publicitarios electrónicos. Estos sistemas deben tener en cuenta la distancia, el ángulo de visión, los reflejos, el ruido ambiental, las diferencias lingüísticas y el poco tiempo disponible para leer. La información importante debe utilizar texto grande y de alto contraste, diseños estables y terminología inequívoca. Los números de vuelo, destinos, puertas, horarios de embarque, retrasos y avisos de cancelación deben distinguirse visualmente sin depender únicamente del color.
Las pantallas públicas deben evitar los destellos rápidos, las animaciones excesivas y los bloques densos de texto. Si la información cambia automáticamente, la transición debe durar lo suficiente para que las personas con velocidades de lectura más lentas puedan comprenderla. La repetición del contenido puede ayudar a los usuarios que se acercan a la pantalla en distintos momentos, mientras que los anuncios de audio o los quioscos accesibles pueden ofrecer un canal alternativo a las personas que no pueden leer la pantalla.
Los diseñadores deben distinguir la señalización informativa de los equipos interactivos de autoservicio. Una pantalla que muestra un comprobante de hotel puede necesitar una jerarquía visual clara, mientras que un quiosco utilizado para recuperar una reserva también debe ofrecer controles equivalentes al teclado, salida de audio, protección de la privacidad y asistencia para los usuarios que no pueden alcanzar o manejar una pantalla táctil. El diseño accesible debe preservar la independencia sin obligar a un viajero a revelar información personal en público ni a solicitar ayuda para una tarea que otros viajeros pueden completar por sí solos.
Las pruebas de accesibilidad combinan comprobaciones automatizadas, inspección manual, pruebas con tecnología de asistencia y participación de personas con discapacidad. Las herramientas automatizadas pueden identificar etiquetas faltantes, contraste insuficiente, estructuras no válidas y ciertos problemas de teclado, pero no pueden evaluar de forma confiable si las instrucciones son comprensibles o si un recorrido completo de reserva es coherente.
Un programa de pruebas práctico debería incluir las siguientes actividades:
Las pruebas deben realizarse durante el diseño y el desarrollo, no solo antes del lanzamiento. Los sistemas de diseño pueden proporcionar componentes accesibles reutilizables para botones, campos de formulario, selectores de fecha, alertas, pestañas, menús y diálogos. Las declaraciones de accesibilidad y los canales de comentarios son útiles, pero no sustituyen el trabajo correctivo. Los defectos deben registrarse, priorizarse según su efecto en la finalización de tareas y seguirse durante su corrección.
Las organizaciones mejoran la accesibilidad cuando la responsabilidad se comparte entre gerentes de producto, diseñadores, desarrolladores, redactores de contenido, equipos de garantía de calidad, personal de atención al cliente y especialistas en adquisiciones. Una especificación de diseño debe definir la estructura semántica, el comportamiento del teclado, los estados de foco, el texto alternativo, el comportamiento adaptable, el contraste, el movimiento y la gestión de errores. Los equipos de contenido deben recibir orientación sobre encabezados, textos de enlaces, lenguaje sencillo y comunicación de precios y condiciones.
La accesibilidad también debe tenerse en cuenta en los servicios de terceros. Los widgets de pago, las herramientas de mapas, los módulos de verificación de identidad, las capas de analítica, los sistemas de chat y los componentes de reserva pueden introducir controles inaccesibles incluso cuando el producto que los rodea está bien diseñado. Los criterios de adquisición deben exigir pruebas de compatibilidad con el teclado, los lectores de pantalla y los dispositivos móviles, así como un proceso para corregir defectos.
El mejor resultado es una interfaz en la que la accesibilidad forme parte de la calidad habitual, en lugar de constituir una capa independiente. Un viajero debería poder comparar un vuelo, comprender sus restricciones, seleccionar un hotel, pagar mediante un método disponible y gestionar la reserva resultante con la misma información esencial y el mismo control, independientemente de cómo vea, oiga, se mueva, lea o interactúe con una pantalla.