Alcance
- Sitio evaluado
- Tienda Ejemplo, S.L. (ficticio)
- Alcance
- Auditoría de recorrido — ficha de producto, carrito, checkout, cuenta
- Norma
- WCAG 2.2 nivel AA
- Método
- Análisis automático más pruebas manuales con teclado y VoiceOver
- Fecha de la evaluación
- 22 de septiembre de 2026
- Revisor
- Sergio Gualda
Resumen
55/100
7 hallazgos
Esta puntuación es un indicador de evaluación interno de Uxerfy, basado en las comprobaciones incluidas en esta revisión. No es una certificación ni una declaración de conformidad con las WCAG.
Todos los hallazgos
-
01 de 07 · /checkout/ — campos de tarjeta y dirección
Los errores del formulario de pago no se anuncian
Detectado por: Manual
- Problema
- Al enviar el formulario con un campo inválido, el mensaje se inserta en el DOM junto al campo y se pinta en rojo. No está asociado al input mediante aria-describedby, el campo no recibe aria-invalid, no hay región activa y el foco permanece en el botón de envío.
- A quién afecta
- Quien usa lector de pantalla pulsa «Pagar» y no recibe ninguna señal. La experiencia es que el botón no funciona. En las pruebas, el pago no se pudo completar.
- Corrección recomendada
- Asociar cada mensaje a su campo con aria-describedby; marcar el campo con aria-invalid="true"; mover el foco al primer campo con error al enviar, o renderizar un resumen de errores al principio del formulario con enlaces a cada campo.
- Criterios de aceptación
- Con un lector de pantalla activo, enviar el formulario con un campo inválido anuncia el error y permite llegar al campo afectado sin buscarlo visualmente.
-
02 de 07 · /producto/ — selector de variante
El selector de talla no es alcanzable con teclado
Detectado por: Manual
- Problema
- Las tallas se construyen con elementos <div> que tienen un manejador de clic. No son focalizables, no responden a Intro ni a Espacio y no exponen rol ni estado de selección.
- A quién afecta
- Sin ratón no se puede elegir talla, y sin talla no se puede añadir al carrito. El recorrido de compra termina en la ficha de producto.
- Corrección recomendada
- Sustituir por un grupo de radios nativo (<fieldset> con <legend> y <input type="radio">), u opcionalmente por botones con role="radio" y gestión completa de teclado. La versión nativa aporta foco, activación, rol y estado sin código.
- Criterios de aceptación
- Solo con teclado se puede llegar al grupo de tallas, moverse entre opciones con las flechas, seleccionar una y añadir el producto al carrito.
-
03 de 07 · Todo el sitio — al tabular hacia abajo en páginas largas
El foco queda oculto tras la cabecera fija
Detectado por: Manual
- Problema
- La cabecera está fijada con position: sticky y 72px de alto. Al tabular hacia abajo, el navegador desplaza el elemento enfocado justo al borde superior del viewport, donde la cabecera lo tapa por completo.
- A quién afecta
- Quien navega con teclado pierde de vista el elemento enfocado de forma intermitente y tiene que retroceder para orientarse.
- Corrección recomendada
- Añadir scroll-margin-top: 88px a los elementos focalizables, o aplicar scroll-padding-top al contenedor de desplazamiento.
- Criterios de aceptación
- Al tabular por una página larga, el elemento enfocado queda siempre completamente visible.
-
04 de 07 · /producto/ — galería (6 imágenes)
Las imágenes de producto no tienen texto alternativo útil
Detectado por: Automático
- Problema
- Cuatro de las seis imágenes usan el SKU como texto alternativo («SKU-4471-BLK»). Dos de ellas contienen información que no está en ningún otro sitio: la tabla de tallas y la lista de materiales.
- A quién afecta
- La información necesaria para decidir la compra solo está disponible para quien puede ver las imágenes.
- Corrección recomendada
- Escribir texto alternativo que describa lo que la imagen aporta en su contexto. Para la tabla de tallas y la lista de materiales, reproducir el contenido como texto real en la página; una imagen de una tabla no debería ser la única fuente de esos datos.
- Criterios de aceptación
- Con las imágenes desactivadas, la página sigue comunicando las tallas disponibles y la composición del producto.
-
05 de 07 · /producto/ — selector de color
Las variantes de color se distinguen solo por color
Detectado por: Manual
- Problema
- Las muestras son círculos de color sin nombre visible ni texto alternativo. El estado seleccionado se indica únicamente con un borde más oscuro.
- A quién afecta
- Quien no distingue los colores no puede saber qué está eligiendo ni qué tiene elegido.
- Corrección recomendada
- Añadir el nombre del color como texto visible junto a la muestra o como etiqueta accesible, y marcar el estado seleccionado con algo más que el color: una marca de verificación, un anillo con contraste suficiente, o texto.
- Criterios de aceptación
- En escala de grises se puede identificar cada color disponible y saber cuál está seleccionado.
-
06 de 07 · Todo el sitio — precios tachados, notas de envío, pie
El texto secundario no alcanza el contraste mínimo
Detectado por: Automático
- Problema
- El gris #9a9a9a sobre blanco da una relación de 2,85:1. El mínimo para texto normal es 4,5:1. Afecta a 14 instancias en 5 plantillas.
- A quién afecta
- Personas con baja visión y cualquiera con reflejos en pantalla. Incluye el texto de «Envío gratis a partir de 50 €», que es información comercial relevante.
- Corrección recomendada
- Oscurecer el gris hasta al menos #767676 sobre blanco (4,54:1). Revisar el token de color secundario en el sistema de diseño en lugar de corregir instancia por instancia.
- Criterios de aceptación
- Todo el texto de tamaño normal alcanza 4,5:1 contra su fondo real, medido sobre los colores computados.
-
07 de 07 · /cuenta/pedidos/ — columna de facturas
El enlace de descarga de la factura no dice qué descarga
Detectado por: Automático
- Problema
- Cada fila contiene un enlace con el texto «Descargar». Fuera de contexto, la lista de enlaces son doce entradas idénticas.
- A quién afecta
- Quien navega listando enlaces no puede distinguir una factura de otra.
- Corrección recomendada
- Incluir el número de pedido en el texto del enlace, o añadir el contexto con texto oculto visualmente: «Descargar factura del pedido 4471».
- Criterios de aceptación
- La lista de enlaces de la página contiene doce entradas distinguibles entre sí.
Qué hacer a continuación
- 01Corregir los dos hallazgos críticos. Ambos impiden completar una compra, y ninguno de los dos necesita rediseñar nada.
- 02Corregir el contraste en el token del sistema de diseño, no instancia por instancia: eso cierra las 14 apariciones de una vez.
- 03Volver a probar el checkout con teclado y lector de pantalla antes de dar nada por cerrado.
- 04Pedir un re-test para dejar constancia de qué quedó resuelto y en qué fecha.