Saltar al contenido principal

Página de Detalles del Problema

¿Qué es la Página de Detalles del Problema?​

La página de Detalles del Problema muestra todos los errores específicos de un tipo de problema. Cuando haces clic en "Ver todo" en la página de Problemas, te lleva aquí para ver todos los detalles, todas las páginas afectadas y todos los ejemplos de código.

¿Cómo acceder a esta página?​

Puedes acceder a esta página de dos maneras:

  1. Desde la página de Problemas: Haz clic en el botón "Ver todo" en una tarjeta de problema
  2. Enlace directo: La URL contiene el ID del grupo de problemas

Lo que encontrarás en la Página de Detalles​

La página está organizada en varias secciones:

  1. Encabezado - Información del problema y enlace para volver
  2. Filtro de Selector - Para filtrar errores por selector CSS (solo PRO)
  3. Lista de Errores - Todos los errores del grupo con detalles completos
  4. Paginación - Para navegar entre errores si hay muchos

Encabezado de la Página​

En el encabezado de la página verás:

Enlace de Volver​

En la parte superior izquierda hay una flecha que te permite volver a la página principal de Problemas.

Información del Problema​

  • Título: El tipo de problema (por ejemplo, "missing_alt_image")
  • Descripción: La descripción completa del problema
  • Badge de Severidad: Badge de color que indica si es Crítico, Advertencia o Info
  • Contador de Errores Únicos: Cuántos errores únicos hay (después de la deduplicación)

Botón de Escaneo​

Disponible solo para: Plan ENTERPRISE

El botón "Escanear" te permite realizar 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.

Filtro de Selector​

Disponible solo para: Plan PRO o superior

El filtro de selector te permite ver solo errores que tienen un selector CSS específico.

Cómo funciona​

El selector CSS es la ruta que identifica dónde se encuentra el elemento en el código de la página. Por ejemplo:

  • #header img - Imágenes en el encabezado
  • .menu a - Enlaces en el menú
  • form input - Campos de entrada en formularios

Cómo usar el filtro​

  1. Abre el menú desplegable del filtro
  2. Elige un selector de la lista
  3. La lista se actualiza mostrando solo errores con ese selector
  4. Ve el número de resultados debajo del filtro
  5. Haz clic en "Limpiar Filtro" para ver todos los errores nuevamente

Consejo: Usa el filtro cuando quieras enfocarte en errores específicos en una parte particular del sitio.

Lista de Errores​

La lista muestra todos los errores del grupo, uno por tarjeta. Los errores idénticos (mismo selector y mismo HTML) se muestran solo una vez para evitar duplicados.

Tarjeta de Error​

Cada error se muestra en una tarjeta con toda la información:

Encabezado de la Tarjeta:

  • Número de error: "Error #1", "Error #2", etc.
  • Icono de severidad: Icono de color basado en la severidad
  • Badge de severidad: Crítico, Advertencia o Info
  • Badge "Excluido": Si el error ha sido excluido, verás un badge verde

Información:

  • URL: Enlace a la página donde se encontró el error (se abre en nueva pestaña)
  • Escaneo: Título del escaneo del que proviene el error
  • Nivel WCAG: El nivel WCAG del error (A o AA)

Elemento:

  • Selector: El selector CSS que identifica el elemento
  • HTML: El código HTML real del elemento problemático
  • Puedes desplazarte por el HTML si es largo

Recomendación:

  • Una explicación de cómo solucionar este error específico
  • Sugerencias prácticas para solucionarlo

Paginación​

Si hay más de 50 errores, verás una barra de paginación en la parte inferior de la página.

Cómo funciona​

  • 50 errores por página: Cada página muestra un máximo de 50 errores
  • Navegación: Puedes avanzar y retroceder entre páginas
  • Números de página: Verás hasta 5 números de página a la vez
  • Contador: Verás "Mostrando 1-50 de 150 errores únicos"

Cómo usar la paginación​

  • Botón "Anterior": Ir a la página anterior (deshabilitado si estás en la primera página)
  • Números de página: Haz clic en un número para ir directamente a esa página
  • Botón "Siguiente": Ir a la página siguiente (deshabilitado si estás en la última página)

Consejo: La paginación se restablece cuando cambias el filtro, por lo que siempre comienzas desde la primera página.

Barra de Progreso​

Cuando ejecutas un escaneo (botón Escanear), verás una barra de progreso fija en la parte inferior de la página.

Lo que muestra:

  • Título: "Escaneando páginas 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.

Deduplicación Automática​

La página elimina automáticamente errores duplicados. Si el mismo error (mismo selector y mismo HTML) aparece varias veces, se muestra solo una vez.

Por qué es útil:

  • Evita ver el mismo error repetido cientos de veces
  • Te permite enfocarte en errores únicos
  • Reduce el número de errores a gestionar

Cómo funciona:

  • Dos errores se consideran idénticos si tienen:
    • El mismo selector CSS
    • El mismo código HTML
  • Solo se muestra el primer error encontrado

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.

Sin Errores​

Si no hay errores (o el filtro no muestra resultados), verás un mensaje con:

  • Icono de alerta
  • Título: "No se encontraron errores"
  • Descripción que explica por qué no hay errores
  • Enlace para volver a la página de Problemas

Error de Carga​

Si hay un error de carga, la página muestra un mensaje de error. Intenta recargar la página.

Cómo usar la Página de Detalles​

1. Ver Todos los Detalles​

Esta página te muestra todos los detalles de cada error:

  • Dónde se encuentra exactamente (selector)
  • Cómo aparece en el código (HTML)
  • En qué página se encontró
  • Cómo solucionarlo (recomendación)

2. Usar el Filtro para Enfocarse​

Si hay muchos errores:

  1. Usa el filtro de selector para ver solo errores específicos
  2. Soluciona todos los errores con el mismo selector juntos
  3. Elimina el filtro y pasa al siguiente grupo

3. Verificar Soluciones​

Después de hacer cambios:

  1. Haz clic en "Escanear" para verificar si los errores se han resuelto
  2. Espera a que termine el escaneo
  3. Verifica si el número de errores ha disminuido

4. Navegar Entre Páginas​

Si hay muchos errores:

  1. Usa la paginación para ver todos los errores
  2. Soluciona errores página por página
  3. Vuelve a la página de Problemas para ver el progreso general

Consejos​

Organización​

  • Comienza desde la primera página: Los errores están ordenados, comienza desde el primero
  • Usa el filtro: Si sabes que un error está en una parte específica del sitio, usa el filtro de selector
  • Trabaja en grupos: Soluciona todos los errores con el mismo selector juntos

Verificación​

  • Escanea después de soluciones: Usa el botón "Escanear" para verificar que tus soluciones funcionan
  • Verifica el número: Si el número de errores únicos disminuye, estás progresando
  • Verifica múltiples páginas: Si un error aparece en muchas páginas, podría ser un problema sistémico

Detalles​

  • Lee las recomendaciones: Cada error tiene una recomendación específica sobre cómo solucionarlo
  • Mira el HTML: El HTML te muestra exactamente qué hay en el código
  • Usa el selector: El selector te dice dónde encontrar el elemento en el código

Preguntas Frecuentes​

¿Por qué veo menos errores aquí que en la página de Problemas?​

La página de Detalles deduplica automáticamente errores idénticos. Si el mismo error (mismo selector y HTML) aparece en múltiples páginas, se muestra solo una vez. En la página de Problemas ves el número total, aquí ves solo errores únicos.

¿Qué significa "Errores Únicos"?​

"Errores Únicos" significa errores que son diferentes entre sí. Si el mismo error aparece 10 veces, se cuenta como 1 error único. Esto te ayuda a entender cuántos tipos diferentes de errores necesitas solucionar.

¿Puedo ver todos los errores sin paginación?​

No, la paginación es necesaria cuando hay más de 50 errores para mantener la página rápida y manejable. Puedes navegar entre páginas usando los botones de paginación.

¿El filtro de selector funciona en todos los errores?​

Sí, el filtro funciona en todos los errores del grupo, no solo en los de la página actual. Cuando cambias el filtro, la paginación se restablece y comienzas desde la primera página.

¿Qué pasa si excluyo un error?​

Si excluyes un error desde la página principal de Problemas, aquí verás un badge "Excluido" en el error. El error ya no se contará en las estadísticas.

¿Cuánto tiempo tarda en escanear todas las páginas?​

Depende de cuántas páginas tengan el problema. La barra de progreso te muestra el progreso en tiempo real. Cada página se escanea una a la vez.

Conclusión​

La página de Detalles del Problema te da una vista completa de todos los errores de un tipo específico. Usa esta página para ver todos los detalles, filtrar para enfocarte en errores específicos y verificar tus soluciones con nuevos escaneos. Es la herramienta perfecta para solucionar sistemáticamente los problemas de accesibilidad en tu sitio.