3. Análisis de accesibilidad - Principios POUR
Para evaluar el flujo de compra en el sitio web de Hipermaxi, realice una auditoría combinando la inspección manual del código, pruebas de contraste y simulación de navegación.
Hallazgos organizados bajo los cuatro pilares fundamentales de las WCAG o POUR:
P - Perceptible (acceso sensorial)
Este principio evalúa si los usuarios pueden identificar la información y los elementos de la interfaz mediante los sentidos que tienen disponibles. En Hipermaxi se identificaron las siguientes barreras:
- Ausencia de texto alternativo (alt) en el catálogo: El núcleo del sitio son las imágenes de los productos. Sin embargo, una gran parte de las fotografías de los artículos carece de etiquetas de texto alternativo descriptivo en su código HTML, o bien utilizan textos genéricos como "imagen" o el código interno del producto (ej. PROD_948392.jpg). Para un usuario ciego que utiliza un lector de pantalla, el catálogo se vuelve invisible, ya que el software solo le leerá una secuencia de números en lugar de "Leche Pil Entera 1 Litro".
- Problemas de contraste de color en precios y etiquetas: En la página de inicio y en las secciones de ofertas, se suelen utilizar combinaciones de color corporativas (como textos blancos sobre fondos verde claro o botones naranjas con texto blanco) que no cumplen con la relación de contraste mínima de 4.5:1 requerida por el nivel AA. Esto dificulta enormemente la lectura para personas con baja visión, adultos mayores o usuarios que navegan desde pantallas con mucho reflejo solar.
- Información transmitida únicamente por el color: En algunas alertas del carrito de compras (como cuando un producto se agota o hay un error en el formulario), el sistema notifica el problema cambiando el borde del cuadro a color rojo, sin añadir un icono de advertencia o un texto explícito que diga "Error".
O - Operable (interacción y navegación)
Este principio exige que los usuarios puedan interactuar con la interfaz física y lógicamente, garantizando que no existan acciones que requieran dispositivos o movimientos imposibles para ciertas personas.
- Trampas de foco y elementos inaccesibles por teclado: Al intentar navegar por el sitio web utilizando únicamente la tecla Tab (simulando a un usuario con discapacidad motriz que no puede usar un mouse), se detectó que el menú desplegable de categorías principales es inaccesible. El teclado pasa de largo estos menús interactivos, lo que impide que un usuario explore las secciones de "carnes" O "lacteos" de manera autónoma.
- Invisibilidad del foco del teclado: Cuando se logra avanzar por algunos elementos interactivos usando el teclado, el sitio carece de un indicador visual claro (como un borde grueso o un cambio de color contrastante) que le muestre al usuario dónde está posicionado. Navegar por la página de esta forma se convierte en una adivinanza a ciegas.
- Falta de la opción "saltar al contenido principal": Cada vez que se cambia de página en el sitio, el usuario de teclado o lector de pantalla está obligado a navegar por todo el menú superior, el buscador y los enlaces del encabezado (haciendo más de 20 pulsaciones de tecla) antes de poder llegar a ver el primer producto de la lista.
C - Comprensible (cognición y claridad)
La información y el funcionamiento de la interfaz deben ser claros, predecibles y fáciles de procesar para cualquier persona.
- Formularios con etiquetas flotantes o ausentes: En la sección de registro de usuarios y en el ingreso de datos para el delivery, los campos del formulario dependen de textos informativos internos que desaparecen en cuanto el usuario empieza a escribir. Si una persona con déficit de atención o problemas cognitivos se distrae a mitad del proceso, pierde la referencia de qué dato le estaba pidiendo ese campo específico.
- Alertas y mensajes de error ambiguos: Si el usuario olvida llenar un campo obligatorio al procesar el carrito, el sitio web suele recargar la página o lanzar alertas genéricas en la parte superior que dicen "error en los datos del formulario", en lugar de colocar un mensaje específico y accesible al lado del campo vacío que indique exactamente qué hace falta corregir (ej. "por favor, introduce una dirección de envío válida").
R - Robusto (compatibilidad técnica)
El contenido debe ser lo suficientemente sólido como para que pueda ser interpretado de manera confiable por una amplia variedad de navegadores, dispositivos y tecnologías asistivas.
- Defectos en HTML: El sitio abusa del uso de etiquetas genéricas (como <div> y <span>) para construir botones interactivos y elementos del carrito de compras, en lugar de utilizar las etiquetas semánticas nativas (<button>, <nav>, <main>). Al no tener una estructura semántica limpia, los lectores de pantalla no logran identificar qué elementos son clickeables y cuáles son simple texto decorativo, rompiendo la compatibilidad técnica del sitio con el software de asistencia para personas ciegas.
