Objetivo de la auditoría

• Evaluar el sitio según los 4 principios de accesibilidad: Perceptible, Operable, Comprensible y Robusto.​​

• Detectar problemas concretos en páginas clave: home, precios, alta online, ayuda y condiciones.​

• Proponer mejoras claras que sirvan como base para su implementación.

1. Técnicas de Nivel A

Texto alternativo (1.1.1)

• Detecté que algunas imágenes no tienen texto alternativo o tienen descripciones poco completas.

• Recomiendo usar siempre descripciones exactas en el atributo alt mediante la extensión https://acortar.link/ji7EnM.

• Esto asegura que personas con lectores de pantalla comprendan el contenido visual sin barreras.

Uso del color (1.4.1)

• En formularios y estados de botones, el color se usa solo para indicar requerimientos o errores.

• Sugiero añadir textos o símbolos junto al color para mejorar la accesibilidad a usuarios con deficiencias visuales.

• Utilizo contrast checkers y simuladores de daltonismo para validar esto.

2. Técnicas de Nivel AA

Contraste mínimo (1.4.3)

• Revisé que el contraste entre texto y fondo sea de al menos 4.5:1 (excepto textos grandes: 3:1).

• Observé que el contraste es insuficiente en textos pequeños y botones secundarios.

• Propongo ajustar colores para cumplir la ratio requerida usando herramientas automáticas.

• Esto mejora la legibilidad para usuarios con baja visión.

Redimensionar texto (1.4.4)

• Algunos elementos se desconfiguran en zoom máximo del 200%.

• Recomiendo diseñar con un mínimo de 16pt para mantener funcionalidad y legibilidad al ampliar el texto.

• Probé esto simulando una compra con blurry blanca de funkify.

3. Técnicas de Nivel AAA

Subtítulos en tiempo real (1.2.9)

Observaciones Generales

• He detectado que la página contiene multitud de vídeos, muchos de ellos con contenido instructivo fundamental para usuarios.

• El acceso a estos vídeos es esencial para garantizar que todos los usuarios, incluidas personas con discapacidades, puedan beneficiarse por igual.

Problemas Identificados

• Falta de subtítulos en tiempo real o subtítulos completos en la mayoría de los vídeos, lo que dificulta la comprensión para personas con discapacidad auditiva.

• Ausencia de transcripciones textuales acompañando los vídeos para usuarios que prefieren o necesitan leer el contenido.

• La navegación entre vídeos está algo saturada, sin un orden claro ni filtros accesibles para facilitar la búsqueda.

• Algunos controles del reproductor pueden no ser completamente accesibles para usuarios que navegan con teclado o lectores de pantalla.

Soluciones Profesionales y Recomendaciones

• Implementar subtítulos en tiempo real o subtítulos precodificados para todos los vídeos, siguiendo la técnica WCAG 1.2.9.

• Añadir transcripciones completas de los vídeos en formato texto para facilitar diferentes modos de acceso.

• Mejorar la estructura y organización de la galería de vídeos con filtros accesibles y jerarquía clara.

• Asegurar que los controles del reproductor multimedia cumplan con los criterios de accesibilidad operable por teclado y compatibles con lectores de pantalla.

• Utilizar herramientas de evaluación de accesibilidad multimedia como Funkify para simular distintas discapacidades y comprobar la experiencia real.

Herramientas Utilizadas para Evaluar

• Navegación manual con teclado en la página para verificar el acceso a controles de vídeo.

• Simulación Funkify para evaluar diferentes discapacidades.

• Observación visual directa y con lectores de pantalla para verificar subtítulos y textos alternativos.

Aquí tienes ejemplos claros y sencillos para cada una de las extensiones Chrome que uso para evaluar accesibilidad, con estructura de resumen del problema, extensión utilizada y solución a implementar, listos para añadir a tu documento en Framer:

Ejemplos Prácticos con Extensiones Chrome para Evaluación de Accesibilidad

1. Wave Evaluation Tool

• Resumen del problema:
  En la web de Basic-Fit, detecté con Wave Evaluation Tool que algunos enlaces no tienen texto descriptivo (texto ancla vacío o genérico como "clic aquí"), lo que dificulta a lectores de pantalla identificar su propósito.

• Extensión utilizada:
  Wave Evaluation Tool

2. Contrast Checker

• Resumen del problema:
  Identifiqué un botón con texto blanco sobre un fondo gris claro que no cumple el contraste mínimo (3.2:1 vs 4.5:1 requerido), dificultando la lectura para usuarios con baja visión. Textos muy pequeños.

• Extensión utilizada:
  Contrast Checker

• Solución a implementar:
  Ajustar el color de fondo o el color del texto para lograr un contraste mínimo de 4.5:1, por ejemplo cambiar el fondo a un gris más oscuro o hacer el texto más intenso. Aumentar tamaño de los textos, mínimo 16 px.

3. Colorblindly

• Resumen del problema:
  La página usa combinaciones de colores (rojo y verde) para indicar estados en formularios, que personas con daltonismo no logran diferenciar correctamente.

• Extensión utilizada:
  Colorblindly

• Solución a implementar:
  Complementar el código de color con iconos, patrones o textos adicionales que comuniquen el estado sin depender solo del color.

4. Web Developer

• Resumen del problema:
  Con Web Developer verifiqué que varias imágenes decorativas no tienen atributo alt vacío (alt=“”), lo mismo que algunas imágenes funcionales carecen de descripción, lo que genera ruido o falta de contexto en lectores de pantalla.

• Extensión utilizada:
  Web Developer

• Solución a implementar:
  Añadir atributo alt vacío para imágenes puramente decorativas y proporcionar textos alternativos descriptivos para imágenes funcionales o informativas.