Página de Problemas
¿Qué es la Página de Problemas?
La página de Problemas es donde puedes ver todos los problemas de accesibilidad encontrados durante los escaneos de tu sitio. Los problemas están organizados por tipo y severidad, para que puedas entender fácilmente qué solucionar y dónde intervenir.
Lo que encontrarás en la Página de Problemas
La página está organizada en varias secciones:
- Estadísticas Rápidas - Cinco tarjetas con los números principales
- Filtros y Búsqueda - Para encontrar problemas específicos (solo PRO)
- Lista de Problemas - Organizada por severidad (Crítico, Advertencia, Info)
Estadísticas Rápidas
En la parte superior de la página verás cinco tarjetas con las estadísticas principales:
Problemas Totales
Esta tarjeta muestra el número total de problemas encontrados en todos los escaneos. Es el número general de todos los problemas, independientemente de la severidad.
Problemas Críticos
Esta tarjeta muestra cuántos problemas críticos hay. Los problemas críticos son los más importantes de solucionar porque impiden o dificultan mucho el acceso al contenido.
Problemas de Advertencia
Esta tarjeta muestra cuántos problemas de advertencia hay. Las advertencias dificultan el uso del sitio pero no lo bloquean completamente.
Problemas de Información
Esta tarjeta muestra cuántos problemas informativos hay. Estos son sugerencias y mejores prácticas para mejorar la accesibilidad.
Niveles WCAG
Esta tarjeta muestra la distribución de problemas por nivel WCAG:
- A: Problemas que violan requisitos básicos (Nivel A)
- AA: Problemas que violan requisitos estándar (Nivel AA)
Filtros y Búsqueda
Disponible solo para: Plan PRO o superior
Si tienes un plan PRO o ENTERPRISE, puedes usar filtros para encontrar problemas específicos.
Búsqueda
El campo de búsqueda te permite buscar problemas por:
- Descripción del problema
- Recomendación
- Selector de elemento
- Referencia WCAG
Cómo usarlo:
- Escribe el texto que quieres buscar en el campo de búsqueda
- Los resultados se actualizan automáticamente mientras escribes
- La búsqueda no distingue mayúsculas/minúsculas
Filtro de Severidad
El menú desplegable te permite filtrar problemas por severidad:
- Todos: Muestra todos los problemas
- Crítico: Muestra solo problemas críticos
- Advertencia: Muestra solo problemas de advertencia
- Info: Muestra solo problemas informativos
Cómo usarlo:
- Haz clic en el menú desplegable
- Elige la severidad que quieres ver
- La lista se actualiza automáticamente
Lista de Problemas
Los problemas están organizados en tres secciones principales, ordenadas por importancia:
Sección de Problemas Críticos
Esta sección muestra todos los problemas críticos encontrados. Son los más importantes de solucionar.
Características:
- Color rojo para indicar urgencia
- Icono de triángulo de alerta
- Badge con el número de problemas críticos
Sección de Problemas de Advertencia
Esta sección muestra todos los problemas de advertencia encontrados. Son importantes pero menos urgentes que los críticos.
Características:
- Color amarillo para indicar atención
- Icono de círculo de alerta
- Badge con el número de problemas de advertencia
Sección de Problemas de Información
Esta sección muestra todos los problemas informativos encontrados. Son sugerencias útiles pero no urgentes.
Características:
- Color azul para indicar información
- Icono de información
- Badge con el número de problemas de info
Tarjeta de Problema
Cada problema se muestra en una tarjeta con toda la información necesaria.
Encabezado de la Tarjeta
En el encabezado de la tarjeta verás:
- Tipo de problema: El nombre del tipo de problema (por ejemplo, "missing_alt_image")
- Número de errores: Cuántos errores de este tipo se encontraron
- Severidad: Badge de color que indica la severidad (Crítico, Advertencia, Info)
- Nivel WCAG: Badge que indica el nivel WCAG (A o AA)
- Páginas afectadas: Cuántas páginas tienen este problema
Contenido de la Tarjeta
En el contenido de la tarjeta verás:
Descripción del Problema
- Una descripción clara de cuál es el problema
- Icono de color basado en la severidad
Recomendación
- Una explicación de cómo solucionar el problema
- Sugerencias prácticas para solucionarlo
Referencias
- Referencia WCAG: La referencia a las pautas WCAG
- Referencia EAA: La referencia a las pautas EAA
- Páginas afectadas: El número de páginas que tienen este problema
Páginas y Escaneos
- Lista de las primeras 5 páginas que tienen este problema
- Para cada página verás:
- Título de la página (o hostname si no está disponible)
- URL completa
- Botón "Informe" para ver el informe detallado de esa página
- Si hay más de 5 páginas, verás un mensaje indicando cuántas otras páginas hay
Ejemplos de Código
- Hasta 3 ejemplos de código que muestran dónde se encuentra el problema
- Para cada ejemplo verás:
- Título de la página donde se encontró
- Selector de elemento (dónde está ubicado en el código)
- HTML del elemento (el código HTML real)
Acciones Disponibles
Para cada problema puedes realizar varias acciones:
Excluir (solo ENTERPRISE)
- Excluye este tipo de problema de los informes
- Útil cuando has solucionado el problema y no quieres verlo más en los informes
- El botón está deshabilitado si el problema ya está excluido
Incluir (solo ENTERPRISE)
- Incluye este tipo de problema en los informes nuevamente
- Útil si excluiste un problema por error o si reapareció
- El botón está deshabilitado si el problema no está excluido
Escanear (solo ENTERPRISE)
- Realiza un nuevo escaneo de todas las páginas que tienen este problema
- Útil para verificar si has solucionado el problema después de hacer cambios
- Muestra una barra de progreso durante el escaneo
- Al final muestra un resumen con los resultados
Ver Todo
- Abre una página detallada con todos los errores de este tipo
- Muestra todos los ejemplos y todas las páginas afectadas
- Útil para ver todos los detalles en una sola página
Barra de Progreso
Cuando ejecutas un escaneo por lotes (botón Escanear), verás una barra de progreso fija en la parte inferior de la página.
Lo que muestra:
- Título: "Escaneando en progreso"
- Progreso: Número de escaneos completados / total (por ejemplo, "3/10")
- Barra: Barra visual que muestra el porcentaje de finalización
- URL actual: Qué página se está escaneando actualmente
La barra permanece visible hasta que se completen todos los escaneos.
Estados de la Página
Cargando
Cuando la página está cargando, verás un spinner animado y el mensaje "Cargando...". Espera a que termine la carga antes de usar los filtros.
Sin Problemas
Si no hay problemas (o los filtros no muestran resultados), verás un mensaje con:
- Icono de marca de verificación verde
- Título: "No se encontraron problemas"
- Descripción que explica por qué no hay problemas
Sin Escaneos
Si aún no has hecho ningún escaneo, no verás problemas. En este caso:
- Ve al Dashboard
- Escanea tu sitio
- Vuelve a la página de Problemas para ver los resultados
Cómo usar la Página de Problemas
1. Comienza con Problemas Críticos
Los problemas críticos son los más importantes. Siempre comienza con esos:
- Ve a la sección "Problemas Críticos"
- Lee la descripción y recomendación
- Mira los ejemplos de código para entender dónde intervenir
- Soluciona el problema en tu sitio
- (Opcional) Usa "Escanear" para verificar que se ha solucionado
2. Usa Filtros para Encontrar Problemas Específicos
Si estás buscando un problema específico:
- Usa el campo de búsqueda para buscar por palabra clave
- O usa el filtro de severidad para ver solo críticos, advertencias o info
- Combina búsqueda y filtro para resultados más precisos
3. Excluir Problemas Solucionados
Después de solucionar un problema:
- Haz clic en "Excluir" para eliminarlo de los informes
- El problema ya no aparecerá en las estadísticas
- Si el problema reaparece en el futuro, puedes usar "Incluir" para volverlo a poner
4. Verificar Soluciones
Después de hacer cambios en el sitio:
- Haz clic en "Escanear" para el problema que solucionaste
- Espera a que termine el escaneo
- Verifica si el problema se ha resuelto
5. Ver Detalles Completos
Para ver todos los detalles de un problema:
- Haz clic en "Ver Todo"
- Ve todas las páginas afectadas
- Ve todos los ejemplos de código
- Ten una vista completa del problema
Consejos
Prioridad
- Críticos primero: Siempre soluciona problemas críticos primero
- Luego advertencias: Después de los críticos, pasa a las advertencias
- Finalmente info: Las sugerencias de info pueden esperar
Organización
- Usa filtros: Los filtros te ayudan a enfocarte en lo que te interesa
- Agrupa por tipo: Los problemas ya están agrupados por tipo, así que puedes solucionar todos los similares juntos
- Cuenta páginas: El número de páginas afectadas te dice qué tan extendido está el problema
Verificación
- Escanea después de soluciones: Usa el botón "Escanear" para verificar que tus soluciones funcionan
- Excluye solo cuando estés seguro: Excluye un problema solo cuando estés seguro de haberlo solucionado completamente
- Verifica múltiples páginas: Si un problema aparece en muchas páginas, podría ser un problema sistémico para solucionar de una vez por todas
Preguntas Frecuentes
¿Por qué algunos problemas aparecen múltiples veces?
Los problemas están agrupados por tipo y descripción. Si ves el mismo problema en múltiples páginas, se muestra solo una vez con el número de páginas afectadas. Esto te permite ver el impacto general del problema.
¿Qué significa "Páginas afectadas"?
"Páginas afectadas" indica cuántas páginas diferentes tienen este problema. Si ves "5 páginas", significa que este problema se encontró en 5 páginas diferentes de tu sitio.
¿Puedo excluir un problema de una sola página?
No, la exclusión funciona por tipo de problema. Si excluyes un problema, se excluye de todas las páginas. Si quieres gestionar problemas individuales, usa la página de detalles del problema.
¿Qué pasa cuando excluyo un problema?
Cuando excluyes un problema:
- Ya no aparece en las estadísticas
- No se cuenta en los informes
- Siempre puedes volver a incluirlo con el botón "Incluir"
¿Cuánto tiempo tarda en escanear todas las páginas?
Depende de cuántas páginas tienen el problema. La barra de progreso te muestra el progreso en tiempo real. Cada página se escanea una a la vez.
¿Puedo ver todos los ejemplos de código?
¡Sí! Haz clic en "Ver Todo" para ver una página detallada con todos los ejemplos y todas las páginas afectadas.
Conclusión
La página de Problemas es tu centro de control para gestionar todos los problemas de accesibilidad en tu sitio. Te ayuda a entender qué solucionar, dónde intervenir y cómo verificar las soluciones. Usa filtros para encontrar problemas específicos, siempre comienza con los críticos y siempre verifica tus soluciones con nuevos escaneos.