Auditoría de Accesibilidad

Auditoría integral de accesibilidad WCAG 2.1 para páginas de Webflow con detección detallada de problemas y soluciones accionables.

Nota importante

SIEMPRE usa las herramientas MCP de Webflow para todas las operaciones:

Usa la webflow_guide_tool de Webflow MCP para obtener las mejores prácticas antes de comenzar
Usa la data_sites_tool de Webflow MCP con la acción list_sites para identificar los sitios disponibles
Usa la data_sites_tool de Webflow MCP con la acción get_site para recuperar los detalles del sitio
Usa la data_pages_tool de Webflow MCP con la acción list_pages para obtener todas las páginas y sus IDs
Usa la data_element_tool de Webflow MCP con la acción get_all_elements (pasando el ID de la página directamente) para obtener información detallada de los elementos
Usa la data_element_tool de Webflow MCP con la acción set_attributes para corregir problemas de accesibilidad
Usa la element_snapshot_tool de Webflow MCP para obtener vistas previas visuales de los elementos — esta es una herramienta del Designer y requiere conexión al Designer si se usa
NO uses ninguna otra herramienta o método para operaciones en Webflow
Todas las llamadas a herramientas deben incluir el parámetro context requerido (15-25 palabras, perspectiva en tercera persona)
No se requiere conexión al Designer para la auditoría ni las correcciones. La data_element_tool funciona sin conexión (headless) en cualquier ID de página obtenido de list_pages. El Designer solo es necesario si eliges usar la element_snapshot_tool para vistas previas visuales opcionales.

Instrucciones

Fase 1: Selección de sitio y página

Obtén información del sitio: Usa la data_sites_tool de Webflow MCP con la acción list_sites para identificar el sitio objetivo
Solicita la selección de página:
- Si el usuario proporciona el ID de página, úsalo directamente
- De lo contrario, usa la data_pages_tool con la acción list_pages para mostrar las páginas disponibles
- Permite que el usuario seleccione qué página(s) auditar
Confirma el alcance de la auditoría: Pregunta al usuario qué desea comprobar:
- Auditoría completa (todas las comprobaciones de accesibilidad)
- Solo problemas críticos (WCAG Nivel A)
- Categorías específicas (formularios, botones, navegación, etc.)

Fase 2: Extracción y análisis de elementos

Extrae todos los elementos: Usa la data_element_tool con la acción get_all_elements, pasando el ID de la página objetivo de la Fase 1, para un análisis detallado — no se necesita conexión al Designer
- Establece include_style_properties: true para comprobar los estilos de enfoque
- Establece include_all_breakpoint_styles: false para minimizar los datos
Analiza los datos de los elementos: Identifica elementos interactivos y de contenido:
- Botones (Button, LinkBlock con rol de botón)
- Enlaces (TextLink, Link, LinkBlock)
- Campos de formulario (Input, Select, Textarea)
- Encabezados (elementos Heading con niveles)
- Divs/spans interactivos (verificar onClick o roles interactivos)
- Imágenes (elementos Image) - SALTAR para esta auditoría
Extrae atributos para cada elemento:
- Atributos ARIA (aria-label, aria-describedby, role, tabIndex)
- Atributos DOM (id, domId, href, type, placeholder)
- Contenido de texto
- Propiedades de estilo (outline, border para estados de enfoque)
- Metadatos del elemento (canHaveAttributes, nombre de etiqueta)

Fase 3: Comprobaciones de accesibilidad

Problemas críticos (deben corregirse - WCAG Nivel A)

Botones solo con icono sin etiqueta (WCAG 4.1.2)
- Buscar: Elementos Button sin contenido de texto
- Comprobar: Falta de aria-label o aria-labelledby
- Impacto: Los lectores de pantalla no pueden identificar el propósito del botón
- Solución: Agrega el atributo aria-label con texto descriptivo
Campos de formulario sin etiqueta (WCAG 1.3.1)
- Buscar: Elementos Input, Select, Textarea
- Comprobar: Falta de etiqueta asociada o aria-label
- Impacto: Los usuarios no saben para qué sirve el campo
- Solución: Agrega aria-label o asocia con <label> usando id
Manejadores de clic no semánticos (WCAG 2.1.1)
- Buscar: Elementos Div o Span (identificados por tipo de elemento)
- Comprobar: Comportamiento interactivo sin rol adecuado/soporte de teclado
- Impacto: No accesible por teclado, los lectores de pantalla ignoran la interactividad
- Solución: Agrega role="button", tabIndex="0", sugiere usar un <button> real
Enlaces sin destino (WCAG 2.1.1)
- Buscar: Elementos Link sin atributo href
- Comprobar: Enlaces que solo usan onClick sin href
- Impacto: No accesible por teclado, rompe las funciones del navegador
- Solución: Agrega un href adecuado o convierte en botón

Problemas serios (deberían corregirse - WCAG Nivel AA)

Contorno de enfoque eliminado sin reemplazo (WCAG 2.4.7)
- Buscar: Elementos con estilo outline: none
- Comprobar: Sin indicador de enfoque alternativo visible
- Impacto: Los usuarios de teclado no pueden ver el enfoque
- Solución: Agrega un estilo de enfoque visible (border, box-shadow, cambio de fondo)
Manejadores de teclado faltantes (WCAG 2.1.1)
- Buscar: Elementos con manejadores onClick
- Comprobar: Falta onKeyDown para las teclas Enter/Espacio
- Impacto: No usable solo con teclado
- Solución: Agrega manejadores de eventos de teclado
Objetivo táctil demasiado pequeño (WCAG 2.5.5)
- Buscar: Elementos cliqueables (botones, enlaces)
- Comprobar: Ancho o alto < 44px
- Impacto: Difícil de pulsar en dispositivos móviles
- Solución: Aumenta el padding o min-width/min-height a 44px

Problemas moderados (considerar corregir)

Problemas de jerarquía de encabezados (WCAG 1.3.1)
- Buscar: Elementos Heading (h1-h6)
- Comprobar: Niveles saltados (h1 → h3, saltándose h2)
- Impacto: Estructura del documento confusa
- Solución: Usa niveles de encabezado secuenciales adecuados
tabIndex positivo (WCAG 2.4.3)
- Buscar: Elementos con tabIndex > 0
- Comprobar: Interrumpe el orden natural de tabulación
- Impacto: Navegación por teclado confusa
- Solución: Usa solo tabIndex="0" o "-1", permite que funcione el orden DOM natural
Rol sin atributos requeridos (WCAG 4.1.2)
- Buscar: Elementos con roles ARIA
- Comprobar: Faltan atributos ARIA requeridos (ej., role="button" sin tabIndex)
- Impacto: Semántica de accesibilidad incompleta
- Solución: Agrega los atributos requeridos para el rol

Fase 4: Categorización y puntuación de problemas

Categoriza todos los hallazgos:
- Crítico: Debe corregirse (bloquea el acceso)
- Serio: Debería corregirse (afecta significativamente la usabilidad)
- Moderado: Considerar corregir (mejora la experiencia)
Calcula la puntuación de accesibilidad (0-100):
- Comienza en 100
- Problema crítico: -10 puntos cada uno
- Problema serio: -5 puntos cada uno
- Problema moderado: -2 puntos cada uno
- Puntuación mínima: 0
Genera un resumen de gravedad:
- Total de problemas encontrados
- Desglose por gravedad
- Tipos de problemas más comunes
- Páginas/secciones más afectadas

Fase 5: Generación del informe

Crea un informe detallado con el formato específico:

═══════════════════════════════════════════════════
AUDITORÍA DE ACCESIBILIDAD: [Nombre de la página]
═══════════════════════════════════════════════════

CRÍTICOS (X problemas)
──────────────────────
[A11Y] Elemento: Botón "Enviar"
  Problema: El botón no tiene nombre accesible
  Ubicación: Sección de formulario, ID de elemento: {component: "abc", element: "xyz"}
  Actual: <button><CloseIcon /></button>
  Solución: Agrega aria-label="Cerrar"
  WCAG: 4.1.2 Nombre, Rol, Valor

[A11Y] Elemento: Campo de entrada
  Problema: Campo de formulario sin etiqueta
  Ubicación: Formulario de contacto, ID de elemento: {component: "def", element: "uvw"}
  Actual: <input type="email" />
  Solución: Agrega aria-label="Dirección de correo electrónico" o asocia con <label>
  WCAG: 1.3.1 Información y relaciones

SERIOS (X problemas)
────────────────────
[A11Y] Elemento: Enlace "Leer más"
  Problema: Contorno de enfoque eliminado sin alternativa visible
  Ubicación: Sección del blog
  Actual: outline: none
  Solución: Agrega un estilo de enfoque visible (ej., border: 2px solid blue)
  WCAG: 2.4.7 Enfoque visible

MODERADOS (X problemas)
───────────────────────
[A11Y] Elemento: Encabezado
  Problema: Jerarquía de encabezados saltada (h1 → h3)
  Ubicación: Sección de artículo
  Actual: <h3>Subsección</h3> después de <h1>Título</h1>
  Solución: Cambia a <h2> o agrega un h2 intermedio
  WCAG: 1.3.1 Información y relaciones

═══════════════════════════════════════════════════
RESUMEN
───────────────────────────────────────────────────
Total de problemas: X
- Críticos: X problemas
- Serios: X problemas
- Moderados: X problemas

Puntuación de accesibilidad: XX/100

Problemas más comunes:
1. [Tipo de problema] - X ocurrencias
2. [Tipo de problema] - X ocurrencias
3. [Tipo de problema] - X ocurrencias
═══════════════════════════════════════════════════

Proporciona información procesable:
- Lista de correcciones priorizadas (primero las críticas)
- Soluciones rápidas (correcciones fáciles con gran impacto)
- Recomendaciones de patrones de diseño
- Recursos para aprender más

Fase 6: Sugerencias de corrección y aprobación (opcional)

Ofrece corregir los problemas automáticamente: Las correcciones no requieren el Designer, así que ofrece correcciones automáticas directamente

Muestra una vista previa de las correcciones:

¿Qué problemas te gustaría corregir?

[1] ✓ Agregar aria-label al botón Enviar
    Elemento: Botón en el formulario de contacto
    Solución: Agrega aria-label="Enviar formulario de contacto"
    Seguro: Sí (solo agregar atributo)

[2] ✓ Agregar aria-label al campo de email
    Elemento: Input en el formulario de contacto
    Solución: Agrega aria-label="Dirección de correo electrónico"
    Seguro: Sí

[3] ⚠️ Corregir jerarquía de encabezados
    Elemento: h3 en la sección de artículo
    Solución: Cambia el nivel de encabezado de h3 a h2
    Seguro: Puede afectar el estilo visual

Escribe los números para omitir (ej., "3"), "todos" para todos, "ninguno" para cancelar

Aplica las correcciones aprobadas: Usa la data_element_tool con la acción set_attributes
- Procesa en lotes
- Muestra el progreso para conjuntos grandes de correcciones
- Informa éxito/fracaso para cada una
Genera un informe posterior a la corrección:
- Problemas corregidos: X
- Problemas restantes: Y
- Nueva puntuación de accesibilidad: XX/100 (mejorada desde YY/100)

Fase 7: Exportación y recursos (opcional)

Ofrece formatos de exportación:
- Markdown (documentación legible)
- JSON (legible por máquina para seguimiento)
- CSV (hoja de cálculo para revisión en equipo)
Proporciona recursos:
- Enlaces de referencia rápida a WCAG 2.1
- Mejores prácticas de accesibilidad de Webflow
- Herramientas de prueba recomendadas (extensiones de navegador, lectores de pantalla)

Consideraciones importantes

Qué comprueba esta habilidad

✅ Accesibilidad de botones (etiquetas, roles) ✅ Etiquetas y asociaciones de campos de formulario ✅ Semántica de enlaces y acceso por teclado ✅ Visibilidad del enfoque y navegación por teclado ✅ Jerarquía y estructura de encabezados ✅ Roles y atributos ARIA ✅ Tamaños de objetivos táctiles ✅ Semántica de elementos interactivos

Qué NO comprueba esta habilidad

❌ Texto alternativo de imágenes (usa la habilidad asset-audit) ❌ Relaciones de contraste de color (requiere análisis visual) ❌ Preferencias de animación/movimiento ❌ Pruebas con lectores de pantalla (necesita verificación manual) ❌ Legibilidad del contenido (nivel de lenguaje, claridad)

Limitaciones

No puede detectar problemas puramente visuales (contraste de color, texto pequeño)
No puede probar el comportamiento real de los lectores de pantalla
No puede validar la calidad o claridad del contenido
Se basa únicamente en atributos de elementos y estructura

Ejemplos

Ejemplo 1: Auditoría de página completa

Solicitud del usuario:

Ejecuta una auditoría de accesibilidad en mi página de inicio

Paso 1: Selección de sitio y página

🔍 Auditoría de accesibilidad: Selección de página

Te ayudaré a auditar tu página de inicio en busca de problemas de accesibilidad.

Primero, obtengamos la información de tu sitio...

Sitios disponibles:
1. Sitio web de la empresa
2. Sitio del portafolio

¿Qué sitio? (1/2)

Respuesta del usuario: 1

Paso 2: Selección de página

Páginas disponibles en Sitio web de la empresa:
1. Inicio (/)
2. Acerca de (/acerca-de)
3. Contacto (/contacto)
4. Blog (/blog)

¿Qué página te gustaría auditar? (1 para Inicio)

Respuesta del usuario: 1

Paso 3: Alcance de la auditoría

¿Qué nivel de auditoría te gustaría?

1. Auditoría completa (todas las comprobaciones WCAG) - Recomendado
2. Solo problemas críticos (cumplimiento Nivel A)
3. Categorías específicas (botones, formularios, navegación)

Tu elección: (1/2/3)

Respuesta del usuario: 1

Paso 4: Progreso de la auditoría

🔄 Ejecutando auditoría de accesibilidad...

Progreso:
✅ Contenido de la página extraído (45 elementos)
✅ Analizando botones y elementos interactivos
✅ Verificando campos de formulario y etiquetas
✅ Validando jerarquía de encabezados
✅ Comprobando navegación por teclado
🔄 Analizando estados de enfoque...

¡Análisis completo!

Paso 5: Informe

═══════════════════════════════════════════════════
AUDITORÍA DE ACCESIBILIDAD: Inicio
═══════════════════════════════════════════════════

CRÍTICOS (3 problemas)
──────────────────────
[A11Y] Elemento: Botón (alternancia de navegación)
  Problema: El botón solo con icono no tiene nombre accesible
  Ubicación: Navegación del encabezado
  ID de elemento: {component: "nav-01", element: "btn-menu"}
  Actual: <button><MenuIcon /></button>
  Solución: Agrega aria-label="Abrir menú de navegación"
  WCAG: 4.1.2 Nombre, Rol, Valor

[A11Y] Elemento: Input (suscripción por correo electrónico)
  Problema: Campo de formulario sin etiqueta
  Ubicación: Pie de página, registro de boletín informativo
  ID de elemento: {component: "footer-01", element: "email-input"}
  Actual: <input type="email" placeholder="Ingresa tu correo" />
  Solución: Agrega aria-label="Dirección de correo electrónico para el boletín"
  WCAG: 1.3.1 Información y relaciones

[A11Y] Elemento: Div (tarjeta cliqueable)
  Problema: Elemento interactivo no semántico
  Ubicación: Sección de servicios, tarjeta 2
  ID de elemento: {component: "services-01", element: "card-02"}
  Actual: <div onClick={...}>Tarjeta de servicio</div>
  Solución: Convierte a <button> o agrega role="button" + tabIndex="0"
  WCAG: 2.1.1 Teclado

SERIOS (5 problemas)
────────────────────
[A11Y] Elemento: Enlace "Más información"
  Problema: Contorno de enfoque eliminado sin alternativa visible
  Ubicación: Sección Hero
  ID de elemento: {component: "hero-01", element: "cta-link"}
  Actual: outline: none
  Solución: Agrega estilo de enfoque - border: 2px solid #0066cc o box-shadow
  WCAG: 2.4.7 Enfoque visible

[A11Y] Elemento: Botón "Suscribirse"
  Problema: Objetivo táctil demasiado pequeño (30px × 36px)
  Ubicación: Formulario de boletín en el pie de página
  ID de elemento: {component: "footer-01", element: "submit-btn"}
  Actual: Botón pequeño
  Solución: Aumenta el padding o establece min-height: 44px
  WCAG: 2.5.5 Tamaño del objetivo

[continúa con 3 problemas serios más...]

MODERADOS (4 problemas)
───────────────────────
[A11Y] Elemento: Encabezado "Nuestros servicios"
  Problema: Jerarquía de encabezados saltada (h1 → h3)
  Ubicación: Sección de servicios
  ID de elemento: {component: "services-01", element: "heading"}
  Actual: <h3>Nuestros servicios</h3> sigue a <h1>Título</h1>
  Solución: Cambia a <h2> o agrega un h2 intermedio
  WCAG: 1.3.1 Información y relaciones

[continúa con 3 problemas moderados más...]

═══════════════════════════════════════════════════
RESUMEN
───────────────────────────────────────────────────
Total de problemas: 12
- Críticos: 3 problemas
- Serios: 5 problemas
- Moderados: 4 problemas

Puntuación de accesibilidad: 42/100

Problemas más comunes:
1. Botones/Enlaces sin etiqueta - 4 ocurrencias
2. Campos de formulario sin etiqueta - 3 ocurrencias
3. Problemas de enfoque - 3 ocurrencias
═══════════════════════════════════════════════════

Paso 6: Ofrece correcciones

🛠 ¿Te gustaría que corrija estos problemas automáticamente?

Correcciones disponibles:
1. Agregar aria-label al botón de menú (Seguro)
2. Agregar aria-label al campo de email (Seguro)
3. Agregar role="button" + tabIndex="0" a la tarjeta de servicio (Seguro)
[...]

¿Quieres proceder con todas las correcciones? (sí/no/mostrar detalles)

Respuesta del usuario: sí

✅ Correcciones aplicadas:
✓ Botón de menú: aria-label agregado correctamente
✓ Campo de email: aria-label agregado correctamente
✓ Tarjeta de servicio: role + tabIndex agregados correctamente
[...]

📊 Auditoría posterior a la corrección:
- Problemas corregidos: 8/12
- Problemas restantes: 4 (moderados)
- Nueva puntuación de accesibilidad: 72/100 (mejorada desde 42/100)

Ejemplo 2: Auditoría de categoría específica

Solicitud del usuario:

Revisa solo los botones en mi página de contacto

Respuesta del agente:

🔍 Auditoría de botones en: Contacto

Elementos de botón encontrados: 4

RESULTADOS:

Crítico: Botón "Enviar" - Sin etiqueta aria-label
  Solución: Agrega aria-label="Enviar formulario de contacto"

Crítico: Botón de menú - Solo icono, sin nombre accesible
  Solución: Agrega aria-label="Abrir menú"

Serio: Botón "Suscribirse" - Objetivo táctil pequeño (30px × 36px)
  Solución: Aumenta min-height a 44px

¿Corregir? (sí/no)

webflow/auditoría-accesibilidad

¿Qué es auditoría-accesibilidad?

Preguntar en tu IA favorita

Documentación

Auditoría de Accesibilidad

Nota importante

Instrucciones

Fase 1: Selección de sitio y página

Fase 2: Extracción y análisis de elementos

Fase 3: Comprobaciones de accesibilidad

Problemas críticos (deben corregirse - WCAG Nivel A)

Problemas serios (deberían corregirse - WCAG Nivel AA)

Problemas moderados (considerar corregir)

Fase 4: Categorización y puntuación de problemas

Fase 5: Generación del informe

Fase 6: Sugerencias de corrección y aprobación (opcional)

Fase 7: Exportación y recursos (opcional)

Consideraciones importantes

Qué comprueba esta habilidad

Qué NO comprueba esta habilidad

Limitaciones

Ejemplos

Ejemplo 1: Auditoría de página completa

Ejemplo 2: Auditoría de categoría específica

Skills relacionados

steipete/sag

steipete/oracle

steipete/peekaboo

mattpocock/design-an-interface

mattpocock/prototype

mattpocock/grill-me